/* Th. 공용 셸 — 토큰 · 상단바 · 히어로 · 섹션 · 카드 · 필터 · 로그인 · 하단바 · 오로라
 * 글꼴: <link rel="stylesheet" href="https://trh.kr/fonts/fonts.css">
 * 뼈대: body > .th-aurora + .th-shell > (.th-bar + main.th-main + .th-foot)
 * .th-shell 이 컨테이너(th)라서 너비 규칙은 화면이 아니라 셸 폭을 따릅니다. */

/* ── 유동 스케일 ─────────────────────────────────────────────────
 * 모든 길이는 1u 의 배수입니다. 1u = 1px(폭 1440 이하) → 1.5px(2560 이상), 그 사이는 직선.
 * 1440 → 1, 1920 → 1.21, 2560 → 1.5. 셸 폭(컨테이너) 기준이라 화면보다 좁은 틀 안에서도 같게 동작합니다.
 * 셸 밖(검색 · 시트 · 토스트 · 맨 위로)은 화면 폭 기준 값을 씁니다. 머리카락 선(1px)과 쿼리 경계는 키우지 않습니다. */
@property --u{syntax:'<length>';inherits:true;initial-value:1px}
:root{--u:clamp(1px, 0.04464vw + 0.3571px, 1.5px)}
.th-shell{--u:clamp(1px, 0.04464cqi + 0.3571px, 1.5px)}
:root{
  --bg:#0f1113; --surface:#17191c; --surface-2:#1e2125; --line:#25282c; --line-strong:#353a40;
  --text:#e8eaed; --dim:#9aa1a9; --faint:#6b7178;
  --accent:#4a9bff; --accent-ink:#08111e; --accent-soft:#16273c;
  --radius-sm:calc(var(--u) * 6); --radius-control:calc(var(--u) * 10); --radius:calc(var(--u) * 14); --radius-lg:calc(var(--u) * 20); --radius-pill:calc(var(--u) * 999);
  --tap:calc(var(--u) * 44);
  --space-4:calc(var(--u) * 4); --space-8:calc(var(--u) * 8); --space-12:calc(var(--u) * 12); --space-16:calc(var(--u) * 16); --space-24:calc(var(--u) * 24); --space-32:calc(var(--u) * 32); --space-48:calc(var(--u) * 48); --space-64:calc(var(--u) * 64);
  --font:"Inter","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",Roboto,sans-serif;
  --th-wmax:2400px; --th-bar:calc(var(--u) * 56); --th-nav:calc(var(--u) * 44);
  --brand-youtube:#ff0000; --brand-instagram:#e4405f;
  --svc-home:#4a9bff; --svc-work:#1877f2; --svc-lab:#8b5cf6; --svc-link:#00b894; --svc-id:#6c5ce7; --svc-blog:#f2994a; --svc-pub:#d26ac2;
  --shadow-lift:0 calc(var(--u) * 6) calc(var(--u) * 20) rgba(0,0,0,.5);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:calc(var(--u) * 15);line-height:1.7;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:calc(var(--u) * 2) solid var(--accent);outline-offset:calc(var(--u) * 2);border-radius:calc(var(--u) * 4)}

/* ── 셸과 컨테이너 ───────────────────────────────────────────────
 * pad = clamp(calc(var(--u) * 16), 4%, calc(var(--u) * 64)) of the shell width, container = min(shell − 2·pad, 2400px).
 * 상단바 안쪽 · 히어로 · 섹션 · 하단바 안쪽이 모두 .th-wrap 하나를 씁니다. */
.th-shell{container:th / inline-size;position:relative;z-index:1;display:flex;flex-direction:column;
  min-height:100vh;min-height:100dvh;--pad:clamp(calc(var(--u) * 16),4cqi,calc(var(--u) * 64))}
.th-wrap{width:min(100% - 2 * var(--pad), var(--th-wmax));margin-inline:auto}
.th-main{flex:1;padding-bottom:var(--space-48)}

/* ── 상단바: 1층 공용(56) + 2층 페이지 내비(44) ─────────────────── */
.th-bar{position:sticky;top:0;z-index:20}
.th-bar-shared{position:relative;z-index:2;background:rgb(23 25 28 / .9);-webkit-backdrop-filter:blur(calc(var(--u) * 12));backdrop-filter:blur(calc(var(--u) * 12))}
.th-bar-row{height:var(--th-bar);display:flex;align-items:center;justify-content:space-between;gap:var(--space-16)}
.th-brand{display:flex;align-items:center;gap:var(--space-4);min-width:0;position:relative}
.th-logo{font-size:calc(var(--u) * 20);line-height:calc(var(--u) * 24);font-weight:700;letter-spacing:-.02em;color:var(--text);text-decoration:none;white-space:nowrap}
.th-logo i{font-style:normal;color:var(--accent)}
.th-logo .th-svc{color:var(--dim);font-weight:600}
.th-switch{width:calc(var(--u) * 32);height:calc(var(--u) * 32);display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius-sm);
  background:none;color:var(--dim);cursor:pointer;flex:none}
.th-switch svg{width:calc(var(--u) * 18);height:calc(var(--u) * 18);transition:transform .16s ease}
.th-switch[aria-expanded="true"] svg{transform:rotate(180deg)}
.th-switch:hover{background:var(--surface-2);color:var(--text)}
.th-account{display:flex;align-items:center;gap:var(--space-16);flex:none}
.th-lang{font-size:calc(var(--u) * 13);line-height:calc(var(--u) * 20);font-weight:600;color:var(--dim);text-decoration:none}
.th-lang:hover{color:var(--text)}
.th-me{display:inline-flex;align-items:center;gap:var(--space-4);height:calc(var(--u) * 36);padding:0 var(--space-12);border:1px solid var(--line-strong);
  border-radius:var(--radius-control);background:var(--surface-2);color:var(--text);font-size:calc(var(--u) * 13);font-weight:600;cursor:pointer}
.th-me svg{width:calc(var(--u) * 16);height:calc(var(--u) * 16);color:var(--dim)}

.th-pop{position:absolute;top:calc(100% + calc(var(--u) * 8));left:0;min-width:calc(var(--u) * 200);padding:var(--space-4);margin:0;list-style:none;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow-lift);z-index:30}
.th-pop[hidden]{display:none}
.th-pop a{display:flex;justify-content:space-between;align-items:center;gap:var(--space-16);height:calc(var(--u) * 40);padding:0 var(--space-12);
  border-radius:var(--radius-control);color:var(--text);text-decoration:none;font-size:calc(var(--u) * 15)}
.th-pop a:hover{background:var(--surface-2)}
.th-pop a[aria-current] .cur{font-size:calc(var(--u) * 13);color:var(--accent)}

.th-bar-page{background:rgb(15 17 19 / .72);-webkit-backdrop-filter:blur(calc(var(--u) * 12));backdrop-filter:blur(calc(var(--u) * 12));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.th-tabs{height:calc(var(--u) * 42);display:flex;gap:var(--space-24);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.th-tabs::-webkit-scrollbar{display:none}
.th-tab{display:flex;align-items:center;flex:none;font-size:calc(var(--u) * 14);line-height:calc(var(--u) * 20);color:var(--dim);text-decoration:none;
  border-bottom:calc(var(--u) * 2) solid transparent;margin-bottom:-1px;padding-top:1px}
.th-tab:hover{color:var(--text)}
.th-tab[aria-current]{color:var(--text);font-weight:600;border-bottom-color:var(--accent)}
.th-bar-page[data-overflow="end"] .th-tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - calc(var(--u) * 48)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - calc(var(--u) * 48)),transparent)}
.th-bar-page[data-overflow="start"] .th-tabs{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - calc(var(--u) * 48)),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - calc(var(--u) * 48)),transparent)}
.th-bar-page[data-overflow="both"] .th-tabs{-webkit-mask-image:linear-gradient(90deg,transparent,#000 calc(var(--u) * 48),#000 calc(100% - calc(var(--u) * 48)),transparent);mask-image:linear-gradient(90deg,transparent,#000 calc(var(--u) * 48),#000 calc(100% - calc(var(--u) * 48)),transparent)}

/* ── 버튼 ─────────────────────────────────────────────────────── */
.th-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-4);height:calc(var(--u) * 44);padding:0 var(--space-16);
  border:0;border-radius:var(--radius-control);background:var(--accent);color:var(--accent-ink);font-size:calc(var(--u) * 15);font-weight:700;line-height:1;
  text-decoration:none;white-space:nowrap;cursor:pointer}
.th-btn svg{width:calc(var(--u) * 16);height:calc(var(--u) * 16)}
.th-btn--sm{height:calc(var(--u) * 36);padding:0 var(--space-12);font-size:calc(var(--u) * 13);font-weight:600}
.th-btn:hover{filter:brightness(1.08)}

/* ── 히어로: h1 → 16 → 소셜 줄 → 24 → 설명 ─────────────────────── */
.th-hero{padding-top:calc(var(--u) * 80)}
.th-id{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-16)}
.th-hero > :not(:first-child){margin-top:var(--space-24)}
.th-h1{margin:0;font-size:calc(var(--u) * 44);font-weight:700;line-height:1.28;letter-spacing:-.02em;word-break:keep-all}
.th-h1 em{font-style:normal;color:var(--accent)}
.th-h1 .th-h1-tag{font-size:calc(var(--u) * 22);letter-spacing:0;color:var(--dim)}
.th-lead{margin:0;max-width:70ch;font-size:calc(var(--u) * 15);line-height:1.7;color:var(--dim);word-break:keep-all}

/* 소셜 줄: 글리프 20 이 레이아웃 상자이고, 탭 영역 44 는 ::after 로 바깥에 둡니다 */
.th-soc{display:flex;gap:var(--space-24);margin:0;padding:0;list-style:none}
.th-soc a,.th-soc button{position:relative;display:block;width:calc(var(--u) * 20);height:calc(var(--u) * 20);padding:0;border:0;background:none;cursor:pointer}
.th-soc a::after,.th-soc button::after{content:"";position:absolute;inset:calc(var(--u) * -12)}
.th-soc svg{display:block;width:calc(var(--u) * 20);height:calc(var(--u) * 20);fill:currentColor}
.th-soc a:hover,.th-soc button:hover{filter:brightness(1.3)}
.soc-youtube{color:var(--brand-youtube)} .soc-instagram{color:var(--brand-instagram)}
.soc-github,.soc-x{color:var(--text)} .soc-email{color:var(--accent)}

/* ── 섹션 ─────────────────────────────────────────────────────── */
.th-section{margin-top:var(--space-48);container-type:inline-size}
.th-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-16);margin-bottom:var(--space-16)}
.th-h2{margin:0;font-size:calc(var(--u) * 22);font-weight:700;line-height:1.3;letter-spacing:-.02em}
.th-count{font-size:calc(var(--u) * 13);line-height:calc(var(--u) * 20);color:var(--dim)}
.th-stack > * + *{margin-top:var(--space-16)}
.th-stack > .th-results{margin-top:var(--space-24)}

/* 격자: 줄을 채우고 고아 카드를 만들지 않습니다 */
.th-grid{display:grid;gap:var(--space-16);grid-template-columns:repeat(auto-fill,minmax(max(calc(var(--u) * 280),calc((100% - 4 * var(--space-16)) / 5)),1fr));margin:0;padding:0;list-style:none}
.th-grid > li{display:flex;min-width:0}
.th-grid > li > *{flex:1}
.th-grid[data-n="3"]{grid-template-columns:1fr}
.th-grid[data-n="4"]{grid-template-columns:1fr}
@container (min-width:576px){ .th-grid[data-n="4"]{grid-template-columns:repeat(2,1fr)} }
@container (min-width:812px){ .th-grid[data-n="3"]{grid-template-columns:repeat(3,1fr)} }
@container (min-width:1168px){ .th-grid[data-n="4"]{grid-template-columns:repeat(4,1fr)} }

