/* UST21 — 모델 선택 → 뷰어 껍데기
 *
 * 화면은 둘뿐이다. 첫 화면(.intro)에서 모델을 고르면 뷰어 껍데기(.shell)가
 * 덮고, 위 막대는 남은 채 아래 iframe 만 갈아 끼운다.
 *
 * 색·모서리·그림자 토큰은 뷰어(Visualization_AI_koos/app/index.html)의
 * :root 를 그대로 가져왔다. 껍데기와 그 안의 뷰어가 다른 사이트처럼
 * 보이면 안 되기 때문이다. 색을 새로 만들지 말고 뷰어 쪽을 따라가라.
 *
 * 인라인 style 속성은 CSP 가 막는다 (_headers). 위치·지연·색 전부 여기서
 * 클래스와 :nth-child 로 준다. HTML 에 style="…" 을 쓰면 조용히 안 먹는다.
 */
:root{
  --ink:   #f4f7fa;
  --ink-2: rgba(244,247,250,.74);
  --ink-3: rgba(244,247,250,.50);
  --ink-4: rgba(244,247,250,.34);

  --glass:  rgba(13,17,24,.82);
  --fill-1: rgba(255,255,255,.07);
  --fill-2: rgba(255,255,255,.12);
  --fill-3: rgba(255,255,255,.18);

  --line:   rgba(255,255,255,.10);
  --line-2: rgba(255,255,255,.17);

  --shadow:    0 10px 34px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.32);
  --shadow-sm: 0 4px 16px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.28);

  --r-sm: 9px;  --r-md: 13px;  --r-lg: 18px;  --r-pill: 999px;
  --blur: saturate(140%) blur(16px);

  --edge: 14px;
  --bar:  56px;                       /* 위 막대 높이 */

  --ease: cubic-bezier(.32,.72,.28,1);
  --dur:  .18s;
  --dur-2: .42s;                      /* 화면 전환. 이보다 길면 답답하다 */

  /* 고르는 중인 모델의 색. app.js 가 손이 얹힌 단추를 보고 실시간으로 바꾼다.
     배경(.bg-accent)·제목 둘째 줄·판 테두리가 이걸 따라간다 */
  --accent-rgb: 150,190,220;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "SF Pro Text", "Segoe UI", Roboto, "Apple SD Gothic Neo",
          "Malgun Gothic", "Noto Sans KR", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:#080b10;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;                  /* 어떤 폭에서도 가로 스크롤은 없다 */
}
/* 뷰어를 볼 때는 페이지가 스크롤되면 안 된다 — 스크롤은 뷰어 몫이다 */
body.is-viewer{ overflow:hidden; }

/* ── 배경 네 겹 ─────────────────────────────────────────────
   .bg(바다색 그라디언트) → .bg-accent(고른 모델 색) → canvas(입자) → .bg-veil
   순서가 곧 z 순서다. 셋 다 fixed 라 첫 화면이 스크롤돼도 같이 안 움직인다 */
.bg{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(120% 78% at 50% -12%, rgba(30,134,188,.22) 0%, transparent 62%),
    radial-gradient(85% 55% at 88% 108%, rgba(192,116,42,.09) 0%, transparent 58%),
    linear-gradient(180deg, #0b1018 0%, #080b10 55%, #06080c 100%);
}
.bg-flow{
  position:fixed; inset:0; z-index:1;
  width:100%; height:100%;
  pointer-events:none;
  opacity:.5;
  transition:opacity var(--dur-2) var(--ease);
}
/* 뷰어가 덮으면 배경 입자는 보이지도 않으면서 GPU 만 먹는다 */
body.is-viewer .bg-flow{ opacity:0; }

/* 고른 모델의 색으로 바다 위쪽이 물든다. 캔버스 입자 색과 짝을 이룬다.
   transition 을 길게 준 건 단추 사이를 훑을 때 색이 튀지 않게 하려는 것 */
.bg-accent{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(90% 62% at 50% -8%,
      rgba(var(--accent-rgb),.32) 0%, transparent 64%),
    radial-gradient(60% 45% at 18% 104%,
      rgba(var(--accent-rgb),.14) 0%, transparent 60%);
  transition:opacity .55s var(--ease), background .55s var(--ease);
}
:root.has-accent .bg-accent{ opacity:1; }
body.is-viewer .bg-accent{ opacity:0; }

/* 입자 위에 얹는 얇은 막. 두 가지 일을 한다.
   1. 위경도 격자 — 지도 위에 있다는 느낌. 가운데만 보이고 가장자리로 갈수록
      mask 로 지운다. 화면 전체에 깔면 모눈종이가 된다.
   2. 가장자리 어둡히기 — 글자가 놓이는 곳의 입자를 눌러 읽기 쉽게 한다 */
.bg-veil{
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  background:radial-gradient(110% 90% at 50% 45%,
             transparent 48%, rgba(6,8,12,.62) 100%);
}
.bg-veil::before{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 100% 112px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 112px 100%;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 100%);
          mask-image:radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 100%);
}

