html.ci-entering { overflow: hidden; background: #0a0a0a; }
/* 실제 작업 띠 (약속 히어로 아래, 숫자 위): 방 영상 위에 왼쪽부터 어둡게 깔고 흰 글 */
.about-room { position: relative; height: min(80svh, 780px); min-height: 480px; overflow: hidden; background: #111; color: #fff; display: flex; align-items: center; }
.about-room-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 55%; will-change: transform; }
.about-room::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 8, 10, .88) 0%, rgba(8, 8, 10, .62) 42%, rgba(8, 8, 10, .12) 78%); pointer-events: none; }
.about-room-txt { position: relative; z-index: 1; width: 100%; }
.about-room-txt .label { color: rgba(255, 255, 255, .72); }
.about-room-txt .ttl { color: #fff; }
.about-room-txt .ttl em { color: #ff3b45; }
.about-room-txt .body { color: rgba(255, 255, 255, .78); }
.about-room-next { display: inline-flex; align-self: flex-start; align-items: center; gap: 24px; margin-top: 34px; padding: 14px 22px; border: 1px solid #ffffff60; border-radius: 30px; background: #111b; color: #fff; font-size: 14px; white-space: nowrap; transition: background .2s, color .2s; }
.about-room-next:hover, .about-room-next:focus-visible { background: #fff; color: #111; }
@media (max-width: 700px) { .about-room { height: auto; min-height: 560px; padding: 72px 0; align-items: flex-end; } .about-room::after { background: linear-gradient(0deg, rgba(8, 8, 10, .9) 0%, rgba(8, 8, 10, .6) 55%, rgba(8, 8, 10, .2) 100%); } }
.ci-entering body { overflow: hidden; }
.promise { min-height: calc(100svh - 76px); display: grid; align-items: center; padding: clamp(64px, 9vh, 110px) 0; }
.promise > .wrap { width: 100%; }
.promise .ttl { font-size: clamp(30px, 3.2vw, 48px); }
.promise h1:focus { outline: none; }
.promise .values { margin-top: clamp(40px, 7vh, 76px); }
html.ci-docking, .ci-docking body { overflow: hidden; }
.ci-entering .hd, .ci-entering main, .ci-entering .ft { visibility: hidden; }
/* docking: the header is there but its logo stays concealed until the flying wordmark lands on it; page copy waits for the landing */
.ci-docking main, .ci-docking .ft { visibility: hidden; }
.ci-entering .hd .logo, .ci-docking:not(.ci-docked) .hd .logo { visibility: hidden; }
.ci-docking .hd { animation: ciHeader .7s .2s ease-out both; }
@keyframes ciHeader { from { opacity: 0; } to { opacity: 1; } }
.brand-intro { position: fixed; inset: 0; z-index: 10000; background: #0a0a0a; overflow: hidden; transition: opacity 1s ease; }
.brand-stage { position: absolute; inset: 0; }
.brand-intro.leaving { opacity: 0; pointer-events: none; }
.brand-skip { position: absolute; right: max(28px, env(safe-area-inset-right)); bottom: max(28px, env(safe-area-inset-bottom)); z-index: 2; min-height: 50px; padding: 0 26px; border: 1px solid #fff; border-radius: 999px; background: rgba(0,0,0,.8); color: #fff; font: 700 13px/1 sans-serif; letter-spacing: .16em; cursor: pointer; box-shadow: 0 0 0 5px rgba(255,255,255,.1); }
.brand-skip:hover, .brand-skip:focus-visible { background: #fff; color: #111; outline: 1px solid rgba(255,255,255,.5); outline-offset: 4px; }      /* (10-21) 빨간 테두리 짜침(주인님) → 옅은 흰 테두리 */
.brand-skip span { margin-left: 18px; }
/* (10-21) SKIP이 작아 보인다(주인님) → 크게, 자리는 오른쪽 아래 그대로 */
.brand-skip { top: auto; bottom: max(32px, env(safe-area-inset-bottom)); right: max(28px, env(safe-area-inset-right)); min-height: 64px; padding: 0 34px 0 38px; font-size: 16px; letter-spacing: .22em; }
.brand-skip span { margin-left: 22px; font-size: 18px; }
@media (max-width: 760px) { .brand-skip { top: auto; bottom: max(24px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); min-height: 56px; padding: 0 26px 0 30px; font-size: 15px; } }
.brand-sound { position: absolute; left: max(20px, env(safe-area-inset-left)); bottom: calc(42px + env(safe-area-inset-bottom)); z-index: 2; min-height: 40px; padding: 0 18px; border: 1px solid rgba(255,255,255,.75); border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; font: 700 13px/1 sans-serif; letter-spacing: .06em; cursor: pointer; }
.brand-sound[hidden] { display: none; }
.brand-sound:hover, .brand-sound:focus-visible { background: #fff; color: #111; outline: 1px solid rgba(255,255,255,.5); outline-offset: 4px; }
.brand-credit { position: absolute; bottom: 16px; left: 20px; color: #888; font: 10px/1.4 sans-serif; }
/* after the landing (10-20 밤, 주인님): the Venn fades in apart and quietly slides together (about.html hvGo),
   (10-21) 글이 하나씩 · 카드는 한참 뒤에 떠서 오래 걸림(주인님) → 글 · 카드 3장이 한 번에 같이 떠오름 */
.ci-arrived .promise .split > div:first-child > *, .ci-arrived .promise .values > * { animation: promiseArrive .8s cubic-bezier(.2,.8,.2,1) .35s both; }
.ci-arrived .promise .promise-art { animation: promiseFade .9s ease-out both; }
@keyframes promiseArrive { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes promiseFade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 700px) { .promise { min-height: calc(100svh - 64px); padding: 56px 0; } }
@media (prefers-reduced-motion: reduce) { .brand-intro { transition: none; } .ci-arrived .promise .split > div:first-child > *, .ci-arrived .promise .promise-art, .ci-arrived .promise .values > *, .ci-docking .hd { animation: none; } }
/* (10-21) SKIP이 살짝 움직이게(주인님): 화살표가 앞으로 툭툭 · 빛이 한 번씩 스침 · 은은한 숨쉬기 */
.brand-skip { overflow: hidden; animation: skipBreath 2.4s ease-in-out 1.2s infinite; }
.brand-skip span { display: inline-block; animation: skipNudge 1.6s cubic-bezier(.3,0,.2,1) .8s infinite; }
.brand-skip::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); animation: skipSheen 3.2s ease-in-out 1.6s infinite; pointer-events: none; }
@keyframes skipNudge { 0%, 55%, 100% { transform: translateX(0); } 70% { transform: translateX(7px); } 85% { transform: translateX(2px); } }
@keyframes skipSheen { 0%, 60% { left: -40%; } 100% { left: 130%; } }
@keyframes skipBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .brand-skip, .brand-skip span, .brand-skip::after { animation: none; } }
/* (10-21) SKIP · 소리 단추가 장면 바탕에 맞춰 딱딱 바뀜 (주인님): about-intro.js 가 단추 뒤 바탕색을 보고 data-tone 을 바꾼다.
   검정 바탕 → 흰 알약 · 검은 글 / 종이색 바탕 → 검은 알약 · 흰 글 / 크림슨 바탕 → 흰 알약 · 크림슨 글. 빨간 테두리 없음, 0.12초 */
.brand-skip, .brand-sound { transition: background-color .12s linear, color .12s linear, border-color .12s linear, box-shadow .12s linear; }
.brand-intro[data-tone] .brand-skip, .brand-intro[data-tone] .brand-sound { outline: none; }
.brand-intro[data-tone="dark"] .brand-skip, .brand-intro[data-tone="dark"] .brand-sound { background: #fff; color: #0a0a0a; border-color: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.14); }
.brand-intro[data-tone="light"] .brand-skip, .brand-intro[data-tone="light"] .brand-sound { background: #0a0a0a; color: #fff; border-color: #0a0a0a; box-shadow: 0 0 0 5px rgba(10,10,10,.1); }
.brand-intro[data-tone="red"] .brand-skip, .brand-intro[data-tone="red"] .brand-sound { background: #fff; color: #c4121c; border-color: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.2); }
/* 흰 알약 위에서는 흰 빛이 안 보이므로 옅은 회색 빛, 검은 알약 위에서는 흰 빛 */
.brand-intro[data-tone="dark"] .brand-skip::after, .brand-intro[data-tone="red"] .brand-skip::after { background: linear-gradient(100deg, transparent, rgba(10,10,10,.12), transparent); }
.brand-intro[data-tone="light"] .brand-skip::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent); }
/* 가리키면/포커스: 같은 알약을 살짝 반전한 윤곽 (색은 그대로 또렷하게) */
.brand-intro[data-tone] .brand-skip:hover, .brand-intro[data-tone] .brand-skip:focus-visible,
.brand-intro[data-tone] .brand-sound:hover, .brand-intro[data-tone] .brand-sound:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.brand-intro[data-tone="dark"] .brand-skip:hover, .brand-intro[data-tone="dark"] .brand-skip:focus-visible,
.brand-intro[data-tone="dark"] .brand-sound:hover, .brand-intro[data-tone="dark"] .brand-sound:focus-visible { outline-color: rgba(255,255,255,.7); }
.brand-intro[data-tone="light"] .brand-skip:hover, .brand-intro[data-tone="light"] .brand-skip:focus-visible,
.brand-intro[data-tone="light"] .brand-sound:hover, .brand-intro[data-tone="light"] .brand-sound:focus-visible { outline-color: rgba(10,10,10,.6); }
.brand-intro[data-tone="red"] .brand-skip:hover, .brand-intro[data-tone="red"] .brand-skip:focus-visible,
.brand-intro[data-tone="red"] .brand-sound:hover, .brand-intro[data-tone="red"] .brand-sound:focus-visible { outline-color: rgba(255,255,255,.8); }
@media (prefers-reduced-motion: reduce) { .brand-skip, .brand-sound { transition: none; } }
/* (10-21 주인님) SKIP은 오른쪽 아래가 아니라 가운데 아래 — 숨쉬기(transform) 움직임과 겹치지 않게 margin auto로 가운데 */
.brand-skip, .brand-skip:hover { left: 0 !important; right: 0 !important; margin: 0 auto !important; width: fit-content; }
/* (10-21 주인님) 가운데로 옮겨 잘 보이니 20% 작게 */
.brand-skip { min-height: 51px; padding: 0 27px 0 30px; font-size: 13px; }
.brand-skip span { margin-left: 18px; font-size: 14px; }
@media (max-width: 760px) { .brand-skip { min-height: 45px; padding: 0 21px 0 24px; font-size: 12px; } }