/* ── 카드 ─────────────────────────────────────────────────────── */
.th-card{display:flex;flex-direction:column;min-width:0;padding:var(--space-16);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--text);text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
@media (hover:hover){
  /* 떠오르는 효과는 누를 수 있는 카드(링크·버튼)에만 줍니다. 상자로 쓰는 div 카드는 반응하지 않습니다. */
  .th-card:is(a,button):hover{transform:translateY(calc(var(--u) * -3));box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--c,var(--accent)) 45%,var(--line))}
}
.th-card-t{margin:0;font-size:calc(var(--u) * 15);font-weight:700;line-height:1.4}
.th-card-d{margin:0;font-size:calc(var(--u) * 13);line-height:1.6;color:var(--dim)}
.svc-tx{display:flex;flex-direction:column;min-width:0}

.svc-ic{width:calc(var(--u) * 46);height:calc(var(--u) * 46);flex:none;display:grid;place-items:center;margin-bottom:var(--space-16);border-radius:var(--radius-control);
  background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c)}
.svc-ic svg{width:calc(var(--u) * 23);height:calc(var(--u) * 23)}
.svc .th-card-d{margin-top:var(--space-4)}
@container (max-width:479px){
  .svc{flex-direction:row;align-items:center;gap:var(--space-16)}
  .svc .svc-ic{margin-bottom:0}
}

.proj .th-card-d{margin-top:var(--space-8)}
.th-tags{display:flex;flex-wrap:wrap;gap:var(--space-8);margin:var(--space-12) 0 0;padding:0;list-style:none}
.th-tags li{height:calc(var(--u) * 24);padding:0 var(--space-8);border:1px solid var(--line-strong);border-radius:var(--radius-pill);font-size:calc(var(--u) * 13);line-height:calc(var(--u) * 22);color:var(--dim)}

.lab-ic{width:calc(var(--u) * 34);height:calc(var(--u) * 34);display:grid;place-items:center;margin-bottom:var(--space-12);border-radius:var(--radius-control);background:var(--accent-soft);color:var(--accent)}
.lab-ic svg{width:calc(var(--u) * 18);height:calc(var(--u) * 18)}
.lab-path{display:flex;gap:var(--space-4);align-items:center;margin-top:var(--space-4);font-size:calc(var(--u) * 13);line-height:1.5;font-weight:600}
.lab-path .g{color:var(--accent)} .lab-path .sep{color:var(--faint);font-weight:400}
.lab .th-card-d{margin-top:var(--space-12);flex:1}
.lab-meta{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-12);margin-top:var(--space-16);padding-top:var(--space-12);border-top:1px solid var(--line);
  font-size:calc(var(--u) * 13);line-height:calc(var(--u) * 20);color:var(--dim)}
.lab-meta span{display:inline-flex;align-items:center;gap:var(--space-4)}
.lab-meta svg{width:calc(var(--u) * 14);height:calc(var(--u) * 14);color:var(--faint)}

.wk{display:flex;flex-direction:column;min-width:0;color:var(--text);text-decoration:none}
.wk-media{display:block;aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.wk-media img{display:block;width:100%;height:100%;object-fit:cover}
.wk .th-card-t{margin-top:var(--space-12);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wk .th-card-d{margin-top:var(--space-4)}

/* ── 검색 · 보기 전환 · 상세 필터 표 ───────────────────────────── */
.th-controls{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8)}
.th-ctl-gap{flex:1}
.th-search{flex:0 1 calc(var(--u) * 420);min-width:0;height:calc(var(--u) * 44);display:flex;align-items:center;gap:var(--space-8);padding:0 var(--space-16);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-control);color:var(--faint)}
.th-search svg{width:calc(var(--u) * 16);height:calc(var(--u) * 16);flex:none}
.th-search input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--text);font:inherit;font-size:calc(var(--u) * 15);outline:0}
.th-search input::placeholder{color:var(--dim)}
.th-seg{display:flex;gap:var(--space-4);padding:var(--space-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-pill);flex:none}
.th-seg button{width:calc(var(--u) * 36);height:calc(var(--u) * 34);display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius-pill);background:none;color:var(--dim);cursor:pointer}
.th-seg button[aria-pressed="true"],.th-seg button[aria-checked="true"]{background:var(--surface-2);color:var(--text)}
.th-seg svg{width:calc(var(--u) * 16);height:calc(var(--u) * 16)}

.th-ftable{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.th-frow{display:flex;min-height:calc(var(--u) * 48)}
.th-frow + .th-frow{border-top:1px solid var(--line-strong)}
.th-fhead{flex:0 0 calc(var(--u) * 120);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-16);background:var(--surface-2);
  border-right:1px solid var(--line-strong);font-size:calc(var(--u) * 13);font-weight:600}
.th-fbody{flex:1;min-width:0;display:flex;align-items:center;padding:var(--space-4) var(--space-16)}
.th-fopts{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none}
.th-fo{display:flex;align-items:center;gap:var(--space-8);height:calc(var(--u) * 40);font-size:calc(var(--u) * 13);color:var(--text);cursor:pointer;min-width:0}
.th-fo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
.th-fo input{appearance:none;-webkit-appearance:none;margin:0;width:calc(var(--u) * 16);height:calc(var(--u) * 16);flex:none;border:1.5px solid var(--line-strong);border-radius:calc(var(--u) * 4);background:var(--surface-2)}
.th-fo input{display:grid;place-items:center;transition:background-color .12s,border-color .12s}
.th-fo input:checked{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2 6.6 11.2 12.5 4.8' fill='none' stroke='%2308111e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;border-color:var(--accent)}
.th-fo input:checked + span{color:var(--text);font-weight:600}
.th-fo:hover input:not(:checked):not(:disabled){border-color:var(--dim)}
.th-fo input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.th-fmore{font-size:calc(var(--u) * 13);font-weight:600;color:var(--dim);background:none;border:0;padding:0;cursor:pointer;flex:none}
.th-fhead .th-fmore{display:none}
@container (max-width:1023px){ .th-fopts{grid-template-columns:repeat(3,minmax(0,1fr))} }
@container (max-width:599px){
  .th-frow{flex-direction:column}
  .th-fhead{flex:0 0 calc(var(--u) * 40);border-right:0}
  .th-fhead .th-fmore{display:block}
  .th-fbody .th-fmore{display:none}
  .th-fbody{padding:var(--space-4) var(--space-16) var(--space-8)}
  .th-fopts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .th-fo{height:calc(var(--u) * 36)}
  .th-fopts[data-lines="1"] li:nth-child(n+3){display:none}
}

/* ── 로그인 상자 (Th.ID) ───────────────────────────────────────── */
.th-login{width:min(100%,calc(var(--u) * 400));display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-16);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.th-sso{height:calc(var(--u) * 44);display:flex;align-items:center;gap:var(--space-12);padding:0 var(--space-16);border:0;border-radius:var(--radius-control);
  font-size:calc(var(--u) * 15);line-height:1;text-align:left;cursor:pointer;text-decoration:none}
.th-sso .ic{width:calc(var(--u) * 20);height:calc(var(--u) * 20);flex:none;display:grid;place-items:center}
.th-sso .ic svg{display:block}
.th-sso--google{background:#fff;color:#1f1f1f;box-shadow:inset 0 0 0 1px #dadce0}
.th-sso--kakao{background:#fee500;color:#191919}
.th-sso--naver{background:#03c75a;color:#fff}

/* ── 송금 (Th. Pay) ────────────────────────────────────────────── */
.pay-ways{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);max-width:calc(var(--u) * 560)}
.pay-btn{min-height:calc(var(--u) * 72);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:calc(var(--u) * 2);padding:var(--space-12) var(--space-16);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--text);font-size:calc(var(--u) * 15);font-weight:700;
  line-height:1.4;text-align:left;text-decoration:none;cursor:pointer}
.pay-btn .hint{font-size:calc(var(--u) * 13);font-weight:400;color:var(--dim)}
.pay-btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pay-btn--primary .hint{color:rgb(8 17 30 / .78)}
@container (max-width:359px){ .pay-ways{grid-template-columns:1fr} }

/* ── 하단바 ───────────────────────────────────────────────────── */
.th-foot{border-top:1px solid var(--line);background:rgb(15 17 19 / .6);padding:var(--space-24) 0;font-size:calc(var(--u) * 13);line-height:calc(var(--u) * 20);color:var(--dim)}
.th-foot-in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12) var(--space-24)}
.th-foot-l{display:flex;align-items:center;gap:var(--space-12)}
.th-foot-mark{font-weight:700;color:var(--text)}
.th-foot-r{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8) var(--space-16)}
.th-foot a,.th-foot button{color:var(--dim);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font:inherit}
.th-foot a:hover,.th-foot button:hover{color:var(--text)}
.th-ver{display:inline-flex;align-items:center;gap:var(--space-4);font-variant-numeric:tabular-nums}
.th-ver svg{display:block;width:calc(var(--u) * 14);height:calc(var(--u) * 14)}

/* ── 가운데 정렬 변형: 내용이 짧고 행동이 하나인 화면 ───────────────
 * .th-shell 에 .th-page--center 를 더합니다. 상단바 · 하단바는 그대로 왼쪽 선을 지키고,
 * 본문 블록(h1 · 설명 · 행동)만 폭 480 으로 가운데에 놓습니다.
 * 세로는 남는 높이의 가운데이되, 아래 여백을 위보다 48 더 두어 시각 중심(기하 중심보다 24 위)에 둡니다. */
.th-page--center .th-main{display:flex;flex-direction:column;justify-content:center;padding-top:var(--space-48);padding-bottom:calc(var(--space-48) * 2)}
.th-page--center .th-main .th-wrap{width:min(100% - 2 * var(--pad), calc(var(--u) * 480))}
.th-contents{display:contents}
.th-page--center .th-hero{padding-top:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.th-page--center .th-id{align-items:center}
.th-page--center .th-lead{margin-inline:auto}
.th-page--center .th-login,.th-page--center .pay-ways,.th-page--center .th-report{width:100%;max-width:none}
.th-page--center .pay-btn{align-items:center;text-align:center}
.th-btn--ghost{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.th-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-8)}
.th-report{display:flex;flex-direction:column;gap:var(--space-12);text-align:left}
.th-report-page{margin:0;font-size:calc(var(--u) * 13);line-height:1.5;color:var(--dim);word-break:break-all}
.th-report textarea{width:100%;min-height:calc(var(--u) * 128);padding:var(--space-12) var(--space-16);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-control);color:var(--text);font:inherit;font-size:calc(var(--u) * 15);line-height:1.6;resize:vertical}

/* ── 토스트 ───────────────────────────────────────────────────── */
.th-toast{position:fixed;left:50%;bottom:calc(var(--u) * 24);transform:translate(-50%,calc(var(--u) * 8));padding:calc(var(--u) * 10) calc(var(--u) * 16);border-radius:var(--radius-pill);
  background:var(--surface-2);border:1px solid var(--line-strong);color:var(--text);font-size:calc(var(--u) * 13);opacity:0;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;z-index:50}
.th-toast[data-on]{opacity:1;transform:translate(-50%,0)}