/* ══ 첫 화면 ═════════════════════════════════════════════ */
.intro{
  position:fixed; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  overflow-y:auto; overflow-x:hidden;
  padding:calc(var(--edge) + env(safe-area-inset-top)) var(--edge)
          calc(var(--edge) + env(safe-area-inset-bottom));
  transition:opacity var(--dur-2) var(--ease),
             transform var(--dur-2) var(--ease),
             visibility 0s linear var(--dur-2);
}
body.is-viewer .intro{
  opacity:0;
  transform:scale(.97);
  visibility:hidden;
  pointer-events:none;
}

/* 한 화면에 다 들어와야 한다. 그래서 제목과 숫자를 나란히 두고(왼쪽 글,
   오른쪽 숫자), 그 아래 단추 한 줄, 맨 아래 한 줄. 세로로 쌓기만 하면
   노트북 화면(768px)에서 단추가 접힌 채 시작한다 */
.intro-inner{
  width:100%; max-width:1120px;
  margin:auto;                        /* 넘치면 위가 잘리지 않고 스크롤된다 */
  padding:22px 0 10px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "top   top"
    "head  facts"
    "label label"
    "picks picks"
    "foot  foot";
  column-gap:56px;
  align-items:end;
}
.intro-top  { grid-area:top; }
.intro-head { grid-area:head; }
.facts      { grid-area:facts; }
.pick-label { grid-area:label; }
.picks      { grid-area:picks; }
.intro-foot { grid-area:foot; }

/* ── 등장 안무 ──────────────────────────────────────────────
   위에서 아래로, 왼쪽에서 오른쪽으로. 한꺼번에 뜨면 어디를 볼지 모른다.
   fill-mode 는 backwards 다 — forwards 로 두면 끝난 뒤에도 keyframe 의
   transform 이 남아서 hover 의 transform 을 덮어 버린다 */
@keyframes rise{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}
@keyframes unmask{                    /* 제목 — 아래에서 밀려 올라온다 */
  from{ transform:translateY(108%); }
  to  { transform:none; }
}
@keyframes draw{                      /* 가로줄 — 왼쪽에서 그어진다 */
  from{ transform:scaleX(0); }
  to  { transform:none; }
}
@keyframes lift{                      /* 판 — 조금 작게, 조금 아래에서 */
  from{ opacity:0; transform:translateY(26px) scale(.985); }
  to  { opacity:1; transform:none; }
}
@keyframes pulse{                     /* 살아 있음 표시 점 */
  0%  { box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55); }
  70% { box-shadow:0 0 0 8px rgba(var(--accent-rgb),0); }
  100%{ box-shadow:0 0 0 0 rgba(var(--accent-rgb),0); }
}

.intro-top  { animation:rise .7s var(--ease) 0s backwards; }
.kicker     { animation:rise .7s var(--ease) .08s backwards; }
.h1-line > span{ animation:unmask .9s var(--ease) backwards; }
.h1-line:nth-child(1) > span{ animation-delay:.14s; }
.h1-line:nth-child(2) > span{ animation-delay:.26s; }
.intro-lede { animation:rise .7s var(--ease) .44s backwards; }
.facts      { animation:rise .7s var(--ease) .52s backwards; }
.pick-label { animation:rise .6s var(--ease) .58s backwards; }
.pick-label::after{ animation:draw 1.1s var(--ease) .66s backwards; }
.proj       { animation:lift .75s var(--ease) backwards; }
.proj:nth-child(1){ animation-delay:.70s; }
.proj:nth-child(2){ animation-delay:.80s; }
.proj:nth-child(3){ animation-delay:.90s; }
.intro-foot { animation:rise .7s var(--ease) 1.1s backwards; }