/* ── 768 미만 ─────────────────────────────────────────────────── */
@container th (max-width:767px){
  .th-switch{width:calc(var(--u) * 30);height:calc(var(--u) * 30)}
  .th-switch svg{width:calc(var(--u) * 17);height:calc(var(--u) * 17)}
  .th-tabs{gap:var(--space-16)}
  .th-hero{padding-top:calc(var(--u) * 56)}
  .th-page--center .th-hero{padding-top:0}
  .th-page--center .th-main{padding-top:var(--space-32);padding-bottom:calc(var(--space-32) * 2)}
  .th-h1{font-size:calc(var(--u) * 28)}
  .th-h1 .th-h1-tag{font-size:calc(var(--u) * 18)}
  .th-h2{font-size:calc(var(--u) * 18)}
  .th-foot-in{flex-direction:column;align-items:flex-start}
}

/* ── 오로라: 하나의 정의, 화면에 고정 ───────────────────────────
 * 왼쪽 위에 무게, 오른쪽 위 가는 보라 줄기, 왼쪽 아래 낮은 청록, 오른쪽 아래는 비웁니다.
 * 구슬마다 크기 · 각도 · 흐림 · 투명도 · 주기 · 경로가 다릅니다. */
.th-aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.th-aurora i{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen;translate:-50% -50%;will-change:transform}
.th-aurora .o-a{width:max(58vw,calc(var(--u) * 380));aspect-ratio:1/.52;left:9%;top:5%;rotate:-16deg;opacity:.32;filter:blur(calc(var(--u) * 100));
  background:radial-gradient(closest-side,#2d88ff,rgb(45 136 255 / 0) 93%);animation:th-oa 52s ease-in-out infinite alternate}
.th-aurora .o-d{width:max(24vw,calc(var(--u) * 180));aspect-ratio:1/1.8;left:30%;top:30%;rotate:-38deg;opacity:.18;filter:blur(calc(var(--u) * 120));
  background:radial-gradient(closest-side,#4a9bff,rgb(74 155 255 / 0) 93%);animation:th-od 44s ease-in-out infinite alternate}
.th-aurora .o-b{width:max(44vw,calc(var(--u) * 260));aspect-ratio:1/.38;left:82%;top:3%;rotate:14deg;opacity:.26;filter:blur(calc(var(--u) * 70));
  background:radial-gradient(closest-side,#7c5cff,rgb(124 92 255 / 0) 93%);animation:th-ob 37s ease-in-out infinite alternate}
.th-aurora .o-c{width:max(36vw,calc(var(--u) * 260));aspect-ratio:1/.7;left:5%;top:93%;rotate:6deg;opacity:.26;filter:blur(calc(var(--u) * 110));
  background:radial-gradient(closest-side,#18c9d8,rgb(24 201 216 / 0) 93%);animation:th-oc 61s ease-in-out infinite alternate}
.th-aurora .o-g{width:min(52vw,calc(var(--u) * 760));aspect-ratio:1/.8;left:36%;top:38%;rotate:-10deg;opacity:.7;filter:blur(calc(var(--u) * 70));
  background:radial-gradient(closest-side,rgb(45 136 255 / .22),rgb(124 92 255 / .11) 65%,rgb(124 92 255 / 0) 99%);animation:th-og 23s ease-in-out infinite alternate}
@keyframes th-oa{to{transform:translate(4vw,2vw);rotate:-11deg}}
@keyframes th-od{to{transform:translate(3vw,4vw);rotate:-30deg}}
@keyframes th-ob{to{transform:translateX(-5vw) scaleX(1.15)}}
@keyframes th-oc{to{transform:translateY(-3vw) scale(1.12)}}
@keyframes th-og{from{opacity:.55}to{opacity:.8}}
@media (prefers-reduced-motion:reduce){ .th-aurora i{animation:none} }


/* ══ 2026-10-04 3차 ═════════════════════════════════════════════ */

/* 앵커 이동: 상단바 두 층(100) 아래 16 에 섹션 머리가 오게. 768 미만은 2층(44)만 남습니다 */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
.th-main [id]{scroll-margin-top:calc(var(--th-nav) + calc(var(--u) * 16))}

/* 히어로 가운데 변형: 표지층만 가운데, 아래 목록층은 왼쪽 그대로 */
.th-hero--center{text-align:center}
.th-hero--center .th-id{align-items:center}
.th-hero--center .th-lead{margin-inline:auto}

/* 가운데 블록 안 SSO: 아이콘은 왼쪽 고정 자리, 라벨은 버튼 전체 기준 가운데 */
.th-page--center .th-sso{position:relative;justify-content:center;padding:0 calc(var(--u) * 48)}
.th-page--center .th-sso .ic{position:absolute;left:calc(var(--u) * 16);top:calc(var(--u) * 12)}

/* 알림 줄(로그인 실패 등) */
.th-alert{display:flex;gap:calc(var(--u) * 8);align-items:flex-start;width:100%;padding:calc(var(--u) * 12) calc(var(--u) * 16);border-radius:var(--radius-control);
  background:rgb(255 107 107 / .1);border:1px solid rgb(255 107 107 / .35);color:#ffb4b4;font-size:calc(var(--u) * 13);line-height:1.6;text-align:left}

/* 필터 버튼 + 펼침 판 + 좁은 화면 바텀시트 */
.th-search-row{display:flex;gap:calc(var(--u) * 8);flex:1;min-width:0}
.th-filter-btn{height:calc(var(--u) * 44);display:inline-flex;align-items:center;gap:calc(var(--u) * 8);padding:0 calc(var(--u) * 14);flex:none;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-control);color:var(--text);font-size:calc(var(--u) * 15);cursor:pointer}
.th-filter-btn svg{width:calc(var(--u) * 16);height:calc(var(--u) * 16);color:var(--dim)}
.th-filter-btn[aria-expanded="true"]{border-color:var(--accent)}
.th-badge{min-width:calc(var(--u) * 20);height:calc(var(--u) * 20);padding:0 calc(var(--u) * 6);border-radius:var(--radius-pill);background:var(--accent);color:var(--accent-ink);font-size:calc(var(--u) * 12);font-weight:700;line-height:calc(var(--u) * 20);text-align:center}
.th-badge[hidden]{display:none}
.th-fpanel[hidden]{display:none}
.th-fpanel-head,.th-fpanel-foot{display:none}
.th-fmore[hidden]{display:none}
.th-fopts:not([data-open]) > li[data-over]{display:none}
.th-fbody .th-fmore{margin-left:calc(var(--u) * 16);width:calc(var(--u) * 72);text-align:right;white-space:nowrap}
/* 더 보기 버튼이 없는 줄도 같은 폭을 비워 둡니다. 그래야 줄마다 칸 너비가 같아 체크박스가 한 세로선에 섭니다. */
@container (min-width:600px){ .th-fbody .th-fmore[hidden]{display:block;visibility:hidden} }
.th-sheet-host{position:fixed;inset:0;z-index:60;container:th / inline-size}
.th-sheet-host[hidden]{display:none}
.th-sheet-scrim{position:absolute;inset:0;background:rgb(0 0 0 / .55)}
.th-fpanel.is-sheet{position:absolute;left:0;right:0;bottom:0;max-height:85%;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line-strong);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:0 calc(var(--u) * -8) calc(var(--u) * 32) rgba(0,0,0,.5)}
.th-fpanel.is-sheet .th-fpanel-head{display:flex;align-items:center;justify-content:space-between;height:calc(var(--u) * 56);padding:0 calc(var(--u) * 4) 0 calc(var(--u) * 16);flex:none}
.th-fpanel.is-sheet .th-fpanel-head b{font-size:calc(var(--u) * 15)}
.th-fpanel.is-sheet .th-ftable{border:0;border-radius:0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);overflow:auto;flex:1}
.th-fpanel.is-sheet .th-fpanel-foot{display:flex;gap:calc(var(--u) * 8);padding:calc(var(--u) * 12) calc(var(--u) * 16) calc(calc(var(--u) * 12) + env(safe-area-inset-bottom));flex:none}
.th-fpanel.is-sheet .th-fpanel-foot .th-btn{flex:1}
.th-x{width:calc(var(--u) * 44);height:calc(var(--u) * 44);display:grid;place-items:center;padding:0;border:0;background:none;color:var(--dim);cursor:pointer}
.th-x svg{width:calc(var(--u) * 20);height:calc(var(--u) * 20)}
html.th-lock{overflow:hidden}
.th-empty{padding:calc(var(--u) * 48) calc(var(--u) * 16);text-align:center;color:var(--dim);font-size:calc(var(--u) * 15);border:1px dashed var(--line-strong);border-radius:var(--radius)}

/* 좁은 화면의 프로젝트 카드: 촘촘한 가로 줄(다음 카드가 살짝 보이게) */
@container (max-width:575px){
  .th-grid--strip{display:flex;gap:calc(var(--u) * 12);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(var(--u) * -16);padding:0 calc(var(--u) * 16) calc(var(--u) * 4);scroll-padding-inline:calc(var(--u) * 16)}
  .th-grid--strip::-webkit-scrollbar{display:none}
  .th-grid--strip > li{flex:0 0 calc(var(--u) * 248);scroll-snap-align:start}
  .th-grid--strip .th-card-d{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

/* 작품: 고정 카드 · 이미지 없음 */
.wk-media{position:relative}
.wk-media--empty{background:var(--surface-2)}
.wk-pin{position:absolute;left:calc(var(--u) * 8);top:calc(var(--u) * 8);display:inline-flex;align-items:center;gap:calc(var(--u) * 4);height:calc(var(--u) * 24);padding:0 calc(var(--u) * 8);border-radius:var(--radius-pill);
  background:rgb(15 17 19 / .8);border:1px solid var(--line-strong);color:var(--text);font-size:calc(var(--u) * 12);font-weight:600}
.wk-pin svg{width:calc(var(--u) * 12);height:calc(var(--u) * 12);color:var(--accent)}

/* 입력칸 */
.th-field{display:flex;flex-direction:column;gap:calc(var(--u) * 6);text-align:left}
.th-label{font-size:calc(var(--u) * 13);font-weight:600;color:var(--text)}
.th-label em{font-style:normal;font-weight:400;color:var(--dim);margin-left:calc(var(--u) * 4)}
.th-input,.th-field textarea{width:100%;min-height:calc(var(--u) * 44);padding:calc(var(--u) * 10) calc(var(--u) * 16);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-control);
  color:var(--text);font:inherit;font-size:calc(var(--u) * 15);line-height:1.6}
.th-field textarea{min-height:calc(var(--u) * 128);resize:vertical}
.th-input:focus,.th-field textarea:focus{outline:calc(var(--u) * 2) solid var(--accent);outline-offset:-1px;border-color:transparent}
.th-field [aria-invalid="true"]{border-color:#ff6b6b}
.th-error{font-size:calc(var(--u) * 13);color:#ffb4b4}
.th-error[hidden]{display:none}
.th-help{font-size:calc(var(--u) * 13);line-height:1.6;color:var(--dim)}
.th-report{gap:calc(var(--u) * 16)}
.th-report .th-btn{width:100%}
.th-report-done{margin:0;padding:calc(var(--u) * 24) calc(var(--u) * 16);text-align:center;font-size:calc(var(--u) * 15);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.th-report-done[hidden]{display:none}

/* Link 로그인 뒤 · ID 프로필 */
.th-form{display:flex;flex-direction:column;gap:calc(var(--u) * 16);max-width:calc(var(--u) * 560)}
.th-list{margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.th-list li{display:flex;align-items:center;gap:calc(var(--u) * 12);min-height:calc(var(--u) * 56);padding:calc(var(--u) * 8) calc(var(--u) * 16)}
.th-list li + li{border-top:1px solid var(--line)}
.th-list .grow{flex:1;min-width:0}
.th-tag{height:calc(var(--u) * 22);padding:0 calc(var(--u) * 8);border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent);font-size:calc(var(--u) * 12);font-weight:600;line-height:calc(var(--u) * 22)}
.th-linkbtn{background:none;border:0;padding:0;color:var(--dim);font:inherit;font-size:calc(var(--u) * 13);cursor:pointer;text-decoration:underline;text-underline-offset:calc(var(--u) * 3)}
.th-linkbtn--danger{color:#ff8b8b}
.th-fold{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:0 calc(var(--u) * 16)}
.th-fold + .th-fold{margin-top:calc(var(--u) * 8)}
.th-fold summary{min-height:calc(var(--u) * 48);display:flex;align-items:center;cursor:pointer;font-size:calc(var(--u) * 15)}
.th-fold p{margin:0 0 calc(var(--u) * 16);font-size:calc(var(--u) * 13);line-height:1.6;color:var(--dim)}

/* ── 배경 대안 (data-bg) ─────────────────────────────────────── */
/* top: 위쪽 한 방향의 아주 부드러운 빛. 움직임 · 흐림 필터 없음 */
.th-aurora[data-bg="top"] i,.th-aurora[data-bg="grain"] i{display:none}
.th-aurora[data-bg="top"]{background:
  radial-gradient(120% 70% at 18% -12%, rgb(45 136 255 / .13), rgb(45 136 255 / 0) 62%),
  radial-gradient(80% 55% at 88% -18%, rgb(124 92 255 / .08), rgb(124 92 255 / 0) 64%)}
/* grain: 단색 위 매우 옅은 노이즈(정지 이미지 한 장) */
.th-aurora[data-bg="grain"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.06}
/* soft: 지금 오로라를 훨씬 크고 느리고 옅게 */
.th-aurora[data-bg="soft"] i{scale:1.5}
.th-aurora[data-bg="soft"] .o-a{opacity:.2;animation-duration:104s}
.th-aurora[data-bg="soft"] .o-d{opacity:.1;animation-duration:88s}
.th-aurora[data-bg="soft"] .o-b{opacity:.15;animation-duration:74s}
.th-aurora[data-bg="soft"] .o-c{opacity:.15;animation-duration:122s}
.th-aurora[data-bg="soft"] .o-g{opacity:.45;animation-duration:46s}

/* ── 유동 상단바 ────────────────────────────────────────────────
 * 내려가면 1층(56)이 위로 빠지고 2층만 붙습니다. 올라오면 1층이 돌아옵니다. 데스크톱 · 모바일 같은 규칙.
 * 맨 위(data-bar=top)는 바탕이 거의 투명, 스크롤 뒤에는 흐림이 진해집니다. */
.th-bar{transition:transform .22s ease}
.th-bar[data-bar="down"]{transform:translateY(calc(-1 * var(--th-bar)))}
.th-bar-shared,.th-bar-page{transition:background-color .22s ease,-webkit-backdrop-filter .22s ease,backdrop-filter .22s ease}
.th-bar[data-bar="up"] .th-bar-shared,.th-bar[data-bar="down"] .th-bar-shared{background:rgb(23 25 28 / .9);-webkit-backdrop-filter:blur(calc(var(--u) * 16));backdrop-filter:blur(calc(var(--u) * 16))}
.th-bar[data-bar="up"] .th-bar-page,.th-bar[data-bar="down"] .th-bar-page{background:rgb(15 17 19 / .85);-webkit-backdrop-filter:blur(calc(var(--u) * 16));backdrop-filter:blur(calc(var(--u) * 16))}
.th-bar[data-bar="top"] .th-bar-shared{background:rgb(23 25 28 / .35);-webkit-backdrop-filter:blur(calc(var(--u) * 4));backdrop-filter:blur(calc(var(--u) * 4))}
.th-bar[data-bar="top"] .th-bar-page{background:rgb(15 17 19 / .3);-webkit-backdrop-filter:blur(calc(var(--u) * 4));backdrop-filter:blur(calc(var(--u) * 4))}
@media (prefers-reduced-motion:reduce){ .th-bar,.th-bar-shared,.th-bar-page{transition:none} }

/* ── 맨 위로 ─────────────────────────────────────────────────── */
.th-totop{position:fixed;z-index:30;width:calc(var(--u) * 44);height:calc(var(--u) * 44);display:grid;place-items:center;padding:0;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);color:var(--text);box-shadow:var(--shadow-lift);cursor:pointer}
.th-totop[hidden]{display:none}
.th-totop svg{width:calc(var(--u) * 20);height:calc(var(--u) * 20)}

/* ── 전역 검색 ───────────────────────────────────────────────── */
.th-search-btn{width:calc(var(--u) * 36);height:calc(var(--u) * 36);display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius-control);background:none;color:var(--dim);cursor:pointer}
.th-search-btn:hover{background:var(--surface-2);color:var(--text)}
.th-search-btn svg{width:calc(var(--u) * 20);height:calc(var(--u) * 20)}
/* 전역 검색: 상단바 1층이 검색창, 2층이 범위. 결과는 바 바로 아래 같은 폭으로 */
.th-bar-page{position:relative}
.th-sx-row,.th-sx-scopes{position:absolute;inset:0;display:none}
.th-bar[data-search]{transform:none!important;z-index:71}
.th-bar[data-search] .th-bar-row,.th-bar[data-search] .th-bar-page > .th-tabs{visibility:hidden}
.th-bar[data-search] .th-sx-row,.th-bar[data-search] .th-sx-scopes{display:block}
.th-bar[data-search] .th-bar-shared{background:var(--surface)}
.th-bar[data-search] .th-bar-page{background:var(--bg)}
.th-sx-in{height:var(--th-bar);display:flex;align-items:center;gap:calc(var(--u) * 12)}
.th-sx-in > svg{width:calc(var(--u) * 20);height:calc(var(--u) * 20);color:var(--dim);flex:none}
.th-sx-input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--text);font:inherit;font-size:calc(var(--u) * 17);outline:0;box-shadow:none;padding:0;-webkit-appearance:none;appearance:none}
.th-sx-input:focus,.th-sx-input:focus-visible{outline:0;box-shadow:none}
.th-sx-input::placeholder{color:var(--faint)}
.th-sx-input::-webkit-search-cancel-button{display:none}
.th-sx-close{flex:none;height:calc(var(--u) * 36);padding:0 var(--space-12);border:0;border-radius:var(--radius-control);background:none;color:var(--dim);font:inherit;font-size:calc(var(--u) * 14);font-weight:600;cursor:pointer}
.th-sx-close:hover{background:var(--surface-2);color:var(--text)}
/* 검색 2층: [필터] 버튼 + 고른 조건 칩 한 줄(넘치면 가로로 밉니다). 필터 줄은 색인에서 만들어집니다(2026-10-08) */
.th-sx-tools{height:100%;display:flex;align-items:center;gap:var(--space-12);overflow-x:auto;scrollbar-width:none}
.th-sx-tools::-webkit-scrollbar{display:none}
.th-sx-tools .th-filter-btn{height:calc(var(--u) * 32);padding:0 calc(var(--u) * 12);font-size:calc(var(--u) * 13)}
.th-sx-tools .th-filter-btn:disabled{opacity:.5;cursor:default}
.th-sx-tools .th-picked,.th-sx-tools .th-picked-list,.th-sx-tools .th-picked-g{flex-wrap:nowrap;white-space:nowrap}
.th-sx-tools .th-picked-list button,.th-sx-tools .th-linkbtn{flex:none}
#th-sx-fp:not(.is-sheet){margin-top:var(--space-12)}
.th-sx-on .th-sheet-host{z-index:80}
.th-sx{position:fixed;left:0;right:0;bottom:0;top:calc(var(--th-bar) + var(--th-nav));z-index:70}
.th-sx[hidden]{display:none}
.th-sx-scrim{position:absolute;inset:0;background:rgb(0 0 0 / .55)}
.th-sx-panel{position:absolute;left:0;right:0;top:0;max-height:calc(100% - var(--space-48));overflow:auto;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lift)}
.th-sx-panel[hidden]{display:none}
.th-sx-body{padding:var(--space-12) 0 var(--space-16)}
.th-sx-group + .th-sx-group{margin-top:calc(var(--u) * 8)}
.th-sx-gl{padding:calc(var(--u) * 8) 0 calc(var(--u) * 4);font-size:calc(var(--u) * 12);font-weight:600;color:var(--faint)}
.th-sx-item{display:flex;flex-direction:column;gap:calc(var(--u) * 2);margin:0 calc(var(--u) * -12);padding:calc(var(--u) * 10) calc(var(--u) * 12);border-radius:var(--radius-control);color:var(--text);text-decoration:none}
.th-sx-item[aria-selected="true"],.th-sx-item:hover{background:var(--surface)}
.th-sx-t{font-size:calc(var(--u) * 15);line-height:1.4}
.th-sx-s{font-size:calc(var(--u) * 13);line-height:1.5;color:var(--dim)}
.th-sx-none{margin:0;padding:calc(var(--u) * 24) 0;color:var(--dim);font-size:calc(var(--u) * 15)}
.th-sx-skel{display:flex;flex-direction:column;gap:calc(var(--u) * 8)}
.th-sx-skel i{display:block;height:calc(var(--u) * 52);border-radius:var(--radius-control);background:linear-gradient(90deg,var(--surface),var(--surface-2),var(--surface));background-size:200% 100%;animation:th-skel 1.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .th-sx-skel i{animation:none} }
@media (max-width:640px){ .th-sx-panel{bottom:0;max-height:none} .th-sx-scrim{background:var(--bg)} }

/* 작품 세로(숏폼) 썸네일: 가운데 contain + 좌우는 미리 줄인 같은 이미지를 늘려 어둡게(정지, CSS 필터 없음) */
.wk-media--tall{position:relative}
.wk-media--tall .wk-bg{position:absolute;inset:-8%;background-size:cover;background-position:center}
.wk-media--tall .wk-bg::after{content:"";position:absolute;inset:0;background:rgb(8 9 11 / .55)}
.wk-media--tall img{position:relative;object-fit:contain}

/* 정렬 메뉴 · 고른 조건 · 결과 0 옵션 · 안내 · 좁은 폭의 도구 줄 */
.th-sort{position:relative;flex:none}
.th-sort-btn{height:calc(var(--u) * 44);display:inline-flex;align-items:center;gap:calc(var(--u) * 4);padding:0 calc(var(--u) * 12) 0 calc(var(--u) * 14);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-control);color:var(--text);font-size:calc(var(--u) * 15);cursor:pointer;white-space:nowrap}
.th-sort-btn svg{width:calc(var(--u) * 16);height:calc(var(--u) * 16);color:var(--dim)}
.th-pop--right{left:auto;right:0;min-width:calc(var(--u) * 160)}
.th-pop a[aria-current]{color:var(--accent);font-weight:600}
.th-picked{display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--u) * 8)}
.th-picked[hidden]{display:none}
.th-picked-list{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 8);margin:0;padding:0;list-style:none}
.th-picked-list button{height:calc(var(--u) * 28);display:inline-flex;align-items:center;gap:calc(var(--u) * 6);padding:0 calc(var(--u) * 10);border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);background:var(--surface-2);color:var(--text);font-size:calc(var(--u) * 13);cursor:pointer}
.th-picked-list button span{color:var(--dim)}
.th-fo--zero{color:var(--faint);cursor:default}
.th-notice{display:flex;align-items:flex-start;gap:calc(var(--u) * 8);margin:0;padding:calc(var(--u) * 10) calc(var(--u) * 14);background:var(--surface-2);border-radius:var(--radius-control);
  font-size:calc(var(--u) * 13);line-height:1.6;color:var(--dim)}
.th-notice svg{flex:none;width:calc(var(--u) * 14);height:calc(var(--u) * 14);margin-top:calc(var(--u) * 3);color:var(--faint)}
@container (max-width:599px){
  .th-controls .th-search{flex:1 0 100%}
}

/* Th. 워드마크: 가운데 표지 화면의 제목(Link · ID · Pay). 상단바 로고와 같은 문법, h1 보다 한 단계 큼 */
.th-wordmark{margin:0;font-size:calc(var(--u) * 64);font-weight:700;line-height:1.1;letter-spacing:-.035em;white-space:nowrap}
.th-wordmark i{font-style:normal;color:var(--accent)}
.th-wm-svc{color:var(--dim);font-weight:600}
.th-wordmark[data-wm="glow"] i{text-shadow:0 0 calc(var(--u) * 14) rgb(74 155 255 / .7),0 0 calc(var(--u) * 32) rgb(74 155 255 / .35)}
.th-wordmark[data-wm="grad"] .th-wm-svc{background:linear-gradient(100deg,var(--dim) 20%,color-mix(in srgb,var(--accent) 60%,var(--dim)));-webkit-background-clip:text;background-clip:text;color:transparent}
.th-wordmark[hidden]{display:none}
@container th (max-width:767px){ .th-wordmark{font-size:calc(var(--u) * 40)} }

/* ── 상단바 오른쪽 버튼: 높이 36 · 안쪽 여백 12 · 오른쪽 끝. 로그인 버튼은 폭 96,
 *    계정 버튼은 닉네임 길이만큼(최대 160, 768 미만은 로그인 버튼과 같은 96)이고 넘치면 말줄임 ── */
.th-account > .th-btn--sm{width:calc(var(--u) * 96);height:calc(var(--u) * 36);justify-content:center;flex:none}
.th-account > .th-me{width:auto;max-width:calc(var(--u) * 160);height:calc(var(--u) * 36);flex:none}
.th-me{min-width:0;white-space:nowrap}
.th-me-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-me svg{flex:none}
@container th (max-width:767px){ .th-account > .th-me,.th-acct-menu > .th-me{max-width:calc(var(--u) * 96)} }
.th-btn--block{width:100%;height:calc(var(--u) * 48)}

/* ── 가운데 변형의 넓은 폭(폼): 블록 640, 위에서 시작해 상태가 바뀌어도 움직이지 않음 ── */
.th-page--wide .th-main{justify-content:flex-start}
.th-page--wide .th-main .th-wrap{width:min(100% - 2 * var(--pad), calc(var(--u) * 640))}
.th-page--wide .th-label{font-size:calc(var(--u) * 14);font-weight:600}
.th-page--wide .th-input{height:calc(var(--u) * 48);font-size:max(16px, calc(var(--u) * 16))}
.th-page--wide .th-field textarea{font-size:max(16px, calc(var(--u) * 16));line-height:1.6;min-height:calc(var(--u) * 16 * 1.6 * 8 + var(--u) * 22)}
.th-reply{margin:0;height:calc(var(--u) * 48);display:flex;align-items:center;padding:0 calc(var(--u) * 16);border:1px dashed var(--line-strong);border-radius:var(--radius-control);font-size:calc(var(--u) * 14);color:var(--dim);text-align:left}

/* ── 프로필 ─────────────────────────────────────────────────── */
.th-prof{display:flex;align-items:center;gap:calc(var(--u) * 16)}
.th-prof-tx{display:flex;flex-direction:column;gap:calc(var(--u) * 2)}
.th-avatar{position:relative;flex:none;width:calc(var(--u) * 64);height:calc(var(--u) * 64);border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--surface-2);
  border:1px solid var(--line-strong)}
.th-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.th-avatar-i{font-size:calc(var(--u) * 26);font-weight:700;color:var(--dim)}
.th-avatar--s{width:calc(var(--u) * 32);height:calc(var(--u) * 32)}
.th-avatar--s .th-avatar-i{font-size:calc(var(--u) * 14)}
.th-prof .th-avatar{overflow:visible}
.th-prof .th-avatar img{border-radius:50%}
/* 연필 표시는 사진이 편집으로 가는 링크·버튼일 때만 붙입니다. */
.th-prof :is(a,button) .th-avatar::after{content:"";position:absolute;right:calc(var(--u) * -2);bottom:calc(var(--u) * -2);width:calc(var(--u) * 24);height:calc(var(--u) * 24);border-radius:50%;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8eaed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E") center/55% no-repeat;
  border:1px solid var(--line-strong);cursor:pointer}
@container th (max-width:767px){ .th-prof .th-avatar{width:calc(var(--u) * 48);height:calc(var(--u) * 48)} }
.th-acct{flex-direction:row;align-items:center;gap:calc(var(--u) * 12)}
.th-acct .grow,.th-list .grow{display:flex;flex-direction:column;min-width:0;flex:1}
.th-acct b,.th-list b{font-size:calc(var(--u) * 15);font-weight:600}
.th-acct .ic,.th-list .ic{width:calc(var(--u) * 20);display:grid;place-items:center}
.th-more{font-size:calc(var(--u) * 13);color:var(--dim)}
.th-row-act{display:flex;gap:calc(var(--u) * 12)}
.th-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u) * 12);margin:0 0 calc(var(--u) * 12);padding:0;list-style:none}
.th-stats li{display:flex;flex-direction:column;gap:calc(var(--u) * 4);padding:calc(var(--u) * 16);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.th-stat-n{font-size:calc(var(--u) * 24);font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.th-stat-l{font-size:calc(var(--u) * 13);color:var(--dim)}
@container (max-width:599px){ .th-stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
.th-score{gap:calc(var(--u) * 12)}
.th-score-top{display:flex;align-items:baseline;gap:calc(var(--u) * 8)}
.th-score-n{font-size:calc(var(--u) * 32);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.th-score-l{font-size:calc(var(--u) * 13);color:var(--dim)}
.th-level{font-size:calc(var(--u) * 13);font-weight:600;color:var(--accent)}
.th-tip{position:relative;align-self:center}
.th-tip-btn{width:calc(var(--u) * 20);height:calc(var(--u) * 20);border-radius:50%;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--dim);font-size:calc(var(--u) * 12);font-weight:700;cursor:help;padding:0}
.th-tip-pop{position:absolute;left:50%;bottom:calc(100% + var(--u) * 8);transform:translateX(-50%);width:max-content;max-width:calc(var(--u) * 260);padding:calc(var(--u) * 8) calc(var(--u) * 12);
  border-radius:var(--radius-control);background:var(--surface-2);border:1px solid var(--line-strong);font-size:calc(var(--u) * 13);line-height:1.5;color:var(--text);opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:5}
.th-tip:hover .th-tip-pop,.th-tip-btn:focus-visible + .th-tip-pop{opacity:1}
.th-bar-meter{height:calc(var(--u) * 8);border-radius:999px;background:var(--surface-2);overflow:hidden}
.th-bar-meter i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.th-meter-l{display:flex;justify-content:space-between;font-size:calc(var(--u) * 12);color:var(--dim);font-variant-numeric:tabular-nums}
.th-switch-row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 16);padding-top:calc(var(--u) * 12);border-top:1px solid var(--line);font-size:calc(var(--u) * 15)}
.th-toggle{position:relative;width:calc(var(--u) * 44);height:calc(var(--u) * 26);flex:none;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface-2);cursor:pointer;padding:0;transition:background-color .16s ease}
.th-toggle::after{content:"";position:absolute;left:calc(var(--u) * 3);top:calc(var(--u) * 3);width:calc(var(--u) * 18);height:calc(var(--u) * 18);border-radius:50%;background:var(--dim);transition:transform .16s ease,background-color .16s ease}
.th-toggle[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
.th-toggle[aria-checked="true"]::after{transform:translateX(calc(var(--u) * 18));background:var(--accent-ink)}
@media (prefers-reduced-motion:reduce){ .th-toggle,.th-toggle::after{transition:none} }

/* 대화상자 */
.th-dialog-host{position:fixed;inset:0;z-index:65;display:grid;place-items:center;container:th / inline-size}
.th-dialog-host[hidden]{display:none}
.th-dialog{position:relative;width:min(calc(var(--u) * 520),100% - 32px);max-height:85%;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);box-shadow:0 16px 48px rgba(0,0,0,.55);overflow:hidden}
.th-dialog[hidden]{display:none}
.th-dialog .th-fpanel-head{display:flex;align-items:center;justify-content:space-between;height:calc(var(--u) * 56);padding:0 calc(var(--u) * 4) 0 calc(var(--u) * 16);border-bottom:1px solid var(--line);flex:none}
.th-dialog-body{overflow:auto;padding:calc(var(--u) * 16);display:flex;flex-direction:column;gap:calc(var(--u) * 12)}
.th-dialog-h{margin:calc(var(--u) * 8) 0 0;font-size:calc(var(--u) * 13);font-weight:600;color:var(--dim)}
.th-dialog .th-login{width:100%;padding:0;border:0;background:none}
.th-dialog.is-sheet{position:absolute;left:0;right:0;bottom:0;width:auto;max-height:85%;border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.th-dialog-host .th-sheet-scrim{position:absolute;inset:0}

/* 리더보드 */
.th-seg--text button{width:auto;padding:0 calc(var(--u) * 14);font-size:calc(var(--u) * 14)}
.th-lb{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.th-lb .th-lb-list{border:0;border-radius:0}
.th-rank{width:calc(var(--u) * 28);text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:var(--dim)}
.th-lb-list li:nth-child(-n+3) .th-rank{color:var(--accent)}
.th-pts{font-weight:700;font-variant-numeric:tabular-nums}
.th-lb-me{position:sticky;bottom:0;display:flex;align-items:center;gap:calc(var(--u) * 12);min-height:calc(var(--u) * 56);padding:calc(var(--u) * 8) calc(var(--u) * 16);
  background:var(--surface-2);border-top:1px solid var(--line-strong)}
.th-lb-me .grow{flex:1;display:flex;align-items:center;gap:calc(var(--u) * 8)}

.th-seg--text{display:inline-flex}
.th-prov{width:calc(var(--u) * 28);height:calc(var(--u) * 28);border-radius:calc(var(--u) * 8);display:grid;place-items:center;flex:none}
.th-prov svg{width:calc(var(--u) * 16);height:calc(var(--u) * 16)}
.th-prov--google{background:#fff}.th-prov--kakao{background:#fee500}.th-prov--naver{background:#03c75a}

/* ── 서비스 전환: 추천 · 미니 ─────────────────────────────────── */
.th-pop-h{padding:var(--space-8) var(--space-12) var(--space-4);font-size:calc(var(--u) * 12);font-weight:600;color:var(--faint)}
.th-pop-h:not(:first-child){margin-top:var(--space-4);border-top:1px solid var(--line);padding-top:var(--space-12)}
.th-pop-soon{display:flex;justify-content:space-between;align-items:center;gap:var(--space-16);height:calc(var(--u) * 40);padding:0 var(--space-12);color:var(--faint);font-size:calc(var(--u) * 15)}
.th-pop-soon .cur{font-size:calc(var(--u) * 12)}

/* ── Th. 표시 대안 ───────────────────────────────────────────── */
.th-wordmark[data-wm="sheen"]{background:linear-gradient(180deg,#fff 0%,var(--text) 45%,color-mix(in srgb,var(--text) 70%,var(--accent)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.th-wordmark[data-wm="sheen"] i{-webkit-text-fill-color:var(--accent)}
.th-wordmark[data-wm="sheen"] .th-wm-svc{-webkit-text-fill-color:var(--dim)}
.th-wordmark[data-wm="pulse"] i{display:inline-block;animation:th-dot 1.6s cubic-bezier(.3,.7,.3,1) .3s both;text-shadow:0 0 calc(var(--u) * 14) rgb(74 155 255 / .7)}
@keyframes th-dot{0%{transform:scale(1);text-shadow:none}35%{transform:scale(1.6);text-shadow:0 0 calc(var(--u) * 28) rgb(74 155 255 / .9)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ .th-wordmark[data-wm="pulse"] i{animation:none} }

/* ── Pay 안내 ─────────────────────────────────────────────────── */
.pay-note{margin-top:var(--space-16);text-align:left}

/* ── Link 소개: 들어올 때 한 번만. 긴 주소 칸이 짧은 링크 길이로 줄고 QR 이 붙습니다(0.7초, 반복 없음) ── */
.lk-demo{display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 12);height:calc(var(--u) * 56);margin:var(--space-8) auto var(--space-24)}
.lk-box{position:relative;display:block;height:calc(var(--u) * 44);width:calc(var(--u) * 176);border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--surface);overflow:hidden;
  animation:lk-box .7s cubic-bezier(.2,.8,.2,1) .5s both}
.lk-long,.lk-short{position:absolute;left:calc(var(--u) * 14);top:0;bottom:0;display:flex;align-items:center;white-space:nowrap;font-size:calc(var(--u) * 14)}
.lk-long{color:var(--dim);animation:lk-out .25s ease-out .5s both}
.lk-short{color:var(--text);font-weight:600;animation:lk-in .3s ease-out .85s both}
.lk-short b{color:var(--accent)}
.lk-qr{flex:none;width:calc(var(--u) * 44);height:calc(var(--u) * 44);border-radius:calc(var(--u) * 6);overflow:hidden;animation:lk-in .3s ease-out .95s both}
.lk-qr svg{display:block;width:100%;height:100%;fill:#0f1113}
@keyframes lk-box{from{width:calc(var(--u) * 360)}}
@keyframes lk-out{to{opacity:0;transform:translateX(calc(var(--u) * -12))}}
@keyframes lk-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){ .lk-box,.lk-long,.lk-short,.lk-qr{animation:none} .lk-long{opacity:0} }
@media (max-width:420px){ @keyframes lk-box{from{width:calc(100vw - 2 * var(--pad) - var(--u) * 56)}} }

/* ── ID: 연결된 로그인 개수 · 티어 · 점수 기준 ──────────────────── */
html[data-links="many"] [data-links="one"]{display:none!important}
.th-merge-ic{color:var(--dim)} .th-merge-ic svg{width:calc(var(--u) * 20);height:calc(var(--u) * 20)}
.th-tier{display:inline-flex;align-items:center;gap:calc(var(--u) * 4);font-size:calc(var(--u) * 13);font-weight:600;color:var(--tc);white-space:nowrap}
.th-tier svg{width:calc(var(--u) * 16);height:calc(var(--u) * 16);flex:none}
.th-tier--bronze{--tc:#c98a5a}.th-tier--silver{--tc:#b4bec9}.th-tier--gold{--tc:#e6b84a}.th-tier--platinum{--tc:#5fd4c4}.th-tier--diamond{--tc:#8fb4ff}
.th-tier--lg{flex-direction:column;gap:calc(var(--u) * 2);font-size:calc(var(--u) * 13);min-width:calc(var(--u) * 64)}
.th-tier--lg svg{width:calc(var(--u) * 44);height:calc(var(--u) * 44)}
.th-score-top{align-items:center;gap:calc(var(--u) * 16)}
.th-score-tx{display:flex;flex-direction:column;gap:calc(var(--u) * 4)}
.th-score-n small{font-size:calc(var(--u) * 15);font-weight:600;color:var(--dim);margin-left:calc(var(--u) * 2)}
.th-score-all{display:flex;flex-direction:column;align-items:flex-end;gap:calc(var(--u) * 4);font-size:calc(var(--u) * 13);color:var(--dim)}
.th-score-all b{font-size:calc(var(--u) * 20);color:var(--text);font-variant-numeric:tabular-nums}
.th-bar-meter--bronze i{background:#c98a5a}.th-bar-meter--silver i{background:#b4bec9}.th-bar-meter--gold i{background:#e6b84a}.th-bar-meter--platinum i{background:#5fd4c4}.th-bar-meter--diamond i{background:#8fb4ff}
.th-hist{display:flex;align-items:center;gap:calc(var(--u) * 16);flex-wrap:wrap;padding-top:calc(var(--u) * 12);border-top:1px solid var(--line)}
.th-hist-l{font-size:calc(var(--u) * 13);color:var(--dim)}
.th-hist ul{display:flex;gap:calc(var(--u) * 16);flex-wrap:wrap;margin:0;padding:0;list-style:none}
.th-hist li{display:flex;align-items:center;gap:calc(var(--u) * 6)}
.th-hist-m{font-size:calc(var(--u) * 13);color:var(--faint)}
.th-rules{margin-top:calc(var(--u) * 12)}
.th-rule-t{width:100%;border-collapse:collapse;margin:0 0 calc(var(--u) * 12);font-size:calc(var(--u) * 14)}
.th-rule-t th,.th-rule-t td{padding:calc(var(--u) * 10) 0;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.th-rule-t th{width:calc(var(--u) * 88);font-weight:600}
.th-rule-t td{color:var(--dim)}
.th-num{text-align:right!important;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)!important;white-space:nowrap;padding-left:calc(var(--u) * 12)!important}
.th-tier-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(var(--u) * 8);margin:0 0 calc(var(--u) * 12);padding:0;list-style:none}
.th-tier-scale li{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u) * 4);padding:calc(var(--u) * 10) calc(var(--u) * 12);border:1px solid var(--line);border-radius:var(--radius-control)}
.th-tier-scale .th-num{padding-left:0!important;font-size:calc(var(--u) * 13);color:var(--dim)!important;font-weight:600}
@container (max-width:599px){ .th-tier-scale{grid-template-columns:repeat(2,minmax(0,1fr))} .th-score-top{flex-wrap:wrap} .th-score-all{align-items:flex-start;width:100%;flex-direction:row;justify-content:space-between} }
.th-lb-list .th-tier{margin-right:calc(var(--u) * 12)}
.th-lb-me .th-tier{margin-right:calc(var(--u) * 12)}

/* ── 작품 상세: 넓은 화면은 영상 2 : 정보 1, 정보는 따라 내려옴 ─────── */
.wd-top{display:flex;flex-direction:column;gap:var(--space-16);padding-top:var(--space-24)}
.wd-back{display:inline-flex;align-items:center;gap:calc(var(--u) * 4);align-self:flex-start;min-height:calc(var(--u) * 44);margin-left:calc(var(--u) * -6);color:var(--dim);font-size:calc(var(--u) * 14)}
.wd-back:hover{color:var(--text)}
.wd-back svg{width:calc(var(--u) * 18);height:calc(var(--u) * 18)}
.wd{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24);margin-top:var(--space-24);align-items:start}
@media (min-width:1024px){ .wd{grid-template-columns:minmax(0,2fr) minmax(calc(var(--u) * 320),1fr);gap:var(--space-32)} .wd-info{position:sticky;top:calc(var(--th-nav) + var(--space-24))} }
.wd-stage{display:block;position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000}
.wd-stage img{display:block;width:100%;height:100%;object-fit:cover}
.wd-play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:calc(var(--u) * 68);height:calc(var(--u) * 68);border-radius:50%;border:0;padding:0;
  background:rgb(15 17 19 / .62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .15s}
.wd-play svg{width:42%;height:42%}
.wd-play:hover{background:var(--accent);color:var(--accent-ink);transform:scale(1.05)}
.wd-strip{display:flex;gap:calc(var(--u) * 12);margin:calc(var(--u) * 12) 0 0;padding:0;list-style:none;overflow-x:auto}
.wd-strip button{display:flex;flex-direction:column;gap:calc(var(--u) * 6);width:calc(var(--u) * 148);padding:0;border:0;background:none;color:var(--dim);font:inherit;cursor:pointer;text-align:left}
.wd-strip .wk-media{display:block;aspect-ratio:16/9;border-radius:var(--radius-control);overflow:hidden;outline:2px solid transparent;outline-offset:2px;background:#000}
.wd-strip .wk-media img{width:100%;height:100%;object-fit:cover;display:block}
.wd-strip .wk-media--tall img{object-fit:contain}
.wd-strip button[aria-pressed="true"] .wk-media{outline-color:var(--accent)}
.wd-strip button[aria-pressed="true"]{color:var(--text)}
.wd-strip-l{display:flex;align-items:center;gap:calc(var(--u) * 6);font-size:calc(var(--u) * 13)}
.wd-strip-l svg{width:calc(var(--u) * 14);height:calc(var(--u) * 14);fill:currentColor}
.wd-kicker{margin:0 0 calc(var(--u) * 8);font-size:calc(var(--u) * 13);color:var(--dim)}
.wd-title{margin:0;font-size:calc(var(--u) * 26);font-weight:700;line-height:1.35;letter-spacing:-.02em;word-break:keep-all;overflow-wrap:anywhere}
.wd-stats{display:flex;align-items:center;gap:calc(var(--u) * 16);margin-top:var(--space-16);font-size:calc(var(--u) * 13);color:var(--dim)}
.wd-stats > span{display:inline-flex;align-items:center;gap:calc(var(--u) * 6)}
.wd-stats svg{width:calc(var(--u) * 16);height:calc(var(--u) * 16)}
.wd-like{display:inline-flex;align-items:center;gap:calc(var(--u) * 6);height:calc(var(--u) * 32);padding:0 calc(var(--u) * 12);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--text);font:inherit;font-size:calc(var(--u) * 13);cursor:pointer}
.wd-like:hover{border-color:var(--line-strong)}
.wd-like[aria-pressed="true"]{color:#ff6b81;border-color:color-mix(in srgb,#ff6b81 45%,var(--line))}
.wd-like[aria-pressed="true"] svg{fill:currentColor}
.wd-links{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 8);margin-top:var(--space-16)}
.wd-links svg{width:calc(var(--u) * 14);height:calc(var(--u) * 14);margin-left:calc(var(--u) * 4)}
.wd-body{margin:var(--space-24) 0 0;padding-top:var(--space-16);border-top:1px solid var(--line);font-size:calc(var(--u) * 15);line-height:1.7;color:var(--text);white-space:pre-line;overflow-wrap:anywhere}
.wd-pn{display:flex;justify-content:space-between;gap:var(--space-16);margin-bottom:var(--space-48)}
.wd-pn-a{display:flex;align-items:center;gap:calc(var(--u) * 10);min-width:0;max-width:50%;padding:calc(var(--u) * 12) calc(var(--u) * 16);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.wd-pn-a--off{visibility:hidden}
.wd-pn-a:hover{border-color:var(--line-strong)}
.wd-pn-a svg{flex:none;width:calc(var(--u) * 18);height:calc(var(--u) * 18);color:var(--dim)}
.wd-pn-a span{display:flex;flex-direction:column;min-width:0;font-size:calc(var(--u) * 12);color:var(--dim)}
.wd-pn-a b{font-size:calc(var(--u) * 15);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){ .wd-title{font-size:calc(var(--u) * 21)} .wd-pn-a{max-width:100%} .wd-strip button{width:calc(var(--u) * 120)} }

/* ── 가입 ─────────────────────────────────────────────────────── */
.su{display:flex;flex-direction:column;gap:var(--space-24);width:100%;text-align:left}
.su-photo{display:flex;align-items:center;gap:var(--space-16)}
.su-preview{flex:none;width:calc(var(--u) * 80);height:calc(var(--u) * 80);border-radius:50%;overflow:hidden;background:var(--surface-2)}
.su-preview img{width:100%;height:100%;display:block;object-fit:cover}
.su-pick{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-12);min-width:0}
.su-avs{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 8);margin:0;padding:0;list-style:none}
.su-av{display:block;width:calc(var(--u) * 40);height:calc(var(--u) * 40);border-radius:50%;cursor:pointer;position:relative}
.su-av input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.su-av img{width:100%;height:100%;border-radius:50%;display:block;outline:2px solid transparent;outline-offset:2px}
.su-av input:checked + img{outline-color:var(--accent)}
.su-av input:focus-visible + img{outline-color:var(--text)}
.su-seg{align-self:flex-start}
.su-agree{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.su-agree ul{margin:0;padding:calc(var(--u) * 4) calc(var(--u) * 16) calc(var(--u) * 8);list-style:none}
.su-agree li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);min-height:calc(var(--u) * 40)}
.su-chk{display:flex;align-items:center;gap:calc(var(--u) * 10);font-size:calc(var(--u) * 14);cursor:pointer}
.su-chk input{appearance:none;-webkit-appearance:none;width:calc(var(--u) * 18);height:calc(var(--u) * 18);margin:0;flex:none;border:1.5px solid var(--line-strong);border-radius:calc(var(--u) * 4);background:var(--surface-2);cursor:pointer}
.su-chk input:checked{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2 6.6 11.2 12.5 4.8' fill='none' stroke='%2308111e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;border-color:var(--accent)}
.su-chk input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.su-all{min-height:calc(var(--u) * 52);padding:0 calc(var(--u) * 16);border-bottom:1px solid var(--line);font-weight:600;font-size:calc(var(--u) * 15)}
.su-req{color:var(--accent);font-size:calc(var(--u) * 13)} .su-opt{color:var(--faint);font-size:calc(var(--u) * 13)}
.wd-back,.wd-pn-a,.wd-links a{text-decoration:none}
.wd-strip{padding:calc(var(--u) * 4);margin:calc(var(--u) * 8) calc(var(--u) * -4) 0}
.wd-roles{margin-top:var(--space-16)}