/* ── 맨 윗줄 — 로고와 언어 ─────────────────────────────── */
.intro-top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:clamp(22px,4.2vh,44px);
}
.intro-logo{ height:24px; width:auto; display:block; opacity:.92; }

.intro-lang{
  display:flex; align-items:center; gap:2px;
  padding:3px;
  font-family:var(--mono);
  font-size:11px; font-weight:600; letter-spacing:.06em;
  background:var(--fill-1);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
}
.intro-lang a,.intro-lang span{
  display:block;
  padding:3px 10px;
  border-radius:var(--r-pill);
  text-decoration:none;
  color:var(--ink-4);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.intro-lang a:hover{ color:var(--ink-2); background:var(--fill-1); }
.intro-lang .is-on{ color:var(--ink); background:var(--fill-2); }

/* ── 제목 덩이 ──────────────────────────────────────────── */
.intro-head{ max-width:640px; min-width:0; }

.kicker{
  margin:0 0 14px;
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:12.5px; font-weight:600; letter-spacing:.04em;
  color:var(--ink-3);
}
.kicker i{ width:18px; height:1px; background:var(--line-2); }

.intro-head h1{
  margin:0;
  font-size:clamp(32px,5.1vw,60px);
  font-weight:800;
  letter-spacing:-.03em;            /* 한글 800 은 이보다 좁히면 붙는다 */
  line-height:1.08;
}
/* 줄마다 창을 하나씩 두고 글자가 그 창 아래에서 올라온다. 창 위아래에 여유를
   두는 건 쉼표·꼬리 글자가 잘리지 않게 하려는 것 */
.h1-line{
  display:block; overflow:hidden;
  padding:.06em 0 .12em; margin:-.06em 0 -.12em;
}
.h1-line > span{ display:block; }
/* 둘째 줄은 고르는 중인 모델의 색. 손을 옮기면 제목도 같이 물든다 */
.intro-head em{
  font-style:normal;
  color:rgb(var(--accent-rgb));
  transition:color .55s var(--ease);
}

.intro-lede{
  margin:18px 0 0;
  max-width:58ch;
  font-size:clamp(14px,1.45vw,15.5px);
  line-height:1.7;
  color:var(--ink-2);
  text-wrap:pretty;
}

/* ── 숫자 — 제목 오른쪽에 계기판처럼 ────────────────────
   숫자는 오른쪽 끝을 맞추고 이름은 왼쪽 끝을 맞춘다. 두 열이 각각
   정렬돼야 훑어 읽힌다 */
.facts{
  list-style:none; margin:0 0 4px; padding:0;
  display:grid; grid-template-columns:auto auto;
  column-gap:12px; row-gap:2px;
  align-items:baseline;
}
.facts li{ display:contents; }
.facts b{
  font-family:var(--mono);
  font-size:clamp(18px,1.9vw,24px); font-weight:600;
  letter-spacing:-.02em;
  color:var(--ink);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.facts span{
  font-size:12px; letter-spacing:.02em;
  color:var(--ink-4);
  white-space:nowrap;
}

/* ── "고르세요" 줄 — 점 하나, 글, 오른쪽으로 긋는 선 ──── */
.pick-label{
  margin:clamp(26px,4.4vh,44px) 0 14px;
  display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3);
}
.pick-label::after{
  content:'';
  flex:1 1 auto; height:1px;
  background:linear-gradient(90deg, var(--line-2), transparent);
  transform-origin:left center;
}
.live{
  flex:0 0 auto;
  width:7px; height:7px; border-radius:50%;
  background:rgb(var(--accent-rgb));
  animation:pulse 2.4s var(--ease) infinite;
  transition:background .55s var(--ease);
}

/* ── 프로젝트 판 ─────────────────────────────────────────
   뷰어는 넷이지만 프로젝트는 셋이다. SCHISM 과 SWAN 은 같은 격자 위의
   한 사업이라 판 하나를 나눠 쓴다 — 그래서 가운데 판이 두 배 넓다 */
.picks{
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  gap:12px;
  align-items:stretch;
}
.proj{
  position:relative;
  display:flex; flex-direction:column;
  min-width:0;
  overflow:hidden;

  background:var(--glass);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);

  transition:transform var(--dur) var(--ease),
             border-color .3s var(--ease);
}
/* 판이 통째로 뜬다. 판 안의 단추만 띄우면 둥근 모서리에 잘린다 */
.proj:has(.pick:hover),
.proj:has(.pick:focus-visible){
  transform:translateY(-3px);
  border-color:rgba(var(--accent-rgb),.45);
}
.proj:has(.pick:active){ transform:translateY(-1px); }