/* ── Lab 프로젝트 안: 왼쪽 목록(문서·파일) · 오른쪽 본문. 메인과 문서가 같은 틀 ── */
.ld-head{margin-top:var(--space-24)}
.ld-head .lab-path{margin-bottom:calc(var(--u) * 8)}
.ld-desc{margin:calc(var(--u) * 12) 0 0;max-width:calc(var(--u) * 720);font-size:calc(var(--u) * 15);line-height:1.7;color:var(--dim)}
.ld-head .th-tags{margin-top:var(--space-16)}
.ld-bar{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u) * 8);margin-top:var(--space-16);padding-top:var(--space-16);border-top:1px solid var(--line)}
.ld-bar .th-btn svg{width:calc(var(--u) * 14);height:calc(var(--u) * 14);margin-left:calc(var(--u) * 4)}
.ld-bar .th-btn svg:first-child:not(:last-child){margin:0 calc(var(--u) * 4) 0 0}
.ld-meta{margin:0;padding:0;border:0}
.ld{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24);margin-top:var(--space-32);align-items:start}
@media (min-width:1024px){ .ld{grid-template-columns:calc(var(--u) * 240) minmax(0,1fr);gap:var(--space-48)} .ld-nav{position:sticky;top:calc(var(--th-nav) + var(--space-24))} }
.ld-nav-h{margin:0 0 calc(var(--u) * 4);padding:0 calc(var(--u) * 10);font-size:calc(var(--u) * 12);font-weight:600;color:var(--faint)}
.ld-nav ul{margin:0 0 var(--space-16);padding:0;list-style:none}
.ld-nav a{display:flex;align-items:center;gap:calc(var(--u) * 8);min-height:calc(var(--u) * 36);padding:0 calc(var(--u) * 10);border-radius:var(--radius-control);color:var(--dim);font-size:calc(var(--u) * 14);text-decoration:none}
.ld-nav a:hover{background:var(--surface);color:var(--text)}
.ld-nav svg{flex:none;width:calc(var(--u) * 16);height:calc(var(--u) * 16)}
.ld-nav .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-size{font-size:calc(var(--u) * 12);color:var(--faint);font-variant-numeric:tabular-nums}
@media (max-width:1023px){ .ld-nav{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 4) var(--space-16);padding-bottom:var(--space-16);border-bottom:1px solid var(--line)} .ld-nav-h{display:none} .ld-nav ul{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 4);margin:0} }
.ld-body{min-width:0;max-width:calc(var(--u) * 820)}
.ld-doc-t{margin:0!important;font-size:calc(var(--u) * 22)!important}
.ld-doc-m{margin:calc(var(--u) * 6) 0 var(--space-24)!important;font-size:calc(var(--u) * 13)!important;color:var(--faint)!important}
/* 문서 본문 */
.th-prose{font-size:calc(var(--u) * 15);line-height:1.75;color:var(--text);overflow-wrap:anywhere}
.th-prose > :first-child{margin-top:0}
.th-prose p,.th-prose ul,.th-prose ol,.th-prose table,.th-prose pre{margin:0 0 calc(var(--u) * 16)}
.th-prose h2{margin:var(--space-32) 0 calc(var(--u) * 12);font-size:calc(var(--u) * 19);font-weight:700;letter-spacing:-.02em;line-height:1.4}
.th-prose ul,.th-prose ol{padding-left:calc(var(--u) * 20)}
.th-prose li + li{margin-top:calc(var(--u) * 6)}
.th-prose a{color:var(--accent);text-decoration:none}
.th-prose a:hover{text-decoration:underline}
.th-prose strong{font-weight:600}
.th-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;padding:.1em .35em;border-radius:calc(var(--u) * 4);background:var(--surface-2)}
.th-prose pre{padding:calc(var(--u) * 14) calc(var(--u) * 16);border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface);overflow-x:auto;line-height:1.6}
.th-prose pre code{padding:0;background:none;font-size:calc(var(--u) * 13)}
.th-prose table{width:100%;border-collapse:collapse;font-size:calc(var(--u) * 14);display:block;overflow-x:auto}
.th-prose th,.th-prose td{padding:calc(var(--u) * 8) calc(var(--u) * 12);border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.th-prose th{font-weight:600;color:var(--dim);font-size:calc(var(--u) * 13)}
.th-hist-n{font-size:calc(var(--u) * 13);font-variant-numeric:tabular-nums}
/* 좋아요: 다른 작은 버튼과 같은 높이·모양, 하트 크기 고정 */
.wd-like{height:calc(var(--u) * 36);padding:0 var(--space-12);border-radius:var(--radius-control);font-weight:600}
.wd-like svg{flex:none;width:calc(var(--u) * 16);height:calc(var(--u) * 16)}
.wd-stats .wd-like{height:calc(var(--u) * 32)}
/* 사이트 차트: 원자료 CSV 를 Th. 토큰으로 그림 */
.th-chart{margin:0 0 var(--space-24);padding:calc(var(--u) * 16);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.th-chart figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(var(--u) * 8) var(--space-16);margin-bottom:calc(var(--u) * 12);font-size:calc(var(--u) * 14)}
.th-chart-lg{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 12);margin:0!important;padding:0!important;list-style:none;font-size:calc(var(--u) * 13);color:var(--dim)}
.th-chart-lg li{display:flex;align-items:center;gap:calc(var(--u) * 6);margin:0!important}
.th-chart-lg i{width:calc(var(--u) * 12);height:calc(var(--u) * 3);border-radius:2px}
.th-chart svg{display:block;width:100%;height:auto;overflow:visible}
.th-chart .g line{stroke:var(--line);stroke-width:1}
.th-chart text{fill:var(--faint);font-size:11px;font-variant-numeric:tabular-nums}
.th-chart .ln polyline{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.th-chart-src{margin:calc(var(--u) * 8) 0 0!important;font-size:calc(var(--u) * 12);color:var(--faint)}
.th-notify{gap:0}
.th-notify .th-switch-row:first-child{border-top:0;padding-top:0}
.th-notify .th-switch-row{padding-bottom:calc(var(--u) * 12)}
.th-sw-tx{display:flex;flex-direction:column;gap:calc(var(--u) * 2)}
.th-sw-tx b{font-weight:600}
.su-sub{flex-wrap:wrap}
.su-subs{display:flex;gap:calc(var(--u) * 16)}
@keyframes th-skel{from{background-position:200% 0}to{background-position:-200% 0}}

/* 고른 조건: 줄마다 묶고 줄 이름을 앞에, 묶음 사이는 세로선 */
.th-picked-list{gap:calc(var(--u) * 8) calc(var(--u) * 16)}
.th-picked-g{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u) * 6)}
.th-picked-g + .th-picked-g{padding-left:calc(var(--u) * 16);border-left:1px solid var(--line-strong)}
.th-picked-l{font-size:calc(var(--u) * 12);font-weight:600;color:var(--faint);margin-right:calc(var(--u) * 2)}

/* 서비스 전환: 넓은 판 두 열(주요 · 미니). 좁은 화면은 한 열로 */
.th-pop--mega{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:0;min-width:calc(var(--u) * 560);padding:var(--space-8)}
.th-pop--mega[hidden]{display:none}
.th-pop-col{padding:var(--space-4)}
.th-pop-col ul{margin:0;padding:0;list-style:none}
.th-pop-col--mini{border-left:1px solid var(--line);padding-left:var(--space-12)}
.th-pop--mega .th-pop-h{margin:0;padding:var(--space-8) var(--space-12) var(--space-8);border:0;font-size:calc(var(--u) * 12);font-weight:600;color:var(--faint)}
.th-mm{height:auto!important;padding:calc(var(--u) * 10) var(--space-12)!important;justify-content:flex-start!important;gap:var(--space-12)!important}
.th-mm-ic{flex:none;width:calc(var(--u) * 36);height:calc(var(--u) * 36);display:grid;place-items:center;border-radius:calc(var(--u) * 10);background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.th-mm-ic svg{width:calc(var(--u) * 20);height:calc(var(--u) * 20)}
.th-mm-tx{flex:1;display:flex;flex-direction:column;gap:calc(var(--u) * 2);min-width:0}
.th-mm-tx b{font-size:calc(var(--u) * 15);font-weight:600;color:var(--text)}
.th-mm-d{font-size:calc(var(--u) * 12);color:var(--dim);font-weight:400}
.th-mm[aria-current] b{color:var(--accent)}
.th-mn{justify-content:space-between!important}
.th-mn > span:first-child{font-size:calc(var(--u) * 15)}
.th-mn--soon{display:flex;justify-content:space-between;align-items:center;gap:var(--space-16);height:calc(var(--u) * 40);padding:0 var(--space-12);color:var(--faint)}
.th-mn--soon .cur,.th-mn .th-mm-d{font-size:calc(var(--u) * 12)}
@media (max-width:640px){ .th-pop--mega{grid-template-columns:1fr;min-width:0;width:calc(100vw - 2 * var(--pad))} .th-pop-col--mini{border-left:0;border-top:1px solid var(--line);padding-left:var(--space-4);margin-top:var(--space-4)} }
/* 상단바 이름: "Th." 는 홈으로, 서비스 이름은 그 서비스 첫 화면으로 */
.th-logo a{color:inherit;text-decoration:none}
.th-logo .th-logo-th:hover,.th-logo .th-svc:hover{color:var(--text)}
.th-logo .th-logo-th:hover i{color:var(--accent)}
.th-mm--sm .th-mm-ic{width:calc(var(--u) * 32);height:calc(var(--u) * 32)}
/* 서비스 메뉴: 이름·설명은 한 줄, 지금 서비스는 이름 색으로만 표시합니다 */
.th-pop--mega .th-mm-tx b,.th-pop--mega .th-mm-d{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-pop--mega .th-mm .cur{display:none}

/* ══ Th. User: 쓰는 화면(관리 화면)의 부품 ════════════════════════════
 * 보는 화면(Home · Work · Lab · Blog)은 위 규칙 그대로입니다. 링크 만들기 · 사이트 설정처럼 사용자가 무언가를 만들고 고치는
 * 화면만 .th-page--wide(본문 열 640) 위에 아래 .th-u-* 를 더 씁니다. 값은 모두 위 토큰이고, 동작은 /shared/th-user.js 입니다. */
.th-u-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[data-u-tab][hidden]{display:none!important}

/* 제목 줄: h1 과 오른쪽 단추 하나(목록 화면의 + 추가 단추 자리). 좁으면 단추가 아래로 내려갑니다 */
.th-u-titlerow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-12) var(--space-16);width:100%}
.th-u-titlerow .th-btn svg{width:calc(var(--u) * 18);height:calc(var(--u) * 18)}