.proj-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:12px 18px 10px;
  border-bottom:1px solid var(--line);
}
.proj-head b{
  font-size:11.5px; font-weight:700; letter-spacing:.05em;
  color:var(--ink-2);
  white-space:nowrap;
}
.proj-head span{
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.02em;
  color:var(--ink-4);
  min-width:0;                        /* 없으면 말줄임이 안 된다 */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.proj-body{ flex:1 1 auto; display:grid; grid-template-columns:1fr; min-width:0; }
.proj-pair .proj-body{ grid-template-columns:1fr 1fr; }
.proj-pair .pick + .pick{ border-left:1px solid var(--line); }

/* ── 모델 고르는 단추 ───────────────────────────────────── */
.pick{
  /* button 기본값 지우기 */
  appearance:none; font:inherit; color:inherit; text-align:left;
  border:0; background:transparent;
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; align-items:flex-start;
  width:100%; min-width:0;
  padding:20px 18px 18px;
  cursor:pointer;
  transition:background var(--dur) var(--ease);

  /* 단추 자기 색. app.js 가 주는 --accent-rgb 는 화면 전체용이고, 이건 단추
     하나만의 것이다. 그래서 손이 안 얹힌 단추의 표식도 제 색을 띤다 */
  --m:var(--accent-rgb);
}
.pick[data-model="koos"]  { --m:96,176,232; }
.pick[data-model="schism"]{ --m:108,214,208; }
.pick[data-model="swan"]  { --m:150,162,236; }
.pick[data-model="roms"]  { --m:226,160,92; }

/* 위쪽 가는 빛줄과 아래에서 올라오는 빛. 둘 다 단추 안쪽에만 */
.pick::before{
  content:'';
  position:absolute; left:14%; right:14%; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--m),.9), transparent);
  opacity:0;
  transition:opacity var(--dur-2) var(--ease);
}
.pick::after{
  content:'';
  position:absolute; inset:0; z-index:-1;
  opacity:0;
  background:radial-gradient(120% 90% at 50% 118%,
             rgba(var(--m),.24) 0%, transparent 70%);
  transition:opacity var(--dur-2) var(--ease);
}
.pick:hover, .pick:focus-visible{ background:var(--fill-1); }
.pick:hover::before, .pick:focus-visible::before,
.pick:hover::after,  .pick:focus-visible::after{ opacity:1; }
.pick:focus-visible{
  outline:2px solid rgba(var(--m),.85);
  outline-offset:-6px;
  border-radius:var(--r-md);
}

.pick-no{
  position:absolute; top:16px; right:16px;
  font-family:var(--mono);
  font-size:11px; font-weight:600; letter-spacing:.06em;
  color:var(--ink-4);
  font-variant-numeric:tabular-nums;
  transition:color var(--dur-2) var(--ease);
}
.pick:hover .pick-no{ color:rgb(var(--m)); }