/* 상자: 머리(제목 · 한 줄 설명) / 몸(칸) / 바닥(단추 줄, 오른쪽 정렬). 상자끼리는 .th-u-stack 으로 16 띄웁니다 */
.th-u-stack{display:flex;flex-direction:column;gap:var(--space-16)}
.th-u-panel{--pp:var(--space-24);display:block;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.th-u-panel[hidden]{display:none}
@container th (max-width:520px){ .th-u-panel{--pp:var(--space-16)} }
.th-u-panel-form{display:contents}
.th-u-panel-head{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--pp);border-bottom:1px solid var(--line)}
.th-u-panel-title{margin:0;font-size:calc(var(--u) * 16);font-weight:700;line-height:1.4;letter-spacing:-.01em;word-break:keep-all}
.th-u-panel-title:focus{outline:0}
.th-u-panel-desc{margin:0;font-size:calc(var(--u) * 13);line-height:1.6;color:var(--dim);overflow-wrap:anywhere}
.th-u-panel-body{display:flex;flex-direction:column;gap:var(--space-16);padding:var(--pp)}
.th-u-panel-body > .th-form,.th-u-panel-body > .th-list{max-width:none}
.th-u-panel-body .th-list,.th-u-panel-body .th-input,.th-u-panel-body .th-field textarea{background:var(--bg)}
.th-u-panel-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-8);padding:var(--space-16) var(--pp);border-top:1px solid var(--line)}
.th-u-panel-head + .th-u-panel-foot{border-top:0}
.th-u-panel--danger{border-color:rgb(255 107 107 / .35)}
.th-u-panel--danger .th-u-panel-title{color:#ffb4b4}
.th-u-panel--danger .th-u-panel-foot{border-top-color:rgb(255 107 107 / .35)}
.th-btn.th-u-danger{background:#ff6b6b;color:var(--accent-ink)}

/* 앞에 고정 글자가 붙는 입력칸(예: 짧은 주소 앞부분 + 이름) */
.th-u-affix{display:flex;align-items:center;min-height:calc(var(--u) * 48);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-control);overflow:hidden;cursor:text}
.th-u-affix:focus-within{outline:calc(var(--u) * 2) solid var(--accent);outline-offset:-1px;border-color:transparent}
.th-u-affix:has([aria-invalid="true"]){border-color:#ff6b6b}
.th-u-affix-pre{flex:none;padding-left:calc(var(--u) * 16);white-space:nowrap;
  color:var(--dim);font-size:max(16px, calc(var(--u) * 16));line-height:1.6}
.th-u-affix input{flex:1 0 calc(var(--u) * 96);min-width:0;height:calc(var(--u) * 46);padding:0 calc(var(--u) * 16) 0 0;border:0;background:none;color:var(--text);
  font:inherit;font-size:max(16px, calc(var(--u) * 16));line-height:1.6;outline:0}

/* 복사 줄: 값 + 복사 단추. 단추는 [data-copy] 이고, 복사한 뒤 잠깐 data-copied 가 붙습니다 */
.th-u-copy{display:flex;align-items:center;gap:var(--space-8);min-height:calc(var(--u) * 52);padding:var(--space-4) var(--space-4) var(--space-4) var(--space-16);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-control)}
.th-u-copy-val{flex:1;min-width:0;font-size:calc(var(--u) * 15);font-weight:600;line-height:1.5;overflow-wrap:anywhere;user-select:all}
.th-u-copy .th-btn{flex:none}
.th-btn[data-copied]{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}

/* 목록 줄: 모든 줄이 같은 모양 · 같은 단추입니다. 넓으면 단추가 오른쪽, 좁으면 아래 한 줄에 같은 너비로 놓입니다 */
.th-u-list{container-type:inline-size}
.th-u-list > li.th-u-row{flex-wrap:wrap;gap:var(--space-8) var(--space-16);padding:var(--space-12) var(--space-16)}
.th-u-row-main{display:flex;flex-direction:column;gap:calc(var(--u) * 2);flex:1 1 calc(var(--u) * 240);min-width:0}
.th-u-row-title{font-size:calc(var(--u) * 15);font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.th-u-row-sub{font-size:calc(var(--u) * 13);line-height:1.5;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-u-row-meta{font-size:calc(var(--u) * 12);line-height:1.5;color:var(--dim);font-variant-numeric:tabular-nums}
.th-u-row-act{display:flex;flex:none;gap:var(--space-4)}
@container (max-width:559px){
  .th-u-row-act{flex:1 1 100%}
  .th-u-row-act > .th-btn{flex:1 1 0;min-width:0;padding:0 var(--space-4)}
}

/* 빈 화면 · 불러오기 실패: 한 줄 안내 + 다음 행동 단추 하나 */
.th-u-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-16);margin:0;padding:var(--space-48) var(--space-16);text-align:center;
  border:1px dashed var(--line-strong);border-radius:var(--radius);color:var(--dim);font-size:calc(var(--u) * 15);line-height:1.6;word-break:keep-all}
.th-u-empty[hidden]{display:none}
.th-u-empty p{margin:0}

/* 쪽 넘김 */
.th-u-pager{display:flex;align-items:center;justify-content:center;gap:var(--space-8);margin-top:var(--space-24)}
.th-u-pager[hidden]{display:none}
.th-u-pager button{width:var(--tap);height:var(--tap);display:grid;place-items:center;padding:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-control);color:var(--text);cursor:pointer}
.th-u-pager button:disabled{opacity:.4;cursor:default}
.th-u-pager svg{width:calc(var(--u) * 16);height:calc(var(--u) * 16)}
.th-u-pager-pos{min-width:calc(var(--u) * 64);text-align:center;font-size:calc(var(--u) * 14);color:var(--dim);font-variant-numeric:tabular-nums}