.pick-mark{
  display:block;
  width:46px; height:46px;
  margin-bottom:16px;
  color:rgba(var(--m),.78);
  transition:color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.pick-mark svg{ display:block; width:100%; height:100%; }
.pick:hover .pick-mark{ color:rgb(var(--m)); transform:translateY(-2px) scale(1.06); }

.pick-name{
  font-family:var(--mono);
  font-size:clamp(22px,2.2vw,27px); font-weight:700;
  letter-spacing:-.01em;
  line-height:1.1;
  transition:color var(--dur-2) var(--ease);
}
.pick:hover .pick-name{ color:rgb(var(--m)); }
.pick-desc{
  margin-top:9px;
  font-size:12.5px;
  color:var(--ink-3);
  line-height:1.55;
}
.pick-go{
  margin-top:auto; padding-top:18px;
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600;
  color:var(--ink-4);
  transition:color var(--dur) var(--ease);
}
.pick-go i{
  font-style:normal;
  transition:transform var(--dur) var(--ease);
}
.pick:hover .pick-go{ color:var(--ink); }
.pick:hover .pick-go i{ transform:translateX(4px); }

/* ── 표식 — 손이 얹히면 저마다 제 방식으로 움직인다 ───────
   KOOS 는 예보 바늘이 돌고, SCHISM 은 절점이 차례로 켜지고, SWAN 은 파도가
   밀려오고, ROMS 는 연직 프로파일이 그려진다. 각 모델이 무엇인지 말로
   설명하기 전에 몸이 먼저 안다 */
@keyframes sweep{ to{ transform:rotate(360deg); } }
@keyframes march{ to{ transform:translateX(-14px); } }
@keyframes blink{
  0%,100%{ opacity:.35; } 50%{ opacity:1; }
}
@keyframes trace{
  from{ stroke-dashoffset:100; } to{ stroke-dashoffset:0; }
}
.m-hand{ transform-box:view-box; transform-origin:24px 24px; }
.pick:hover .m-hand{ animation:sweep 4s linear infinite; }

.m-node{ opacity:.55; }
.pick:hover .m-node{ animation:blink 1.6s var(--ease) infinite; }
.pick:hover .m-node:nth-of-type(2){ animation-delay:.25s; }
.pick:hover .m-node:nth-of-type(3){ animation-delay:.5s; }
.pick:hover .m-node:nth-of-type(4){ animation-delay:.75s; }
.m-far{ transition:opacity var(--dur-2) var(--ease); }
.pick:hover .m-far{ opacity:.7; }

.pick:hover .m-wave{ animation:march linear infinite; }
.pick:hover .m-wave:nth-of-type(1){ animation-duration:2.8s; }
.pick:hover .m-wave:nth-of-type(2){ animation-duration:2.3s; }
.pick:hover .m-wave:nth-of-type(3){ animation-duration:1.9s; }
.pick:hover .m-wave:nth-of-type(4){ animation-duration:2.5s; }

.m-prof{ stroke-dasharray:100; stroke-dashoffset:0; }
.pick:hover .m-prof{ animation:trace 1.2s var(--ease) both; }

/* ── 맨 아랫줄 ──────────────────────────────────────────── */
.intro-foot{
  margin-top:clamp(18px,3.2vh,30px);
  padding-top:14px;
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap:10px 18px; flex-wrap:wrap;
  font-size:11.5px;
  color:var(--ink-4);
}
.intro-foot .models{
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.04em;
}
.intro-foot .models b{ font-weight:600; color:var(--ink-3); }

/* ══ 뷰어 껍데기 ═════════════════════════════════════════ */
.shell{
  position:fixed; inset:0; z-index:3;
  display:grid;
  grid-template-rows:auto 1fr;
  opacity:0;
  transform:translateY(8px);
  transition:opacity var(--dur-2) var(--ease),
             transform var(--dur-2) var(--ease);
  pointer-events:none;
}
body.is-viewer .shell{ opacity:1; transform:none; pointer-events:auto; }
.shell[hidden]{ display:none; }

/* ── 위 막대 — 뷰어가 바뀌어도 이건 안 바뀐다 ───────────── */
.topbar{
  height:calc(var(--bar) + env(safe-area-inset-top));
  padding:0 max(10px,env(safe-area-inset-right))
          0 max(10px,env(safe-area-inset-left));
  padding-top:env(safe-area-inset-top);
  display:flex; align-items:center; gap:10px;

  background:var(--glass);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line);
}

.home{
  appearance:none; border:0; background:transparent;
  padding:6px 8px; cursor:pointer; border-radius:var(--r-sm);
  display:flex; align-items:center; flex:0 0 auto;
  transition:background var(--dur) var(--ease);
}
.home:hover{ background:var(--fill-1); }
.home:focus-visible{ outline:2px solid var(--ink-2); outline-offset:1px; }
.home img{ height:19px; width:auto; display:block; opacity:.9; }