/* 단계 표시: 셋 이상인 흐름에서만. 지금 단계는 aria-current="step", 끝난 단계는 data-done */
.th-u-steps{display:flex;gap:var(--space-8);margin:0;padding:0;list-style:none;counter-reset:th-u-step;font-size:calc(var(--u) * 13);line-height:1.4}
.th-u-steps li{display:flex;align-items:center;gap:var(--space-8);flex:1 1 0;min-width:0;color:var(--dim);counter-increment:th-u-step}
.th-u-steps li::before{content:counter(th-u-step);flex:none;width:calc(var(--u) * 24);height:calc(var(--u) * 24);display:grid;place-items:center;
  border:1px solid var(--line-strong);border-radius:50%;font-size:calc(var(--u) * 12);font-weight:700;font-variant-numeric:tabular-nums}
.th-u-steps li:not(:last-child)::after{content:"";flex:1 1 calc(var(--u) * 12);min-width:calc(var(--u) * 12);height:1px;background:var(--line-strong)}
.th-u-steps span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-u-steps li[aria-current="step"]{color:var(--text);font-weight:600}
.th-u-steps li[aria-current="step"]::before{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.th-u-steps li[data-done]::before{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent)}
@container th (max-width:520px){ .th-u-steps li:not([aria-current="step"]) span{display:none} }

/* 저장 막대: 고친 값이 있는 동안만 화면 아래, 본문 열 폭으로 뜹니다. 셸이 레이아웃 격리라 body 에 붙여 그립니다 */
.th-u-savebar{position:fixed;left:50%;bottom:max(16px, env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);
  width:min(calc(var(--u) * 640), calc(100% - 32px));transform:translateX(-50%);padding:var(--space-12) var(--space-16);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow-lift);animation:th-u-in .18s ease-out}
.th-u-savebar[hidden]{display:none}
.th-u-savebar-msg{min-width:0;margin:0;font-size:calc(var(--u) * 14);line-height:1.4}
.th-u-savebar-act{display:flex;flex:none;gap:var(--space-8)}
html[data-u-dirty] .th-main{padding-bottom:calc(var(--space-48) + var(--u) * 88)}
@keyframes th-u-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* 대화 상자(확인 창 포함): <dialog class="th-u-dialog"> 안에 상자 하나. 맨 위 계층이라 셸 밖 화면 폭 기준입니다 */
.th-u-dialog{width:min(calc(var(--u) * 480), calc(100% - 32px));max-width:none;max-height:calc(100% - 32px);margin:auto;padding:0;border:0;background:transparent;color:var(--text);overflow:visible}
.th-u-dialog::backdrop{background:rgb(0 0 0 / .6)}
.th-u-dialog > .th-u-panel{max-height:calc(100dvh - 32px);overflow:auto;box-shadow:var(--shadow-lift)}
.th-u-dialog .th-label{font-size:calc(var(--u) * 14)}
.th-u-dialog .th-input{min-height:calc(var(--u) * 48);font-size:max(16px, calc(var(--u) * 16))}
.th-toast{width:max-content;max-width:calc(100vw - 32px);text-align:center}

@media (max-width:520px){
  .th-u-dialog .th-u-panel{--pp:var(--space-16)}
  .th-u-dialog .th-u-panel-foot{flex-direction:column-reverse}
  .th-u-dialog .th-u-panel-foot .th-btn{width:100%}
  .th-u-savebar{gap:var(--space-8);width:calc(100% - 24px);padding:var(--space-8) var(--space-8) var(--space-8) var(--space-12)}
  .th-u-savebar-msg{font-size:12px}
  .th-u-savebar-act{gap:var(--space-4)}
  .th-u-savebar .th-btn{padding:0 10px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){ .th-u-savebar{animation:none} }