/* ── 모델 전환 ──────────────────────────────────────────── */
.switch{
  display:flex; align-items:center; gap:3px;
  flex:1 1 auto; min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.switch::-webkit-scrollbar{ display:none; }

.switch .sep{
  flex:0 0 auto;
  width:1px; height:18px;
  margin:0 5px;
  background:var(--line-2);
}
.switch button{
  appearance:none; font:inherit; color:inherit;
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:0;
  padding:5px 12px;
  cursor:pointer;
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  line-height:1.25;
  transition:background var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.switch button b{
  font-family:var(--mono);
  font-size:12.5px; font-weight:700;
  color:var(--ink-3);
  transition:color var(--dur) var(--ease);
}
.switch button i{
  font-style:normal;
  font-size:10px;
  color:var(--ink-4);
  white-space:nowrap;
}
.switch button:hover{ background:var(--fill-1); }
.switch button:hover b{ color:var(--ink-2); }
.switch button:focus-visible{ outline:2px solid var(--ink-2); outline-offset:1px; }
.switch button.is-on{
  background:var(--fill-2);
  border-color:rgba(var(--accent-rgb),.45);
}
.switch button.is-on b{ color:rgb(var(--accent-rgb)); }

.pop{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 13px;
  font-size:12px; font-weight:600;
  color:var(--ink-3);
  text-decoration:none;
  background:var(--fill-1);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pop:hover{ background:var(--fill-2); color:var(--ink); }

/* ── 뷰어가 들어가는 자리 ───────────────────────────────── */
.stage{ position:relative; min-height:0; background:#06080c; }
.stage iframe{
  display:block;
  width:100%; height:100%;
  border:0;
}

.loading{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:24px;
  text-align:center;
  background:#06080c;
}
.loading[hidden]{ display:none; }
.loading p{ margin:0; font-size:13px; color:var(--ink-3); }
.loading .loading-sub{ font-size:11.5px; color:var(--ink-4); max-width:42ch; }
.spin{
  width:26px; height:26px; margin-bottom:12px;
  border:2px solid var(--line-2);
  border-top-color:rgb(var(--accent-rgb));
  border-radius:50%;
  animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── 좁은 화면 ──────────────────────────────────────────── */

/* 태블릿·세로 노트북: 판을 세로로 쌓고, 단추는 가로 한 줄이 된다
   (표식 · 이름/설명 · 화살표). 세로 카드 넷을 쌓으면 화면 셋 분량이다 */
@media (max-width:900px){
  .intro-inner{
    grid-template-columns:1fr;
    grid-template-areas:"top" "head" "label" "picks" "facts" "foot";
    column-gap:0;
  }
  .intro-head{ max-width:none; }

  .facts{
    margin:20px 0 0;
    display:flex; flex-wrap:wrap; gap:8px 20px;
  }
  .facts li{ display:flex; align-items:baseline; gap:7px; }
  .facts b{ font-size:15px; }

  .picks{ grid-template-columns:1fr; gap:10px; }
  .proj-pair .proj-body{ grid-template-columns:1fr; }
  .proj-pair .pick + .pick{ border-left:0; border-top:1px solid var(--line); }

  .pick{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"mark name go" "mark desc go";
    column-gap:16px; row-gap:2px;
    align-items:center;
    padding:14px 18px 14px 16px;
  }
  .pick-mark{ grid-area:mark; width:40px; height:40px; margin:0; align-self:center; }
  .pick-name{ grid-area:name; align-self:end; font-size:20px; }
  .pick-desc{ grid-area:desc; align-self:start; margin-top:3px; font-size:12px; }
  .pick-go{ grid-area:go; margin:0; padding:0; align-self:center; }
  .pick-go span{ display:none; }        /* 화살표만 남긴다. 번호와 겹친다 */
  .pick-no{ top:12px; right:16px; }
}

@media (max-width:640px){
  .switch button i{ display:none; }   /* 두 줄이면 막대가 뚱뚱해진다 */
  .switch button{ padding:7px 11px; }
  .pop{ display:none; }               /* 휴대폰에서 새 창은 의미가 적다 */
  .bg-flow{ opacity:.36; }
  .bg-veil::before{ display:none; }   /* 좁은 화면에서 격자는 소음이다 */

  .intro-inner{ padding:8px 0 6px; }
  .intro-top{ margin-bottom:26px; }
  .intro-head h1{ font-size:clamp(27px,8vw,40px); }  /* 360px 에서 열한 글자가 한 줄 */
  .intro-lede{ font-size:14px; }
  .pick-label{ margin-top:26px; }
  .pick-label::after{ display:none; }
  .proj-head{ padding:10px 16px 8px; }
  .proj-head span{ display:none; }    /* 이름과 겹치면 둘 다 못 읽는다 */
  .pick{ padding:13px 16px 13px 14px; column-gap:13px; }
  .pick-desc{ font-size:11.5px; }
  .intro-foot{ flex-direction:column; align-items:flex-start; gap:4px; }
}

/* ── 움직임을 줄여 달라고 했으면 줄인다 ─────────────────── */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  .bg-flow{ display:none; }
  .proj:has(.pick:hover){ transform:none; }
  .pick:hover .pick-mark{ transform:none; }
}