/* 화면 스타일. 기준: design/prototype.html. 색과 폰트는 tokens.css 변수만 쓴다. */
html { background: var(--bg); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
:focus-visible { border-radius: 4px; }
img { max-width: 100%; }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.inner { max-width: 1320px; margin: 0 auto; padding-inline: clamp(0px, 3vw, 32px); }
.label { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.dim { color: var(--dim); }
.pre { white-space: pre-line; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 이미지 없을 때 빈 자리: 작가 색으로 옅게 */
.ph { display: block; width: 100%; height: 100%; background-color: var(--surface); }
.ph-0 { background-image: radial-gradient(60% 70% at 30% 35%, color-mix(in srgb, var(--cc, var(--c, var(--accent))) 38%, transparent), transparent), radial-gradient(50% 60% at 75% 75%, color-mix(in srgb, var(--cc, var(--c, var(--accent))) 18%, transparent), transparent); }
.ph-1 { background-image: radial-gradient(55% 65% at 70% 30%, color-mix(in srgb, var(--cc, var(--c, var(--accent))) 34%, transparent), transparent), radial-gradient(60% 50% at 25% 80%, color-mix(in srgb, var(--cc, var(--c, var(--accent))) 16%, transparent), transparent); }
.ph-2 { background-image: radial-gradient(70% 55% at 50% 60%, color-mix(in srgb, var(--cc, var(--c, var(--accent))) 30%, transparent), transparent), radial-gradient(35% 45% at 20% 20%, color-mix(in srgb, var(--cc, var(--c, var(--accent))) 22%, transparent), transparent); }
.ph-3 { background-image: radial-gradient(45% 70% at 25% 50%, color-mix(in srgb, var(--cc, var(--c, var(--accent))) 32%, transparent), transparent), radial-gradient(55% 55% at 80% 40%, color-mix(in srgb, var(--cc, var(--c, var(--accent))) 20%, transparent), transparent); }

/* 헤더 */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top .inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.logo { padding: 8px 0; font-weight: 700; font-size: 17px; letter-spacing: .06em; }
.nav { display: flex; gap: 4px; }
.nav a { padding: 10px 14px; border-radius: var(--pill); color: var(--dim); font-size: 16px; transition: color .2s, background-color .2s; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); background: var(--surface); }
.nav .nav-login { border: 1px solid var(--line); margin-left: 6px; }

/* 메인 */
.live { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--dim); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-pill { --c: var(--accent); display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 16px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); color: var(--fg); transition: border-color .2s; }
.cat-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cc, var(--c)); flex: none; }
.cat-pill .nm { font-size: 16px; font-weight: 600; }
.cat-pill .n { font-size: 14px; color: var(--faint); font-variant-numeric: tabular-nums; }
.cat-pill:hover, .cat-pill:focus-visible { border-color: var(--cc, var(--c)); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.section-head h2 { font-weight: 600; font-size: 18.5px; }
.block { padding-block: 72px 0; }
.credits { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 15px; color: var(--dim); }
.credits span b { font-weight: 500; color: var(--fg); }

/* 메인 월페이퍼 (SPEC 4-1): 작업물이 아니라 브랜드 그림 한 장. 바탕에 녹는 어두운 빛 세 덩이가 아주 느리게 흐르고,
   필기체 워드마크 위로 은은한 빛이 지나감. 화면 밖이면 멈춤(.still), 움직임 줄이기 설정이면 정지 */
.wall { position: relative; display: grid; place-items: center; align-content: center; gap: 6px; border-radius: 18px; overflow: hidden; isolation: isolate; aspect-ratio: 21 / 9; border: 1px solid var(--line); background: var(--surface); text-align: center; }
.wall::before { content: ""; position: absolute; inset: -25%; z-index: -1;
  background:
    radial-gradient(32% 42% at 22% 30%, color-mix(in srgb, var(--wall-1) 26%, transparent), transparent 70%),
    radial-gradient(30% 40% at 78% 72%, color-mix(in srgb, var(--wall-3) 22%, transparent), transparent 70%),
    radial-gradient(24% 34% at 55% 45%, color-mix(in srgb, var(--wall-2) 14%, transparent), transparent 72%);
  animation: wall-drift 46s ease-in-out infinite alternate; }
.wall-mark { font-family: var(--font-script); font-style: italic; font-weight: 400; font-size: clamp(52px, 10vw, 132px); line-height: 1.1; letter-spacing: -.01em; padding: 0 .25em .08em;
  color: transparent; background: linear-gradient(100deg, var(--wall-ink-dim) 40%, var(--wall-ink) 50%, var(--wall-ink-dim) 60%) 0 0 / 300% 100%; /* 다크 흰색 · 라이트 검정, 위로 은은한 빛 */
  -webkit-background-clip: text; background-clip: text;
  animation: wall-in 2.2s cubic-bezier(.4, 0, .2, 1) both, wall-sheen 11s ease-in-out 2.6s infinite, wall-float 9s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%); mask-image: linear-gradient(90deg, #000 45%, transparent 55%); -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-position: 0 0; mask-position: 0 0; }
.wall-sub { font-size: clamp(12px, 1.2vw, 14px); letter-spacing: .32em; white-space: nowrap; text-transform: uppercase; color: var(--faint); animation: wall-sub 1.5s 1.7s cubic-bezier(.2, .7, .2, 1) both; }
/* 들어올 때 한 번: 로고가 왼쪽부터 쓰듯 드러남 → 아래 가는 선이 그어짐 → 작은 글이 넓은 자간에서 모임.
   그 뒤 계속: 빛이 지나감(sheen) · 살짝 떠 있음 · 뒤에서 숨 쉬는 빛(마우스를 올리면 천천히 따라옴, public/site.js가 --wx · --wy) */
/* 선은 작은 글과 따로: 자간이 모이는 동안 같이 흔들리지 않게 */
.wall-line { width: 64px; height: 1px; margin-bottom: 10px; background: var(--wall-ink-dim); animation: wall-line 1s 1.5s cubic-bezier(.6, 0, .2, 1) both; }
@property --wx { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --wy { syntax: "<percentage>"; inherits: false; initial-value: 45%; }
.wall::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(38% 60% at var(--wx) var(--wy), color-mix(in srgb, var(--wall-2) 20%, transparent), transparent 70%); transition: --wx 1.2s cubic-bezier(.2, .7, .2, 1), --wy 1.2s cubic-bezier(.2, .7, .2, 1); animation: wall-breathe 7s ease-in-out infinite alternate; }
@keyframes wall-in { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: blur(8px); translate: 0 8px; } }
@keyframes wall-sub { from { opacity: 0; letter-spacing: 1em; } }
@keyframes wall-line { from { width: 0; } }
@keyframes wall-breathe { from { opacity: .45; } to { opacity: 1; } }
@keyframes wall-drift { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(6%, -4%) rotate(8deg); } 100% { transform: translate(-5%, 3%) rotate(-6deg); } }
@keyframes wall-sheen { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0 0; } }
@keyframes wall-float { from { transform: translateY(3px); } to { transform: translateY(-3px); } }
.wall.still::before, .wall.still::after, .wall.still .wall-mark { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .wall::before, .wall::after, .wall-mark, .wall-sub, .wall-line { animation: none; } .wall-mark { background-position: 50% 0; } }
@media (max-width: 560px) { .wall { aspect-ratio: 4 / 3; } .wall-sub { letter-spacing: .16em; } }
/* 다 나타난 뒤 계속 (Jiho 11/3, 과하지 않게): 가는 선 위로 빛 한 점이 가끔 지나가고, 작은 글이 아주 느리게 숨 쉼.
   스크롤로 지나갈 땐 월페이퍼가 살짝 작아지며 멀어짐 (되는 브라우저만) */
.wall-line { position: relative; overflow: hidden; }
.wall-line::after { content: ""; position: absolute; inset: 0; width: 45%; background: linear-gradient(90deg, transparent, var(--wall-ink), transparent); translate: -110% 0; animation: wall-glint 7s 3.2s ease-in-out infinite; }
.wall-sub { animation: wall-sub 1.5s 1.7s cubic-bezier(.2, .7, .2, 1) both, wall-hush 6s 3.4s ease-in-out infinite alternate; }
@keyframes wall-glint { 0% { translate: -110% 0; } 35%, 100% { translate: 230% 0; } }
@keyframes wall-hush { to { opacity: .55; } }
.wall.still .wall-line::after, .wall.still .wall-sub { animation-play-state: paused; }
@supports (animation-timeline: view()) {
  .wall { animation: wall-away linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
  @keyframes wall-away { to { scale: .96; opacity: .35; } }
}
/* 메인에서 내려갈 때: 섹션이 아래에서 천천히 떠오르고, 제목 아래 짧은 선이 그어지고, 카드 · 단계는 차례로 (public/site.js가 .rv → .in) */
.rv { opacity: 0; translate: 0 28px; transition: opacity 1s cubic-bezier(.2, .7, .2, 1), translate 1s cubic-bezier(.2, .7, .2, 1); }
.rv.in { opacity: 1; translate: 0 0; }
.rv[data-from="top"]:not(.in) { translate: 0 -28px; }
.rv[data-from="top"]:not(.in) :is(.step, .sc-card) { translate: 0 -18px; }
.rv .section-head h2 { padding-bottom: 6px; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat; transition: background-size 1.1s .35s cubic-bezier(.6, 0, .2, 1); }
.rv.in .section-head h2 { background-size: 28px 1px; }
.rv :is(.step, .sc-card) { opacity: 0; translate: 0 18px; transition: opacity .8s cubic-bezier(.2, .7, .2, 1), translate .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.2s + var(--d, 0) * 110ms); }
.rv.in :is(.step, .sc-card) { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .wall-line::after, .wall-sub, .wall { animation: none; } .rv, .rv :is(.step, .sc-card) { opacity: 1; translate: none; transition: none; } }

/* Recent work 안내판 */
.board { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: stretch; }
@media (max-width: 760px) { .board { grid-template-columns: 1fr; } }
/* 왼쪽 무대: 작업물 그대로 (영상은 실제 유튜브 플레이어, 이미지는 잘리지 않게). 위에 아무것도 얹지 않음 */
.stage { position: relative; display: block; background: var(--bg); border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; align-self: start; }
.stage > img, .stage > .ph, .stage > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: contain; }
.stage > .ph, .stage > img.yt { object-fit: cover; }
.stage > iframe { opacity: 0; pointer-events: none; transition: opacity .35s ease; } /* 실제로 재생되기 시작하면 썸네일 위로 살며시 */
.stage > iframe.on { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .stage > iframe { transition: none; } }
.panel { display: flex; flex-direction: column; min-width: 0; }
.flap { display: flex; flex-direction: column; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.flap .k { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.flap .t { color: var(--fg); font-size: clamp(18px, 2.2vw, 24px); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; min-height: 2.6em; word-break: keep-all; }
.flap .c { font-size: 15px; color: var(--dim); min-height: 1.7em; white-space: pre; }
.prog { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.prog i { display: block; height: 100%; width: 100%; background: var(--fg); transform-origin: left; transform: scaleX(0); }
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rows li button { width: 100%; display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--faint); font-size: 15px; transition: color .2s; }
.rows li button:hover { color: var(--dim); }
.rows li button[aria-current="true"] { color: var(--fg); }
.rows .no { font-variant-numeric: tabular-nums; }
.rows .ti { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .ca { font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cc, var(--c)); opacity: .5; }
.rows li button[aria-current="true"] .ca { opacity: 1; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.step { background: var(--bg); padding: 28px; display: flex; flex-direction: column; gap: 28px; }
.step .label { color: var(--accent); }
.step h3 { font-size: 20.5px; font-weight: 600; }
.step p { margin: 4px 0 0; color: var(--dim); font-size: 16px; }

/* 분야 페이지 */
.page-head { padding-block: 48px 24px; display: flex; flex-direction: column; gap: 22px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.crumbs a { padding: 4px 0; font-weight: 600; font-size: 16px; color: var(--faint); transition: color .2s; }
.crumbs a:hover { color: var(--fg); }
.crumbs a[aria-current="page"] { color: var(--cc, var(--c)); }
.big { font-weight: 700; line-height: 1; font-size: clamp(32px, 5vw, 48px); letter-spacing: -.02em; }
.list-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 14px; border-top: 1px solid var(--line); margin-bottom: 24px; font-size: 15px; color: var(--faint); }
.list-meta a { color: var(--dim); }
.list-meta a:hover { color: var(--fg); }
/* 분야 페이지 작가 카드 (SPEC 4-2): 가로형 · 정보 최소 (직무 · 활동명 · 접수 상태 · 시작가).
   기기별 기준 없이 비율로: 한 줄 장수는 남는 공간으로(카드 최소 320px → 보통 3장, 넓으면 4장, 좁으면 2 · 1장),
   카드 안 크기는 카드 자기 폭에 비례 (컨테이너 쿼리 cqi) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.acard { display: block; container-type: inline-size; position: relative; isolation: isolate; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); transition: border-color .25s; }
.acard:hover, .acard:focus-visible { border-color: color-mix(in srgb, var(--cc, var(--c)) 55%, var(--line)); }
.acard-in { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 7cqi, 32px); padding: clamp(20px, 9cqi, 40px) clamp(18px, 8cqi, 36px); }
.acard-glow { position: absolute; z-index: -1; left: -14%; top: -60%; width: 55%; height: 220%; opacity: .2; pointer-events: none; }
.acard-glow > img { width: 100%; height: 100%; object-fit: cover; filter: blur(40px) saturate(1.3); }
.acard-ava { display: block; width: clamp(72px, 31cqi, 140px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cc, var(--c)) 45%, var(--line)), 0 10px 24px -14px color-mix(in srgb, var(--bg) 80%, transparent); }
.acard-ava > img, .acard-ava > .ph { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.acard:hover .acard-ava > img { transform: scale(1.05); }
.acard-body { display: flex; flex-direction: column; min-width: 0; }
.acard-role { font-size: clamp(10.5px, 3.2cqi, 13px); letter-spacing: .2em; text-transform: uppercase; color: var(--cc, var(--c)); margin-bottom: .5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard-name { font-weight: 700; font-size: clamp(20px, 7.6cqi, 32px); line-height: 1.2; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; margin-top: clamp(12px, 4.4cqi, 20px); padding-top: clamp(9px, 3.4cqi, 14px); border-top: 1px solid var(--line); font-size: clamp(12.5px, 3.7cqi, 15px); }
.acard-foot .status { font-size: inherit; gap: 6px; }
.acard-price { font-variant-numeric: tabular-nums; color: var(--fg); white-space: nowrap; }
.acard-price small { font-size: .85em; color: var(--faint); margin-right: 5px; }
/* All 화면 사람 카드: 세로형 · 작게 촘촘히 */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 14px; }
@media (min-width: 720px) { .people { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; } }
.ucard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: clamp(22px, 10cqi, 34px) 14px clamp(18px, 8cqi, 26px); container-type: inline-size; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: border-color .25s; min-width: 0; }
.ucard:hover, .ucard:focus-visible { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); }
.ucard-ava { display: block; width: min(80cqi, 170px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--bg); margin-bottom: 8px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 45%, var(--line)); }
.ucard-ava > img, .ucard-ava > .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.ucard-name { font-weight: 700; font-size: clamp(18px, 10cqi, 24px); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ucard-intro { font-size: clamp(14px, 6.4cqi, 16px); color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ucard-cats { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: clamp(13px, 5.8cqi, 14.5px); }
.ucard-cats > span[style] { color: var(--c); font-weight: 600; }
.ucard-cats .status { font-size: inherit; gap: 5px; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; white-space: nowrap; }
/* Safe Pay 표시: 결제 규칙을 켠 작가만 (사이트 표시라 작가 색이 아니라 토큰 색) */
.safe-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border: 1px solid color-mix(in srgb, var(--pal-5) 50%, transparent); border-radius: var(--pill); color: var(--pal-5); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.5; white-space: nowrap; text-decoration: none; }
.safe-badge svg { width: 13px; height: 13px; flex: none; }
a.safe-badge:hover { background: color-mix(in srgb, var(--pal-5) 12%, transparent); }
.acard-st { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s-open { color: var(--accent); }
.s-busy { color: var(--busy); }
.s-closed { color: var(--faint); }
.empty { padding: 64px 0; color: var(--faint); }

/* 작가 페이지 */
.back { display: inline-block; margin-top: 24px; padding: 6px 0; color: var(--dim); font-size: 15px; }
.back:hover { color: var(--fg); }
.preview-bar { margin: 20px 0 0; padding: 12px 16px; border: 1px dashed color-mix(in srgb, var(--cc, var(--c)) 50%, var(--line)); border-radius: 12px; font-size: 15px; color: var(--dim); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.preview-bar a { color: var(--cc, var(--c)); }
.secnav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--top-h, 64px)); z-index: 15; background: var(--bg); border-bottom: 1px solid var(--line); margin-top: 16px; }
.secnav .in { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 10px; }
.secnav .in::-webkit-scrollbar { display: none; }
.secnav a { flex: none; padding: 8px 12px; border-radius: var(--pill); font-size: 15px; color: var(--faint); transition: color .2s, background-color .2s; }
.secnav a:hover { color: var(--fg); }
.secnav a[aria-current="true"] { color: var(--fg); background: var(--surface); }
.secnav .go-apply { margin-left: auto; background: var(--accent); color: var(--on-accent); font-weight: 600; padding: 8px 16px; }
.secnav .go-apply:hover { color: var(--on-accent); filter: brightness(1.1); }
.asec { padding-block: 56px 8px; scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 130px); display: flex; flex-direction: column; gap: 20px; max-width: 920px; }
.asec > .label { color: var(--cc, var(--c)); }
.asec h2.t { font-size: 23px; font-weight: 700; letter-spacing: -.01em; }
.asec > p { margin: 0; }
.me { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: center; }
.avatar { width: 120px; height: 120px; border-radius: 50%; display: block; overflow: hidden; object-fit: cover; }
@media (max-width: 520px) { .me { grid-template-columns: 1fr; } }
.role-label { color: var(--cc, var(--c)); }
.me-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.me-name h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.me p { margin: 8px 0 0; color: var(--dim); white-space: pre-line; max-width: 40em; }
.me .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.tagline { font-size: 15px; color: var(--cc, var(--c)); }
.wait { font-size: 14.5px; color: var(--dim); }
.nl { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: n; }
.nl li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 8px; padding: 13px 0; border-bottom: 1px solid var(--line); counter-increment: n; }
.nl li::before { content: counter(n, decimal-leading-zero); color: var(--faint); font-size: 14px; padding-top: 2px; font-variant-numeric: tabular-nums; }
.nl li small { display: block; color: var(--faint); font-size: 14.5px; margin-top: 2px; }
.ngroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ngroup { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.ngroup h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.ngroup ul { margin: 0; padding-left: 16px; color: var(--dim); font-size: 15px; display: flex; flex-direction: column; gap: 4px; }
.nfoot { font-size: 14.5px; color: var(--faint); margin: 0; }
/* 포트폴리오: 크게 한 줄에 3개, 한 쪽에 6개(두 줄). 넘으면 아래 ← 1 2 3 → 로 넘김 */
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; }
.pgrid .pcard .tt { font-size: 15.5px; }
@media (max-width: 760px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } }
.collabs { display: flex; flex-wrap: wrap; gap: 8px; }
.collab { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 6px; border: 1px solid var(--line); border-radius: var(--pill); font-size: 15px; }
.collab > img, .collab > .ph { width: 32px; height: 32px; border-radius: 50%; display: block; object-fit: cover; flex: none; }
.collab small { color: var(--faint); font-size: 14px; }
.collab.here { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transition: border-color .2s; }
.collab.here:hover { border-color: var(--faint); }

.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.opt { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-align: left; color: var(--fg); transition: border-color .2s; }
.opt:not(:disabled):hover { border-color: var(--cc, var(--c)); }
.opt:disabled { opacity: .55; }
.opt b { font-size: 17px; }
.opt .pr { font-size: 18.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.opt p { margin: 0; font-size: 14.5px; color: var(--dim); white-space: pre-line; }
.opt .pick { margin-top: auto; font-size: 14px; color: var(--cc, var(--c)); }
.cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.cmp th, .cmp td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: center; font-variant-numeric: tabular-nums; }
.cmp th:first-child { text-align: left; color: var(--dim); font-weight: 400; }
.cmp thead th { font-weight: 600; color: var(--fg); }
.cmp tr:last-child td, .cmp tr:last-child th { border-bottom: 0; }
.addons { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 24px; border-top: 1px solid var(--line); }
.addons div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.addons span:last-child { font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap; }
.apply-box { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(18px, 3vw, 28px); background: var(--surface); }
.closed-box { border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: 28px; color: var(--dim); }
.slots-line { margin: 0 0 16px; font-size: 15px; color: var(--dim); }
.slots-line b { color: var(--fg); font-variant-numeric: tabular-nums; }
/* 기간 예약 자리판: 기간마다 확정 ● · 빈자리 ○ · 대기 수 */
.done-hint { margin: 10px 0 0; font-size: 13.5px; }
.applied-bar { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 14.5px; color: var(--dim); }
.seatmap { margin: 0 0 18px; }
.bk-acts { display: inline-flex; gap: 6px; }
.bk-form { display: inline; margin: 0; }
.seatmap ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 8px; }
.seatmap li { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.seatmap li b { font-size: 14.5px; }
.seatmap li small { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.seatmap li.full { opacity: .55; }
.seats { display: flex; flex-wrap: wrap; gap: 4px; }
.seats i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--cc, var(--accent)) 60%, var(--line)); }
.seats i.on { background: var(--cc, var(--accent)); border-color: transparent; }
/* 예약 확인 (/r/번호) */
.bk-dl { display: grid; gap: 8px; margin: 18px 0; }
.bk-dl > div { display: flex; gap: 14px; }
.bk-dl dt { width: 80px; color: var(--dim); flex: none; }
.bk-dl dd { margin: 0; }
.bk-st { display: inline-block; padding: 1px 10px; border-radius: var(--pill); border: 1px solid var(--line); font-weight: 600; }
.bk-ok { color: var(--pal-5); border-color: color-mix(in srgb, var(--pal-5) 50%, transparent); }
.bk-wait { color: var(--busy); }
.bk-no { color: var(--faint); }
.slot-ed { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--dim); }
.slot-ed input { width: 5ch; text-align: center; }
.bslots { display: grid; gap: 6px; margin-bottom: 8px; }
.bslot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; color: var(--dim); }
.bslot input[type="date"] { width: auto; }
.bslot-cap { display: inline-flex; align-items: center; gap: 4px; }
.bslot-cap input { width: 5ch; text-align: center; }

/* 포트폴리오 카드 */
/* 작업 카드 (SPEC 4-4): 4:3 틀, 뒤에 같은 그림을 흐리게, 앞에 작업물을 매체 모양대로. 제목은 아래에 겹쳐 마우스를 올리면 보임 */
.pcard { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: var(--fg); }
.pcard .thumb { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); border: 1px solid var(--line); transition: border-color .2s; }
.pcard:hover .thumb, .pcard:focus-visible .thumb { border-color: color-mix(in srgb, var(--fg) 35%, var(--line)); }
.pcard .thumb > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) brightness(.6) saturate(1.1); transform: scale(1.2); }
.pcard .fg { position: absolute; display: block; overflow: hidden; }
.pcard .fg > img, .pcard .fg > .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard .fg.wide { left: 0; right: 0; top: 50%; translate: 0 -50%; aspect-ratio: 16 / 9; } /* 영상: 16:9 그대로 가운데 */
.pcard .fg.sq { top: 11%; bottom: 11%; left: 50%; translate: -50% 0; aspect-ratio: 1; border-radius: 6px; box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--bg) 70%, transparent); } /* 음원 · 앨범: 정사각 커버 */
.pcard .fg.contain, .pcard .fg.none { inset: 0; }
.pcard .fg.contain > img { object-fit: contain; } /* 그림: 잘리지 않게 */
.pcard .tt { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 44px 14px 12px; background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 82%, transparent) 50%, color-mix(in srgb, var(--bg) 94%, transparent)); opacity: 0; transition: opacity .25s; }
.pcard:hover .tt, .pcard:focus-visible .tt { opacity: 1; }
@media (hover: none) { .pcard .tt { opacity: 1; } }
.pcard .tt .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* "아티스트 - 곡"이 한 줄 */
.pcard .tt .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ico { position: absolute; top: 8px; right: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: var(--pill); background: color-mix(in srgb, var(--bg) 60%, transparent); color: var(--fg); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ico svg { width: 12px; height: 12px; display: block; }
.tier { position: absolute; left: 8px; top: 8px; z-index: 1; height: 22px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: var(--pill); background: var(--cc, var(--c)); color: var(--on-accent); font-size: 13.5px; font-weight: 600; }
.roles { display: inline-flex; flex-wrap: wrap; gap: 4px; flex: none; }
.role { font-size: 12.5px; letter-spacing: .06em; padding: 2px 7px; border-radius: var(--pill); border: 1px solid color-mix(in srgb, var(--cc, var(--c)) 45%, var(--line)); color: var(--cc, var(--c)); }
.prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.prod { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-align: left; color: var(--fg); transition: border-color .2s; }
.prod:hover { border-color: var(--cc, var(--c)); }
.prod > img, .prod > .ph { width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; display: block; object-fit: cover; }
.prod .row2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 4px 4px; font-size: 15px; }
.sale { font-size: 13.5px; padding: 2px 8px; border-radius: var(--pill); background: var(--cc, var(--c)); color: var(--on-accent); font-weight: 600; flex: none; white-space: nowrap; } /* 이름이 길어도 한 줄 */
.prod .row2 > span:first-child { min-width: 0; }

/* 상세 창 · 모달 */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: color-mix(in srgb, var(--bg) 75%, transparent); }
.modal-box { width: min(560px, 100%); max-height: 100%; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.modal-box h2 { font-size: 20.5px; font-weight: 700; }
.modal-box .nl li { padding: 9px 0; font-size: 15px; }
.agree { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); cursor: pointer; font-size: 16px; }
.agree input { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.modal-actions .cta { padding: 0 24px; }
/* 작업 상세 창 (SPEC 4-4): 왼쪽 크게 작업물, 오른쪽 배지 · 제목 · 줄 · Credit — 오른쪽은 세로 가운데 */
.wm { width: min(1200px, 100%); max-height: 100%; overflow: auto; background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); border: 1px solid var(--line); border-radius: 18px; padding: clamp(16px, 2.4vw, 28px); position: relative; display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(240px, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center; }
.wm.narrow-m { width: min(640px, 100%); grid-template-columns: 1fr; }
.wm.wide-prod { width: min(980px, 100%); align-items: start; }
.wm.wm-sq { width: min(1000px, 100%); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } /* 음원 · 앨범: 정사각 커버 + 트랙 */
@media (max-width: 760px) { .wm, .wm.wm-sq { grid-template-columns: 1fr; align-items: start; } }
.wm-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--dim); }
.wm-x:hover { color: var(--fg); }
.wm-media { min-width: 0; }
.player { position: relative; border-radius: 12px; overflow: hidden; background: var(--bg); aspect-ratio: 16 / 9; }
.player > iframe, .player > img, .player > .ph { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }
.wm-info { display: flex; flex-direction: column; gap: 22px; min-width: 0; padding: 8px 8px 8px 0; }
.wm-head { display: flex; flex-direction: column; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid var(--line); padding-right: 36px; }
.wm-info h2 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere; }
.wm-info .meta { font-size: 15px; color: var(--faint); margin: -4px 0 0; }
.wm-sec { display: flex; flex-direction: column; gap: 12px; }
.wm-sec > .label { color: var(--accent); }
.badge { align-self: flex-start; font-size: 13.5px; font-weight: 600; padding: 3px 10px; border-radius: var(--pill); background: var(--cc, var(--c)); color: var(--on-accent); }
.credit { display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; line-height: 1.45; }
.credit span { color: var(--dim); }
.credit b { color: var(--fg); font-weight: 500; }
.gal-main { border-radius: 12px; overflow: hidden; background: var(--bg); aspect-ratio: 4 / 3; }
.gal-main > img, .gal-main > .ph { width: 100%; height: 100%; object-fit: contain; display: block; }
.gal-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gal-thumbs button { padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; overflow: hidden; }
.gal-thumbs button[aria-current="true"] { border-color: var(--cc, var(--c)); }
.gal-thumbs img { display: block; width: 64px; height: 48px; object-fit: cover; }
/* 음원 · 앨범 커버: 정사각, 유튜브가 있으면 가운데 ▶ (누르면 그 자리에서 플레이어) */
.cover { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bg); }
.cover > img, .cover > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 64px; height: 64px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--bg) 65%, transparent); color: var(--fg); backdrop-filter: blur(4px); display: grid; place-items: center; transition: background .2s; }
.cover-play:hover { background: color-mix(in srgb, var(--bg) 85%, transparent); }
.cover-play svg { width: 28px; height: 28px; margin-left: 3px; }
.listen { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: var(--pill); background: var(--cc, var(--c)); color: var(--on-accent); font-weight: 600; font-size: 15px; }
.tracks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.trk { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.trk .n { color: var(--faint); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.trk .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.typepick { display: flex; flex-wrap: wrap; gap: 6px; }
.typepick button { min-height: 38px; padding: 0 14px; border-radius: var(--pill); border: 1px solid var(--line); background: none; color: var(--dim); font-size: 15px; }
.typepick button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.typepick button small { margin-left: 6px; opacity: .7; }
.price-big { font-size: 23px; font-weight: 700; font-variant-numeric: tabular-nums; }
.prod-media { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 8px; }
.prod-media.one { grid-template-columns: 1fr; }
@media (max-width: 600px) { .prod-media { grid-template-columns: 1fr; } }
.prod-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding-top: 16px; border-top: 1px solid var(--line); align-items: end; }
.prod-info .col { display: flex; flex-direction: column; gap: 8px; }
.prod-info h2 { font-size: 23px; font-weight: 700; }

/* 양식 */
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 15px; color: var(--dim); }
.field label em { font-style: normal; color: var(--accent); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
input, select, textarea { font: inherit; font-size: 17px; color: var(--fg); width: 100%; min-height: 48px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; transition: border-color .2s; }
textarea { resize: vertical; min-height: 120px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
input[type="file"] { min-height: 0; padding: 8px; font-size: 15px; color: var(--dim); }
.bad { border-color: var(--err) !important; }
.err { font-size: 14.5px; color: var(--err); margin: 0; }
.note { font-size: 14.5px; color: var(--faint); margin: 0; }
.cta { min-height: 50px; padding: 0 28px; border: 0; border-radius: var(--pill); background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 16px; transition: filter .2s, opacity .2s; display: inline-flex; align-items: center; justify-content: center; }
.cta:hover { filter: brightness(1.1); }
.cta:disabled { opacity: .4; filter: none; }
.form > .cta { align-self: flex-start; }
.auth .form > .cta { align-self: stretch; }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius); border: 1px solid var(--line); background: none; color: var(--fg); font-size: 16px; transition: border-color .2s; }
.btn:hover { border-color: var(--faint); }

.done { display: flex; flex-direction: column; gap: 28px; }
.done h3 { font-weight: 700; font-size: 30px; line-height: 1.2; }
.done h3 span { color: var(--accent); }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 16px; }
.ticks li::before { content: "✓"; color: var(--accent); }
.ticks small { display: block; color: var(--faint); font-size: 14.5px; }
.reveal { border: 1px solid var(--accent); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.reveal .label { color: var(--accent); }
.reveal .note { color: var(--dim); }
.kv { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; font-size: 16px; }
.kv span:first-child { color: var(--faint); }
.kv span:last-child { font-size: 15.5px; user-select: all; word-break: break-all; }
.copybox { display: flex; flex-direction: column; gap: 10px; }
.copybox pre { margin: 0; padding: 14px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); font-family: var(--font); font-size: 14.5px; color: var(--dim); white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow: auto; }
.copybox .btn { align-self: flex-start; }

/* 로그인 · 가입 */
.auth { max-width: 420px; margin: 0 auto; padding-block: 72px 0; display: flex; flex-direction: column; gap: 22px; }
.auth h1 { font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.auth .sub { margin: -12px 0 0; color: var(--dim); font-size: 16px; }
.auth .back { margin-top: 0; align-self: flex-start; }
.choice { display: grid; gap: 10px; }
.choice a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s; }
.choice a:hover { border-color: var(--accent); }
.choice b { font-size: 17px; }
.choice small { grid-column: 1; color: var(--faint); font-size: 14.5px; }
.choice .ar { grid-row: 1 / 3; grid-column: 2; color: var(--faint); }
.code-in { font-size: 27.5px; letter-spacing: .35em; text-align: center; text-transform: uppercase; font-variant-numeric: tabular-nums; min-height: 60px; }
.steps-dots { display: flex; gap: 6px; }
.steps-dots i { width: 22px; height: 3px; border-radius: 2px; background: var(--line); }
.steps-dots i.on { background: var(--accent); }
.hint { font-size: 14.5px; color: var(--faint); margin: 0; }
.textlink { padding: 4px 0; color: var(--dim); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; background: none; border: 0; }
.textlink:hover { color: var(--fg); }

/* My Page */
.mp { max-width: 820px; margin: 0 auto; padding-block: 48px 0; display: flex; flex-direction: column; gap: 20px; }
.saved { font-size: 14.5px; color: var(--faint); }
.saved.bad-save { color: var(--err); }
.rm { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--faint); transition: color .2s, border-color .2s; }
.rm:hover { color: var(--err); border-color: var(--err); }
.mv { display: flex; flex-direction: column; gap: 4px; }
.mv .rm { width: 36px; height: 30px; border-radius: 8px; font-size: 14px; }
.mv .rm:hover { color: var(--fg); border-color: var(--faint); }
.add { align-self: flex-start; min-height: 40px; padding: 0 16px; border-radius: var(--pill); border: 1px dashed var(--line); background: none; color: var(--dim); font-size: 15px; transition: color .2s, border-color .2s; }
.add:hover { color: var(--fg); border-color: var(--faint); }
.count { font-size: 14px; color: var(--faint); font-variant-numeric: tabular-nums; }
.toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.toggles button { min-height: 36px; padding: 0 14px; border-radius: var(--pill); border: 1px solid var(--line); background: none; color: var(--dim); font-size: 15px; transition: color .2s, border-color .2s; }
.toggles button[aria-pressed="true"] { border-color: var(--accent); color: var(--fg); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.toggles button:disabled { opacity: .4; }
.sw { display: flex; flex-wrap: wrap; gap: 8px; }
.sw button { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; padding: 0; outline-offset: 2px; }
.sw button[aria-pressed="true"] { border-color: var(--fg); }
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.thumbs .t { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.thumbs .t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs .t button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--fg); font-size: 12.5px; padding: 0; }
.upl { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--radius); border: 1px dashed var(--line); color: var(--dim); font-size: 15px; cursor: pointer; transition: color .2s, border-color .2s; }
.upl:hover { color: var(--fg); border-color: var(--faint); }
.upl input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upl.busy { opacity: .5; pointer-events: none; }

/* About · Contact */
.prose { max-width: 680px; padding-block: 64px 0; display: flex; flex-direction: column; gap: 36px; }
.prose h1 { font-weight: 700; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; letter-spacing: -.02em; }
.prose .lead { font-size: 22px; margin: 0; }
.rules { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.rules div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.rules b { font-weight: 600; }
/* About "자세히 보기": 자세한 안내로 가는 칸 (한 화면에 다 보이게 두 줄 격자) */
.ab-h { margin: 40px 0 12px; font-size: 18px; }
.ab-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ab-docs a { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--fg); text-decoration: none; transition: border-color .15s; }
.ab-docs a:hover, .ab-docs a:focus-visible { border-color: var(--accent); }
.ab-docs a b { font-weight: 600; }
.ab-docs a b::after { content: " →"; color: var(--accent); }
.ab-docs span { font-size: 13.5px; color: var(--faint); }
.rules span { color: var(--dim); }
@media (max-width: 560px) { .rules div { grid-template-columns: 1fr; } }

/* 맨 아래 (Jiho 11/3): 가운데 정렬로 링크 → 사업자 정보 → 고지 → ©, 아래로 갈수록 작고 옅게 */
.foot { margin-top: 120px; padding-block: 40px 60px; border-top: 1px solid var(--line); text-align: center; font-size: 13px; line-height: 1.6; color: var(--faint); }
.foot p { margin: 0; }
.foot a { color: inherit; text-decoration: none; transition: color .2s; }
.foot a:hover { color: var(--fg); text-decoration: underline; }
.foot .sep { margin: 0 2px; opacity: .4; }
.foot-nav { margin-bottom: 14px; font-weight: 500; }
.foot-nav a, .foot-biz > span, .foot-copy > span { white-space: nowrap; }
.foot .foot-biz { margin-bottom: 14px; font-size: 12.5px; }
.foot .foot-disclaimer { max-width: 640px; margin: 0 auto 16px; font-size: 12.5px; word-break: keep-all; opacity: .85; }
.foot-copy { font-size: 12px; opacity: .6; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60; transform: translate(-50%, 20px); opacity: 0; padding: 10px 16px; border-radius: var(--pill); background: var(--fg); color: var(--bg); font-size: 15px; transition: opacity .35s, transform .35s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 720px) {
  .nav a { padding: 10px 8px; font-size: 15px; }
  .nav .nav-login { margin-left: 2px; }
}
/* 좁은 화면(작은 태블릿 · 좁은 창까지): 글씨를 줄이는 대신 메뉴를 로고 아래 한 줄로 (넘치지 않게 — 420~720px에서 오른쪽 메뉴가 잘렸음) */
@media (max-width: 720px) {
  .top .inner { flex-wrap: wrap; gap: 0 8px; min-height: 0; padding-block: 4px 6px; }
  .logo { font-size: 15px; letter-spacing: .02em; }
  .nav { order: 3; width: 100%; justify-content: space-between; gap: 0; overflow-x: auto; scrollbar-width: none; } /* 그래도 넘치면 메뉴 줄만 옆으로 밀림 (페이지는 안 밀림) */
  .top .theme-toggle { margin-left: auto; } /* 밝기 버튼은 로고와 같은 첫 줄 오른쪽 */
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 7px 4px; font-size: 13.5px; }
  /* 운영자는 메뉴가 하나 더 (Admin) */
  .nav:has(a[href="/admin"]) a { padding-inline: 3px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* 비어 있는 자리: 숨기지 않고 표시 */
.empty-box { margin: 0; padding: 28px; border: 1px dashed var(--line); border-radius: var(--radius-lg); color: var(--faint); font-size: 15px; text-align: center; }

/* 포인트 글자: JIHO MIX 하늘색 (SPEC 3장). 아주 조금만: 로고, 메인 작은 섹션 제목, 크레딧 이름 */
.logo, .section-head h2 { color: var(--accent); }

/* 바탕 빛: JIHO MIX와 같은 값. 화면에 고정이라 스크롤해도 아래가 새까매지지 않음. 움직이지 않음 (SPEC 3장) */
body {
  background:
    radial-gradient(1100px 650px at 10% -12%, var(--glow-1), transparent 60%),
    radial-gradient(950px 720px at 102% 8%, var(--glow-2), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}
.top { background: color-mix(in srgb, var(--bg) 72%, transparent); }

/* 큰 제목: 산세리프 + 일부 그라데이션 */
h1, .big, .acard-name, .asec h2.t, .step h3 { font-family: var(--font-display); }
/* 제목 폰트는 굵기가 하나뿐인 게 많음(Black Han Sans 등) → 브라우저 가짜 굵게가 글자를 덧칠해 깨뜨림 */
h1, .big, .acard-name, .asec h2.t, .step h3, .g-name, .g-h2, .d-h2 { font-synthesis-weight: none; }
.grad, .grad-c { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-c { background-image: linear-gradient(90deg, var(--cc, var(--c)), color-mix(in srgb, var(--cc, var(--c)) 55%, var(--fg))); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); text-shadow: var(--eyebrow-glow, 0 0 6px color-mix(in srgb, currentColor 30%, transparent)); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; box-shadow: var(--eyebrow-glow, 0 0 12px 2px color-mix(in srgb, currentColor 30%, transparent)); }
.page-head .eyebrow { color: var(--cc, var(--c)); }

.hero { display: flex; flex-direction: column; gap: 22px; padding-block: 88px 36px; }
.hero h1 { font-size: clamp(36px, 6.4vw, 76px); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; max-width: 14em; word-break: keep-all; }
.hero-sub { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; }
.hero-sub p { margin: 0; font-family: var(--font-display); font-size: clamp(15px, 1.7vw, 18px); color: var(--dim); }
.big { font-size: clamp(40px, 6vw, 72px); font-weight: 700; letter-spacing: -.035em; }
.prose h1, .auth h1 { font-weight: 700; letter-spacing: -.03em; word-break: keep-all; }
.prose h1 { font-size: clamp(34px, 5.4vw, 60px); line-height: 1.12; }
.prose { gap: 28px; }
.auth h1 { font-size: clamp(28px, 4vw, 36px); }
.me-name h1 { letter-spacing: -.03em; }

/* 가운데 정렬: 글 위주 화면은 왼쪽에 몰리지 않게 가운데 기둥으로 */
.asec { max-width: none; }
.prose { margin-inline: auto; max-width: 820px; }
.mp { max-width: 900px; }
.addons { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* 넓은 화면은 크게: 왼쪽에만 몰리지 않게 두 칸으로 */
.hero { padding-block: 96px 40px; }
.hero h1 { max-width: none; }
.hero-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 32px; }
.hero-sub { margin: 0; font-family: var(--font-display); font-size: clamp(17px, 1.8vw, 21px); color: var(--dim); }
.hero-row .live { font-size: 15px; }
.cats { gap: 10px; }
.cat-pill { min-height: 56px; padding: 0 26px 0 22px; }
.cat-pill .nm { font-size: 17px; }
.cat-pill .n { font-size: 14px; }

.head-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; }
@media (max-width: 760px) { .head-grid { grid-template-columns: 1fr; } }

/* 분야 페이지 검색 · 필터 (SPEC 4-2): 돋보기 검색창 + 눌러서 여는 필터 */
.finder { justify-self: end; width: min(100%, 460px); }
.search { position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--faint); pointer-events: none; }
.search input { min-height: 46px; padding: 0 84px 0 44px; border-radius: var(--pill); font-size: 15px; }
.search-go { position: absolute; right: 5px; min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--pill); background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 600; }
.filters { margin-bottom: 4px; }
.filters summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: var(--pill); border: 1px solid var(--line); color: var(--dim); font-size: 15px; cursor: pointer; list-style: none; transition: color .2s, border-color .2s; }
.filters summary::-webkit-details-marker { display: none; }
.filters summary::after { content: "▾"; font-size: 12.5px; }
.filters[open] summary::after { content: "▴"; }
.filters summary:hover, .filters[open] summary { color: var(--fg); border-color: var(--faint); }
.filters summary b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pill); background: var(--fg); color: var(--bg); font-size: 12.5px; display: inline-grid; place-items: center; }
.filter-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 20px; margin-top: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.chips-name { width: 100%; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.chip span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: var(--pill); border: 1px solid var(--line); color: var(--dim); font-size: 14.5px; cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.chip span:hover { color: var(--fg); border-color: var(--faint); }
.chip input:checked + span { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 760px) { .finder { justify-self: stretch; width: 100%; } }
.home-find { display: grid; gap: 12px; margin-top: 22px; }
.home-find .finder { justify-self: start; }

.me { grid-template-columns: 148px minmax(0, 1fr); gap: 28px; }
.me .avatar { width: 148px; height: 148px; }
.me p { font-size: 16.5px; line-height: 1.8; }
@media (max-width: 520px) { .me { grid-template-columns: 1fr; } }
/* About Me 아래 요약 한 줄. 버튼 없이, 공지로 내려가게 */
.summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; margin: 4px 0 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.summary div { display: flex; flex-direction: column; gap: 2px; }
.summary dt { font-size: 14px; color: var(--faint); }
.summary dd { margin: 0; font-size: 16px; }
.to-notice { margin-left: auto; font-size: 14.5px; color: var(--cc, var(--c)); border-bottom: 1px solid color-mix(in srgb, var(--cc, var(--c)) 40%, transparent); padding-bottom: 2px; }
.to-notice:hover { border-color: var(--cc, var(--c)); }

/* 본문 글줄도 넓게 */
.nl li { font-size: 16px; padding: 16px 0; }
.asec { gap: 24px; padding-block: 72px 8px; }
.asec h2.t { font-size: clamp(24px, 2.6vw, 30px); }
.section-head h2 { font-size: 21px; }
.prose { max-width: 960px; }

/* 분야를 바꿔도 화면이 흔들리지 않게: 스크롤바 자리 항상 확보 (JIHO MIX와 같은 방법), 목록 칸 높이 고정 */
html { scrollbar-gutter: stable; overflow-x: hidden; }
.cat-list { min-height: 60vh; }
.page-head .eyebrow { min-height: 1.6em; }

/* 섹션 탭 바는 화면 끝까지 */
.secnav { margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); }

/* About Me: 넓은 화면에서 크게 */
.me { grid-template-columns: clamp(120px, 14vw, 196px) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 48px); }
.me .avatar { width: clamp(120px, 14vw, 196px); height: clamp(120px, 14vw, 196px); }
.me .role-label { font-size: 14px; }
.me-name h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.08; margin: 6px 0 4px; }
.me p { font-size: clamp(16.5px, 1.45vw, 19px); line-height: 1.75; margin-top: 12px; }
.me .row { margin-top: 18px; }
.tagline { font-size: 16.5px; }
/* 요약 한 줄: 네 칸을 가로로 고르게 나눔 */
.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 16px 32px; padding: 26px 0; margin-top: 12px; }
.summary dt { font-size: 14px; }
.summary dd { font-size: clamp(18px, 1.7vw, 22px); font-weight: 500; }
.summary dd .status { font-size: inherit; }
.to-notice { font-size: 16px; align-self: center; }
@media (max-width: 760px) { .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .to-notice { grid-column: 1 / -1; margin-left: 0; justify-self: start; } }
@media (max-width: 520px) { .me { grid-template-columns: 1fr; } }

/* 요약 줄 다듬기: 끝까지 벌리지 않고 일정한 간격, 칸끼리 높이 맞춤 */
.summary { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px clamp(36px, 5vw, 72px); }
.summary div { gap: 6px; }
.summary dd { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.4; }
.summary dd .status { display: inline-flex; align-items: center; line-height: 1.4; }
.to-notice { margin-left: auto; align-self: flex-end; margin-bottom: 2px; }
.me { align-items: center; }
.me-name h1 { font-size: clamp(34px, 4.4vw, 54px); }
@media (max-width: 760px) { .summary { display: grid; } }
.summary { align-items: flex-start; }
.summary dd { display: flex; align-items: center; min-height: 1.6em; }
.to-notice { align-self: center; margin-bottom: 0; }
.done-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

/* 관리자: 코드 크게 */
.code-box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-align: center; }
.code-big { font-size: clamp(34px, 9vw, 48px); font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--fg); user-select: all; }
.code-box .sub { margin: 0; }
.code-box .cta { width: 100%; }

/* ── My Page 편집기: 구글 문서처럼. 왼쪽 도구 · 가운데 페이지 (SPEC 4-7) */
.doc { max-width: 980px; width: 100%; background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px solid var(--line); border-radius: 22px; padding: 12px clamp(24px, 4vw, 56px) 40px; --c: var(--accent); }
.dsec { padding: 32px 0 28px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; border-radius: 14px; transition: background-color .2s, opacity .2s, box-shadow .2s; }
.dsec:last-child { border-bottom: 0; }
.dsec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dsec-head .label { color: var(--cc, var(--c)); font-size: 14px; }
.dsec-meta { font-size: 14px; color: var(--faint); display: inline-flex; gap: 8px; align-items: center; }
.dsec-meta .ok { color: var(--accent); }
.dsec.can-drop { background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent); padding-inline: 16px; }
.dsec.no-drop { opacity: .35; }
.drop-hint { padding: 26px; border: 1px dashed var(--line); border-radius: 14px; color: var(--faint); font-size: 14px; text-align: center; }

/* 글자처럼 보이는 입력칸 */
.g { background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 5px 8px; min-height: 0; font-size: 16px; color: var(--fg); width: 100%; transition: border-color .15s, background-color .15s; }
.g:hover { border-color: var(--line); }
.g:focus { border-color: var(--accent); background: var(--bg); }
.g::placeholder { color: var(--faint); opacity: .8; }
textarea.g { resize: none; overflow: hidden; line-height: 1.6; min-height: 0; }
select.g { width: auto; cursor: pointer; }
.g-name { font-family: var(--font-display); font-size: clamp(34px, 4vw, 48px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.g-role { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--cc, var(--c)); }
.g-intro { font-size: 17px; color: var(--dim); }
.g-tags { color: var(--cc, var(--c)); font-size: 16px; }
.g-h2, .d-h2 { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.02em; }
.d-h2 { margin: 0 0 4px; }
.g-strong { font-size: 16.5px; font-weight: 600; }
.g-small { font-size: 14.5px; color: var(--dim); }
.g-dim { color: var(--dim); }
.g-price { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.g.r { text-align: right; }
.g.c { text-align: center; }
.g.bad { border-color: var(--err); }
.g-inline { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--faint); }
.g-inline span { white-space: nowrap; padding-left: 8px; }
.stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* 블록: 손잡이 · 지우기는 마우스를 올리면 보임 */
.blk { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) 30px; gap: 4px; align-items: start; padding: 8px 6px; border: 1px solid transparent; border-radius: 14px; transition: border-color .15s, opacity .15s, box-shadow .15s; }
.blk:hover { border-color: var(--line); }
.blk.card { border-color: var(--line); background: color-mix(in srgb, var(--bg) 70%, transparent); }
.blk.card:hover { border-color: var(--faint); }
.blk-in { min-width: 0; }
.hdl { cursor: grab; color: var(--faint); font-size: 14px; letter-spacing: -2px; padding-top: 9px; opacity: 0; transition: opacity .15s; user-select: none; }
.blk:hover .hdl { opacity: 1; }
.blk-x { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--faint); font-size: 12.5px; padding: 0; opacity: 0; transition: opacity .15s, color .15s, border-color .15s; }
.blk:hover .blk-x, .collab.ext:hover .blk-x { opacity: 1; }
.blk-x:hover { color: var(--err); border-color: var(--err); }
.blk.moving { opacity: .35; }
.blk.drop-before { box-shadow: 0 -3px 0 0 var(--accent); }
.blk.drop-after { box-shadow: 0 3px 0 0 var(--accent); }
.d-grid2 .blk.drop-before { box-shadow: -3px 0 0 0 var(--accent); }
.d-grid2 .blk.drop-after, .d-opts .blk.drop-after { box-shadow: 3px 0 0 0 var(--accent); }
.d-opts .blk.drop-before { box-shadow: -3px 0 0 0 var(--accent); }
.blk.fresh, .dsec.fresh { border-color: var(--accent); }

.d-about { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; align-items: center; }
.av { position: relative; width: 160px; height: 160px; border-radius: 50%; overflow: hidden; cursor: pointer; display: block; border: 1px dashed var(--line); }
.av img, .av .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.av input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.av-plus { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--dim); }
.av:hover { border-color: var(--accent); }
.av.busy { opacity: .5; }
.d-nl { border-top: 1px solid var(--line); }
.d-nl .blk.row { border-radius: 0; border-width: 0 0 1px; border-color: var(--line); padding: 10px 6px; }
.d-nl .blk.row:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.d-nl .blk-in { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: start; }
.d-nl .num { color: var(--faint); font-size: 14px; padding-top: 8px; font-variant-numeric: tabular-nums; }
.d-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.d-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.opt-card { padding-top: 12px; }
.mtx-wrap { border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; }
.mtx { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14.5px; }
.mtx th { padding: 10px 12px; text-align: center; font-weight: 600; border-bottom: 1px solid var(--line); }
.mtx th:first-child { text-align: left; color: var(--dim); font-weight: 400; }
.mtx td { padding: 4px 6px; border-bottom: 1px solid var(--line); }
.mtx tr.blk { display: table-row; border-radius: 0; }
.mtx td:first-child { display: flex; align-items: center; gap: 2px; }
.mtx td:first-child .hdl { padding-top: 0; }
.mtx tr:hover .hdl, .mtx tr:hover .blk-x { opacity: 1; }

.d-addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; border-top: 1px solid var(--line); }
.d-addons .blk.row { border-radius: 0; border-width: 0 0 1px; border-color: var(--line); }
.addon-e { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; }
.addon-e > :first-child { grid-column: 1 / -1; } /* 이름은 한 줄 통째로 (반쪽 칸에서 가격 칸에 밀려 "움직" 두 글자만 보이던 것) */
.addon-e .addon-mode { width: auto; padding-inline: 6px; font-size: 13px; color: var(--dim); }
.calc-chip { grid-column: 1 / -1; justify-self: start; font-size: 12px; color: var(--dim); border: 1px solid var(--line); border-radius: var(--pill); padding: 1px 8px; margin-bottom: 6px; cursor: pointer; }
.calc-chip.guess { border-style: dashed; }
.calc-chip.warn { color: var(--err); border-color: var(--err); }
.qtest { margin-top: 12px; font-size: 14px; }
.qtest table { width: 100%; border-collapse: collapse; }
.qtest th, .qtest td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.qtest th { font-weight: 500; color: var(--dim); font-size: 12px; }
.qtest td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.qtest td.bad { color: var(--err); }
.qtest small { display: block; color: var(--dim); font-size: 12px; white-space: normal; }
/* 튜토리얼이 꺼져 있으면 편집기 설명 글은 숨김 (위 "튜토리얼"로 전부 보기) */
body:not(.tut) .ed .hint, body:not(.tut) .ed .bk-hint, body:not(.tut) .ed .first-tip, body:not(.tut) .ed .ins-f .count { display: none; }
/* 튜토리얼 투어: 비춘 곳 둘레 + 말풍선. 비춘 곳은 그대로 눌러서 해 볼 수 있음 */
.tour-ring { position: fixed; z-index: 60; border: 2px solid var(--accent); border-radius: var(--radius-lg); box-shadow: 0 0 0 9999px color-mix(in srgb, var(--bg) 55%, transparent); pointer-events: none; transition: left .2s, top .2s, width .2s, height .2s; }
.tour-tip { position: fixed; z-index: 61; padding: 14px 16px; border: 1px solid var(--accent); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.tour-tip b { font-size: 15px; }
.tour-tip p { margin: 6px 0 12px; font-size: 14px; color: var(--fg); line-height: 1.55; }
.tour-acts { display: flex; gap: 6px; align-items: center; }
.tour-acts .dim { margin-right: auto; font-size: 12.5px; }
.tour-acts .btn, .tour-acts .cta { min-height: 32px; padding: 0 12px; font-size: 13.5px; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .tour-ring { transition: none; } }
.qfloat { position: fixed; right: 24px; bottom: 24px; z-index: 40; }
@media (min-width: 1200px) { .qfloat { right: calc(clamp(290px, 24vw, 340px) + 24px); } } /* 오른쪽 꾸미기 칸 위에 떠서 맨 아래 칩을 가리던 것 → 페이지 쪽으로 */
.qf-dot { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: 600 20px var(--font); box-shadow: var(--shadow); cursor: grab; touch-action: none; }
.qf-dot.warn { border-color: var(--err); }
.qf-dot b { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--pill); background: var(--err); color: var(--on-accent); font-size: 12px; line-height: 20px; }
.qf-pad { position: absolute; right: 0; bottom: 62px; width: min(440px, calc(100vw - 32px)); max-height: min(70vh, 640px); overflow: auto; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.qf-pad.down { bottom: auto; top: 62px; }
.qf-pad.right { right: auto; left: 0; }
.qt-bar, .tour-tip { cursor: move; }
.qt-bar button, .tour-tip button { cursor: pointer; }
.moving { opacity: .92; user-select: none; }
.qf-pad h3 { margin: 14px 0 0; font-size: 13px; font-weight: 600; color: var(--dim); }
.qf-pad .qtest { margin-top: 6px; }
.qtest h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--err); }
.qtest h4.qf-h { margin-top: 18px; color: var(--dim); }
.qf-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.qf-name { font-weight: 600; }
.qf-desc { color: var(--fg); }
.qf-warn { display: block; color: var(--dim); font-size: 12px; margin-top: 2px; }
.qf-acts { display: flex; gap: 6px; margin-top: 6px; }
.qf-acts .cta, .qf-acts .btn { min-height: 30px; box-shadow: none; padding: 0 12px; font-size: 13px; }
.qf-done { color: var(--dim); }
.qf-none { color: var(--dim); font-size: 13px; margin: 8px 0 0; }
.qfix + table { margin-top: 14px; }
.qf-set { display: grid; gap: 8px; margin: 8px 0 4px; padding-left: 10px; border-left: 2px solid var(--line); }
.qf-set .ins-sub { margin: 0; }
.qfix li + li { margin-top: 10px; }
.qf-pad input, .qf-pad select { width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; font-size: 14px; }
.qf-pad .ins-f > label { font-size: 13px; color: var(--dim); }
.qf-hits button { display: block; width: 100%; text-align: left; padding: 8px 10px; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: none; color: var(--fg); font: inherit; cursor: pointer; }
.qf-hits small { display: block; color: var(--dim); font-size: 12px; }
.qfix { margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--dim); }
.qfix li { padding: 3px 0; }
.qfix .qf-name { font: inherit; color: var(--fg); background: none; border: 0; border-bottom: 1px dashed var(--err); padding: 0; cursor: pointer; }
.d-form { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--bg) 60%, transparent); }
.fixed-q { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 6px 10px; border-bottom: 1px solid var(--line); }
.fixed-q span { font-size: 14px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--dim); }
.fixed-q small { font-size: 13.5px; color: var(--faint); }
.fake-in { border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 4px; }
.fake-in.tall { min-height: 76px; }
.d-contact { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px dashed var(--line); border-radius: 16px; }
.d-contact .label { color: var(--cc, var(--c)); }
.collab.tg { cursor: pointer; background: none; color: var(--dim); }
.collab.tg.on { border-color: var(--accent); color: var(--fg); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.collab.tg:disabled { opacity: .4; cursor: not-allowed; }
.collab.ext { padding-right: 6px; }
.collab.ext .g { width: 140px; font-size: 14px; padding: 3px 6px; }

/* 섹션마다 색 (분야 색 재사용): 왼쪽 도구 목록과 페이지 섹션이 같은 색 */
.dsec[data-sec="notice"] { --tc: var(--video); }
.dsec[data-sec="portfolio"] { --tc: var(--art); }
.dsec[data-sec="collab"] { --tc: var(--virtual); }
.dsec[data-sec="price"] { --tc: var(--accent); }
.dsec[data-sec="apply"] { --tc: var(--fg); }
.dsec[data-sec="about"] { --tc: var(--dim); }
.dsec-head .label { color: var(--tc, var(--cc, var(--c))); display: inline-flex; align-items: center; gap: 8px; }
.dsec-head .label::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--tc, var(--cc, var(--c))); }
.dsec.can-drop { background: color-mix(in srgb, var(--tc, var(--accent)) 8%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc, var(--accent)) 55%, transparent); }
.dsec .blk.card { border-left: 3px solid color-mix(in srgb, var(--tc, var(--line)) 55%, var(--line)); }


/* ── My Page = 편집 화면 (구글 문서처럼): 위 한 줄 · 왼쪽 도구 목록 · 가운데 종이 */
body.editing { height: 100vh; overflow: hidden; }
body.editing::before { display: none; }
.ws, .ws > .ed { height: 100vh; display: flex; flex-direction: column; }
.ws-note { max-width: 420px; margin: 80px auto; padding: 0 20px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ws-note p { margin: 0; color: var(--dim); }
.ws-top { flex: none; display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 85%, transparent); }
.ws-back { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: var(--dim); transition: background-color .15s, color .15s; }
.ws-back:hover { background: var(--surface); color: var(--fg); }
.ws-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ws-title b { font-family: var(--font-display); font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-sub { font-size: 13.5px; color: var(--faint); }
.ws-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ws-acts .btn { min-height: 38px; font-size: 14px; padding: 0 14px; border-radius: var(--pill); }
.ws-acts .cta { min-height: 40px; padding: 0 20px; font-size: 14px; }
kbd { font-family: var(--font); font-size: 12.5px; color: var(--faint); margin-left: 6px; padding: 0 5px; border: 1px solid var(--line); border-radius: 5px; }
.ws-body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 264px minmax(0, 1fr) 340px; }
.ws-side { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.ws-tabs { flex: none; display: flex; gap: 4px; padding: 14px 14px 8px; }
.ws-tabs button { min-height: 34px; padding: 0 14px; border: 0; border-radius: var(--pill); background: none; color: var(--faint); font-size: 14px; }
.ws-tabs button[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--fg); }
.ws-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 20px; display: flex; flex-direction: column; gap: 14px; }
.ws-foot { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--dim); }
.ws-foot a:hover { color: var(--fg); }
.ws-list .tg-group { gap: 2px; }
.tg-name { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.tg-name i { width: 7px; height: 7px; border-radius: 2px; background: var(--tc); }
.ws-list .tool { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 10px; background: none; cursor: grab; user-select: none; font-size: 14px; color: var(--fg); transition: background-color .12s; }
.ws-list .tool:hover, .ws-list .tool:focus-visible { background: var(--surface); }
.ws-list .tool .ti { width: 26px; height: 26px; flex: none; border-radius: 7px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--tc); background: color-mix(in srgb, var(--tc) 13%, transparent); }
.ws-list .tool .tn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-list .tool .tl { font-size: 12.5px; color: var(--faint); }
.ws-list .tool.off { opacity: .6; cursor: default; }
.ws-list .tool.off:hover { background: none; }
.ws-list .toggles, .ws-list .sw { padding: 0 8px; }
.ws-list .hint { padding: 0 8px; }
.ws-canvas { min-height: 0; overflow-y: auto; padding: 20px 32px 80px; }
.ws-canvas .doc { max-width: 900px; margin: 0 auto; background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 20px 50px -30px color-mix(in srgb, var(--bg) 80%, transparent); }
/* 편집 화면 About Me 요약 줄: 누르거나 입력해서 바로 바꿈 */
.ed-sum { margin-top: 18px; }
.ed-sum dd .g { width: 9em; font-size: inherit; padding: 2px 6px; margin-left: -6px; }
.st-wrap { position: relative; }
.st-pick { display: inline-flex; align-items: center; gap: 7px; padding: 2px 10px 2px 6px; margin-left: -6px; border: 1px solid transparent; border-radius: 8px; background: none; font-size: inherit; }
.st-pick:hover { border-color: var(--line); }
.st-pick i, .st-menu i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-menu { position: absolute; top: calc(100% + 6px); left: -6px; z-index: 5; display: flex; flex-direction: column; min-width: 140px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--bg) 90%, transparent); }
.st-menu button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font-size: 15px; text-align: left; }
.st-menu button:hover, .st-menu button[aria-checked="true"] { background: var(--bg); }
.cat-pick { display: flex; flex-wrap: wrap; gap: 4px; }
.cat-pick button { padding: 2px 10px; border: 1px solid var(--line); border-radius: var(--pill); background: none; color: var(--faint); font-size: 14px; }
.cat-pick button[aria-pressed="true"] { border-color: var(--cc, var(--c)); color: var(--fg); }

/* 카드 블록 (포트폴리오 · 판매 모델): 공개 페이지 카드 모양, 누르면 오른쪽 상세 탭 */
.d-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 14px; } /* 공개 페이지처럼 한 줄 3개 */
@media (max-width: 760px) { .d-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.blk.pick { grid-template-columns: minmax(0, 1fr); padding: 6px; }
.blk.pick .hdl { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--fg); }
.blk.pick .blk-x { position: absolute; top: 12px; right: 12px; z-index: 2; }
.blk.pick.sel { border-color: transparent; }
.pc { display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.pc-thumb { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--bg); }
.pc.sq .pc-thumb { aspect-ratio: 1; }
.pc-thumb img, .pc-thumb .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-ico { position: absolute; right: 8px; bottom: 8px; font-size: 13.5px; padding: 2px 9px; border-radius: var(--pill); background: color-mix(in srgb, var(--bg) 65%, transparent); color: var(--fg); }
.pc-tier { position: absolute; left: 8px; bottom: 8px; font-size: 12.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--pill); background: var(--cc, var(--c)); color: var(--on-accent); }
.pc-tt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; font-size: 14px; padding: 0 2px 2px; }
.pc-tt > span:first-child { flex: 1 1 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ws-ins { min-height: 0; overflow-y: auto; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.ins-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.ins-head .tg-name { padding: 0; }
.ins-head .ws-back { width: 34px; height: 34px; font-size: 14px; }
.ins-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ins-f { display: flex; flex-direction: column; gap: 6px; }
.ins-f > label { font-size: 14px; color: var(--dim); }
.ws-ins .g.f { border-color: var(--line); background: var(--bg); padding: 9px 12px; font-size: 15px; width: 100%; }
.ws-ins .g.f:focus { border-color: var(--accent); }
.ws-ins textarea.g.f { min-height: 80px; }
.ins-del { align-self: flex-start; margin-top: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--pill); background: none; color: var(--faint); font-size: 14.5px; }
.ins-del:hover { color: var(--err); border-color: var(--err); }

/* 큰 블록: 페이지에 넣은 단위. 누르면 오른쪽에 세부 도구 */
.bk { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; margin: 0 -16px; border: 1px solid transparent; border-radius: 16px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.bk:hover { border-color: var(--line); }
.bk.sel { background: color-mix(in srgb, var(--tc, var(--accent)) 5%, transparent); }
.bk-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; }
.bk-name { color: var(--tc, var(--faint)); letter-spacing: .06em; font-weight: 600; }
.bk-hint { color: var(--faint); opacity: 0; transition: opacity .15s; }
.bk:hover .bk-hint, .bk.sel .bk-hint { opacity: 1; }
.bk input, .bk textarea, .bk select, .bk button, .bk label { cursor: auto; }
.bk button { cursor: pointer; }
.bk-add { align-self: flex-start; min-height: 36px; padding: 0 14px; border: 1px dashed var(--line); border-radius: var(--pill); background: none; color: var(--dim); font-size: 14.5px; transition: color .15s, border-color .15s; }
.bk-add:hover { color: var(--fg); border-color: var(--tc, var(--faint)); }
.bk-tile { min-height: 120px; border: 1px dashed var(--line); border-radius: 12px; background: none; color: var(--dim); font-size: 14px; transition: color .15s, border-color .15s; }
.bk-tile:hover { color: var(--fg); border-color: var(--tc, var(--faint)); }
.d-opts .bk-tile { min-height: 0; }
.q-row { display: flex; flex-direction: column; gap: 6px; cursor: pointer; padding: 2px 0; }
.q-label { font-size: 14px; color: var(--dim); }
.q-row .fake-in { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 0 12px; font-size: 14px; color: var(--faint); }
.q-row .fake-in.tall { min-height: 70px; align-items: flex-start; padding-top: 10px; }
.blk.q { grid-template-columns: 20px minmax(0, 1fr) 30px; }
.blk.sel { border-color: transparent; }
.ws-list .tool .tn { display: flex; flex-direction: column; line-height: 1.35; }
.ws-list .tool .tn small { font-size: 13.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-list .tool { padding: 9px 8px; }
.ins-sub { font-size: 13.5px; letter-spacing: .06em; color: var(--faint); margin-top: 6px; }
.ins-choices { display: flex; flex-direction: column; gap: 6px; }
.ins-choices button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--fg); text-align: left; font-size: 14px; transition: border-color .15s; }
.ins-choices button:hover { border-color: var(--tc, var(--accent)); }
.ins-choices button small { font-size: 13.5px; color: var(--faint); }
.ins-choices button:disabled { opacity: .4; cursor: default; }
.ins-choices button:disabled:hover { border-color: var(--line); }
.ws-ins { --tc: var(--accent); }
/* 오른쪽 세부 도구: 끌어서 붙일 수 있는 것 */
.bk.can-drop { border-color: var(--tc, var(--accent)); border-style: dashed; background: color-mix(in srgb, var(--tc, var(--accent)) 8%, transparent); }
.pc [data-focus] { cursor: pointer; }
.pc .pc-tt [data-focus]:hover { text-decoration: underline; text-underline-offset: 3px; }
.pc-thumb[data-focus]:hover { outline: 2px solid color-mix(in srgb, var(--tc, var(--accent)) 60%, transparent); outline-offset: -2px; }
.ins-f.fresh { outline: 2px solid var(--tc, var(--accent)); outline-offset: 4px; border-radius: 8px; }
.role.dim { opacity: .5; }
.role.kind { border-style: dashed; }
.ins-more { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 14px; } /* 작업 오른쪽 칸: 프리셋을 고르면 접혀 있는 세부 설정 */
.ins-more > summary { cursor: pointer; font-size: 14px; color: var(--dim); list-style: none; }
.ins-more > summary::before { content: '▸ '; }
.ins-more[open] > summary::before { content: '▾ '; }
.ins-more > summary::-webkit-details-marker { display: none; } /* 구분 칩 (Cover · EP …): 역할 칩과 구분 */
/* 빈 페이지 안내 */
.ws-empty { max-width: 900px; margin: 0 auto 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 16px 20px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 16px; font-size: 14.5px; color: var(--dim); }
.ws-empty b { color: var(--fg); }
.ws-empty .btn { margin-left: auto; min-height: 38px; border-radius: var(--pill); }
/* 블록 안 버튼 · 작은 메뉴 · 지우기 */
.bk { cursor: default; }
.pop-wrap { position: relative; display: inline-flex; }
.d-cards .pop-wrap { display: flex; }
.d-cards .pop-wrap > .bk-tile { width: 100%; }
.pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; display: flex; flex-direction: column; min-width: 220px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--bg) 90%, transparent); }
.pop button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--fg); text-align: left; font-size: 14px; }
.pop button:hover { background: var(--bg); }
.pop button small { font-size: 13.5px; color: var(--faint); }
.q-label em { font-style: normal; color: var(--accent); }
.ins-check { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; }
.ins-check input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; accent-color: var(--accent); flex: none; }
.ins-check span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.ins-check small { font-size: 13.5px; color: var(--faint); }
/* 예시 보기 */
.ex-btn { padding: 1px 8px; margin-left: 4px; border: 1px solid var(--line); border-radius: var(--pill); background: none; color: var(--faint); font-size: 12.5px; font-weight: 400; letter-spacing: 0; vertical-align: 1px; transition: color .15s, border-color .15s; }
.ex-btn:hover { color: var(--fg); border-color: var(--tc, var(--accent)); }
.ws-list .tool .ex-btn { opacity: 0; }
.ws-list .tool:hover .ex-btn, .ws-list .tool .ex-btn:focus-visible { opacity: 1; }
.ex-frame { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); display: flex; flex-direction: column; gap: 12px; font-size: 14px; --c: var(--accent); pointer-events: none; }
.ex-frame .ngroups, .ex-frame .opts, .ex-frame .prods, .ex-frame .addons { grid-template-columns: 1fr; }
.ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-frame .cmp { min-width: 0; font-size: 13.5px; }
.ex-frame .cmp th, .ex-frame .cmp td { padding: 8px; }
.ex-frame .fake-in { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--faint); }
.ex-frame .field label em { font-style: normal; color: var(--accent); }
.ws-ins .cta { width: 100%; }
/* 공개하려는데 빈 곳: 테두리로 표시 (채울 때까지 남음) */
.need { outline: 2px dashed var(--err); outline-offset: 4px; border-radius: 10px; }
/* 오른쪽 칸: 늘 같은 자리 (열고 닫아도 페이지 폭이 안 변함). 좁은 화면에선 고를 때만 위에 겹쳐 뜸 */
@media (max-width: 1199px) {
  .ws-body { grid-template-columns: 240px minmax(0, 1fr); }
  .ws-ins { position: absolute; top: 0; right: 0; bottom: 0; width: 340px; z-index: 5; background: var(--surface); box-shadow: -18px 0 36px -24px color-mix(in srgb, var(--bg) 90%, transparent); }
  .ws-ins.idle { display: none; }
}
.blk.pick, .blk.q { cursor: pointer; }
.blk.pick .hdl { cursor: grab; }
.ws-ins .hint b { color: var(--fg); font-weight: 600; }
/* 공개 체크리스트 */
.ck { display: flex; flex-direction: column; gap: 4px; }
.ck-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; color: var(--faint); text-align: left; }
.ck-row i { font-style: normal; width: 16px; text-align: center; color: var(--accent); }
.ck-row.miss { border-color: var(--line); background: var(--bg); color: var(--fg); }
.ck-row.miss i { color: var(--err); }
.ck-row.miss span { margin-left: auto; font-size: 13.5px; color: var(--faint); transition: color .15s; }
.ck-row.miss:hover { border-color: var(--err); }
.ck-row.miss:hover span { color: var(--fg); }
/* 두 칸짜리 줄 (크레딧 · 트랙 · TYPE · 연락처) */
.prow { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.row2e { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px; gap: 6px; align-items: center; }
.row-x { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--faint); font-size: 12.5px; padding: 0; transition: color .15s, border-color .15s; }
.row-x:hover { color: var(--err); border-color: var(--err); }
.prow .bk-add { align-self: flex-start; }
.g-inline.top { align-items: flex-start; }
.g-inline.top > span { padding-top: 8px; }
/* 페이지 번호 (포트폴리오 6 · 판매 모델 4 · 협업 작가 12개씩) */
[data-per] { align-content: start; }
[data-per] > [hidden] { display: none !important; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 24px; }
.pager .pg-arrow { font-size: 16px; }
.pager .pg-arrow:disabled { opacity: .3; cursor: default; border-color: var(--line); color: var(--dim); }
.pager button { min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--pill); background: none; color: var(--dim); font-size: 14px; font-variant-numeric: tabular-nums; transition: color .15s, border-color .15s; }
.pager button:hover { color: var(--fg); border-color: var(--faint); }
.pager button[aria-current="page"] { color: var(--fg); border-color: var(--accent); }
/* 비교표 머리줄: 열 이름을 직접 쓰고 ✕로 지움 */
.mtx th { padding: 8px 2px; }
.mtx th { position: relative; }
.mtx th .mtx-col { display: block; }
.mtx th .mtx-col .g { width: 100%; min-width: 0; padding-inline: 4px; font-size: 14.5px; font-weight: 600; text-align: center; text-overflow: ellipsis; }
.mtx td .g { width: 100%; min-width: 0; text-overflow: ellipsis; }
/* 열 ✕: 그 열 제목 칸 안 오른쪽 위 (밖으로 안 나감) */
.mtx th .row-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; font-size: 10px; background: var(--surface); opacity: 0; }
.mtx th:hover .row-x, .mtx th .row-x:focus-visible { opacity: 1; }
/* 편집기: 공개 페이지에서 페이지가 넘어가는 자리 */
.pg-mark { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 13.5px; letter-spacing: .04em; color: var(--faint); }
.pg-mark::before, .pg-mark::after { content: ''; flex: 1; border-top: 1px dashed var(--line); }
/* ── 누르는 기준: 글칸 = 글 쓰기, 테두리 = 세부.
   마우스를 따라 테두리를 그리지 않는다 (겹친 항목 · 블록 · 섹션 사이에서 왔다 갔다 해서 정신없음).
   손가락 커서 + 항목에만 아주 옅은 바탕. 고른 것만 실선 */
.doc .blk, .doc .bk, .doc .dsec { cursor: pointer; }
.doc input, .doc textarea { cursor: text; }
.doc .blk:hover, .doc .bk:hover { border-color: transparent; }
.doc .blk.card:hover, .collabs .blk.chip:hover { border-color: var(--line); }
.doc .blk:not(.sel):hover { background-color: color-mix(in srgb, var(--fg) 3%, transparent); }
.doc .blk.sel, .doc .bk.sel { outline: 2px solid var(--tc, var(--accent)); outline-offset: 2px; }
.doc .dsec.sel { outline: 1px solid var(--tc, var(--accent)); outline-offset: 8px; }
.mtx tr.blk:hover td { background: color-mix(in srgb, var(--fg) 3%, transparent); }
.mtx tr.blk.sel td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bk.drop-before { box-shadow: 0 -3px 0 0 var(--accent); }
.bk.drop-after { box-shadow: 0 3px 0 0 var(--accent); }
.bk.moving { opacity: .35; }
.bk-hdl { display: inline-block; margin-right: 6px; padding: 0 2px; opacity: .5; }
.bk:hover .bk-hdl { opacity: 1; }
/* 협업 작가 칩도 항목 (끌어서 순서 · ✕) */
.collabs .blk.chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--pill); }
.blk.chip .hdl { display: none; }
.blk.chip .blk-in { display: flex; }
.blk.chip .collab { border: 0; }
.ws-list-hint { margin: 4px 8px 6px; font-size: 13.5px; color: var(--faint); }
.ws-ins .toggles button { font-size: 14px; min-height: 32px; }
/* 페이지의 항목 · 블록을 끄는 동안: 왼쪽 목록이 "빼기" 자리로 */
.ws-side { position: relative; }
.ed.pulling .ws-side::after { content: '여기 놓으면 빼요'; position: absolute; inset: 10px; z-index: 3; display: grid; place-items: center; border: 2px dashed color-mix(in srgb, var(--err) 60%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--err); font-size: 15px; pointer-events: none; }
.ed.pulling .ws-side.out-over::after { border-color: var(--err); background: color-mix(in srgb, var(--err) 12%, var(--bg)); }
/* 알림의 되돌리기 */
.toast:has(button).show { pointer-events: auto; }
.toast button { margin-left: 10px; padding: 2px 12px; border: 1px solid currentColor; border-radius: var(--pill); background: none; color: inherit; font-size: 14px; font-weight: 600; }
/* 자동 세팅: 고른 것 표시 */
.ins-choices button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.ws-ins .cta:disabled { opacity: .45; cursor: default; }
/* 되돌리기 · 다시 하기 */
.ws-hist { display: inline-flex; gap: 4px; }
.ws-hist .btn { min-width: 40px; padding: 0 10px; font-size: 17px; }
.ws-hist .btn:disabled { opacity: .35; cursor: default; }
/* 저장 상태 = 저장 버튼 (글자처럼 보이고, 누르면 바로 저장) */
.ws-sub button.saved { padding: 0; border: 0; background: none; font: inherit; color: var(--faint); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.ws-sub button.saved:hover { color: var(--fg); }
.ws-sub button.saved.bad-save { color: var(--err); }
/* 블록 제목줄 안내 · 손잡이는 마우스에 따라 나타났다 사라지지 않게 (안내는 오른쪽 칸에) */
.bk-hint { display: none; }
.bk-hdl, .bk:hover .bk-hdl { opacity: .45; }
/* FAQ: 질문을 누르면 답이 펼쳐짐 (움직임 없이) */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 2px; font-size: 16px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--faint); }
.faq details[open] > summary::after { content: '−'; }
.faq details > p { margin: 0 0 14px; padding: 0 2px; color: var(--dim); font-size: 15px; }
.modal-box .faq { margin: 4px 0 8px; }
/* 문의하기 · 공지 먼저 읽기 */
span.to-notice { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; border: 0; padding: 0; }
span.to-notice a, span.to-notice button { font-size: inherit; color: var(--cc, var(--c)); border-bottom: 1px solid color-mix(in srgb, var(--cc, var(--c)) 40%, transparent); padding: 0 0 2px; background: none; border-top: 0; border-left: 0; border-right: 0; text-decoration: none; }
span.to-notice a:hover, span.to-notice button:hover { border-bottom-color: var(--cc, var(--c)); }
.ask-line { margin: 0 0 14px; font-size: 14.5px; color: var(--dim); }
.ask-line .textlink { color: var(--cc, var(--c)); }
#ask-out:not(:empty) { margin: 6px 0 4px; }
/* 비교표: 열은 오른쪽 끝 "+", 행은 아래 "+" (늘리고 싶은 자리에서 바로) */
.mtx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 6px; }
.mtx-addcol, .mtx-addrow { border: 1px dashed var(--line); border-radius: 10px; background: none; color: var(--faint); font-size: 16px; transition: color .15s, border-color .15s; }
.mtx-addcol:hover, .mtx-addrow:hover { color: var(--fg); border-color: var(--accent); }
.mtx-addrow { grid-column: 1; height: 32px; }
/* 비교표 칸 폭: 구성 칸이 조금 넓고, 값 칸은 나머지를 나눔, 맨 끝 ✕ 칸은 고정 */
.mtx col.c-label { width: 28%; }
.mtx col.c-x { width: 38px; }
.mtx td:last-child { padding: 0 4px; text-align: center; }
.mtx td:last-child .blk-x { width: 26px; height: 26px; }
/* 화면이 좁으면 왼쪽 · 오른쪽 칸을 줄여 가운데 페이지를 넓게 */
.ws-body { grid-template-columns: clamp(220px, 18vw, 264px) minmax(0, 1fr) clamp(290px, 24vw, 340px); }
@media (max-width: 1199px) { .ws-body { grid-template-columns: 220px minmax(0, 1fr); } }
.ws-list .tool .tl { font-size: 14px; color: var(--accent); }
/* FAQ "더 보기": 처음 3개 다음 나머지 (움직임 없이 바로) */
.faq .faq-more { border-bottom: 0; }
.faq .faq-more[open] > summary { border-bottom: 1px solid var(--line); }
.faq .faq-more > summary { justify-content: center; padding: 12px 2px; font-size: 14.5px; color: var(--cc, var(--c, var(--accent))); }
.faq .faq-more > summary::after, .faq .faq-more[open] > summary::after { content: none; }
.faq .faq-more .m-close, .faq .faq-more[open] .m-open { display: none; }
.faq .faq-more[open] .m-close { display: inline; }
/* ── 운영 화면 (SPEC 4-8) */
.adm { padding-bottom: 80px; }
.adm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 8px; }
.adm-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.adm-tabs a { white-space: nowrap; padding: 8px 16px; border-radius: var(--pill); color: var(--dim); font-size: 15px; }
.adm-tabs a:hover, .adm-tabs a[aria-current="page"] { color: var(--fg); background: var(--surface); }
.adm-subnav { display: flex; gap: 2px; margin: -8px 0 22px; border-bottom: 1px solid var(--line); }
.adm-subnav a { padding: 8px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--dim); font-size: 14px; white-space: nowrap; }
.adm-subnav a:hover { color: var(--fg); }
.adm-subnav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }
.adm-sec { display: flex; flex-direction: column; gap: 14px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.adm-sec h1 { margin: 0; font-size: 30px; }
.adm-sec h2 { margin: 0; font-size: 20px; display: flex; align-items: center; gap: 10px; }
.adm-sec .sub { margin: 0; color: var(--dim); font-size: 15px; }
.adm-two { display: flex; flex-wrap: wrap; gap: 12px; }
.adm-two form { display: flex; flex-direction: column; gap: 6px; }
.adm-two small { font-size: 13.5px; color: var(--faint); }
.adm .code-box { align-items: stretch; max-width: 620px; }
.adm-link { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; font-size: 14.5px; }
.adm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.adm-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.adm-list li.off { opacity: .6; }
.adm-list .adm-main { flex: 1 1 200px; min-width: 0; }
.adm-list form { margin: 0; }
.adm-kind { padding: 2px 10px; border: 1px solid var(--line); border-radius: var(--pill); font-size: 13.5px; color: var(--dim); }
.mono { font-family: var(--font); }
.adm-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.adm-row input, .adm-row select { min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; font-size: 15px; }
.adm-row input { flex: 1 1 160px; min-width: 0; }
.adm-row select { flex: 0 1 auto; max-width: 100%; }
.adm-list.tpl li { flex-direction: column; align-items: stretch; gap: 8px; }
.adm-list.tpl .meta input[name="name"] { flex-basis: 200px; }
.adm-blocks { font-size: 14px; }
.adm-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.adm-acts .btn { min-height: 38px; font-size: 14.5px; border-radius: var(--pill); }
.adm-acts .textlink:disabled { opacity: .35; text-decoration: none; }
/* 템플릿 줄: 이름 · 분야 · 역할 · 저장을 한 줄에 (좁으면 줄바꿈) */
.adm-row select { width: auto; flex: 0 0 auto; }
.adm-row input { width: auto; }
.adm-list.tpl .meta input[name="name"] { flex: 2 1 180px; }
.adm-list.tpl .meta input[name="role"] { flex: 1.5 1 150px; }
/* 공개 상태 작은 표시 (위 한 줄) */
.ws-need { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--pill); background: none; font-size: 14px; white-space: nowrap; color: var(--dim); }
.ws-need.miss { color: var(--busy); border-color: color-mix(in srgb, var(--busy) 40%, var(--line)); }
.ws-need.ok, .ws-need.on { color: var(--accent); }
.ws-need:hover { border-color: currentColor; }
.adm .textlink.danger:hover { color: var(--err); }
.adm-form { max-width: 560px; }
.adm-ok { margin: 0; color: var(--accent); }
.ws-note-url { margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); font-size: 14.5px; word-break: break-all; user-select: all; }
/* 2단계 인증 */
.mfa-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; color: var(--dim); font-size: 15px; }
.mfa-steps b { color: var(--fg); }
.mfa-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.mfa-qr img { border-radius: 12px; background: #fff; }
.mfa-key { display: inline-block; margin-top: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--fg); letter-spacing: .06em; user-select: all; }
.mfa-codes { margin: 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); font-family: var(--font); font-size: 17px; line-height: 1.9; letter-spacing: .08em; max-width: 320px; }
.adm-lock { font-size: 14px; }
/* 밝게 / 어둡게 버튼 (JIHO MIX와 같은 모양, 움직임 없이 해 ↔ 달만 바뀜) */
.theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; padding: 0; border: 1px solid var(--line); border-radius: var(--pill); background: none; color: var(--fg); cursor: pointer; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { position: absolute; width: 17px; height: 17px; }
/* 지금 테마의 아이콘만 (어두우면 달, 밝으면 해) */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
.top .inner .theme-toggle { margin-left: 4px; }
.top .nav { margin-left: auto; }
@media (max-width: 420px) {
  /* 아주 좁은 화면: 로고 · 해/달 버튼이 첫 줄, 메뉴가 둘째 줄 */
  .top .inner .theme-toggle { order: 1; margin-left: auto; }
  .top .nav { order: 2; margin-left: 0; }
}
/* 휴대폰: 내려갈 땐 위 메뉴가 숨고 섹션 탭이 맨 위로 (public/site.js가 body.top-off) */
@media (max-width: 720px) {
  .top, .secnav { transition: translate .3s cubic-bezier(.2, .7, .2, 1); }
  body.top-off .top { translate: 0 -100%; }
  body.top-off .secnav { translate: 0 calc(-1 * var(--top-h, 64px)); }
}
@media (prefers-reduced-motion: reduce) { .top, .secnav { transition: none; } }
/* 처음 한 번만 뜨는 사용법 안내 */
.first-tip { position: relative; padding: 12px 40px 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.first-tip .hint { margin: 0; }
.first-tip .ws-back { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; font-size: 11px; }
/* 자동으로 정해지는 값: 칸처럼 안 보이게 */
.auto-tag { margin-left: 6px; padding: 0 7px; border: 1px solid var(--line); border-radius: var(--pill); font-size: 12px; letter-spacing: 0; color: var(--faint); vertical-align: 1px; }
.ed-sum .auto-val { color: var(--faint); font-size: 16px; cursor: default; }
/* 밝게/어둡게 바꿀 때 한 번 (SPEC 3장): 화면 전체가 0.5초 동안 잔잔하게 겹쳐 바뀜. 밝아지는 번쩍임 없이 (plus-lighter 대신 normal) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: ease; mix-blend-mode: normal; }
/* View Transitions가 없는 브라우저: 짧은 색 전환 */
.theme-fade, .theme-fade * { transition: background-color .4s ease, color .4s ease, border-color .4s ease !important; }
/* 신청 기록 메일 안내 */
.rec-note { margin: 0; font-size: 14px; }
.rec-note b { color: var(--fg); font-weight: 600; }
.ticks li.warn small { color: var(--busy); }
.demo-bar { border-color: color-mix(in srgb, var(--busy) 50%, var(--line)); color: var(--busy); }
.demo-row { gap: 8px 16px; }
/* 라이트(종이)에서만: 카드 · 그림이 종이 위에 놓인 인쇄물처럼 옅은 그림자 (다크는 --shadow: none) */
.cat-pill, .wall, .stage, .pcard .thumb, .acard, .opt, .prod, .ngroup, .cmp-wrap { box-shadow: var(--shadow); }
/* 편집기: 라이트에선 회색 책상 위 흰 종이 (다크는 그대로) */
.ws-canvas { background: var(--desk, transparent); }
.ws-canvas .doc { background: var(--paper, var(--surface)); }
/* 라이트: 포인트 버튼에 같은 색 빛번짐 (다크는 --cta-glow: none) */
.cta { box-shadow: var(--cta-glow); }

/* Account (SPEC 4-7): 인사 + 탭(폴더처럼 판에 붙음) + 판 안의 표 + 맨 아래 로그아웃 */
.acct { display: grid; gap: 0; padding-block: clamp(36px, 7vw, 80px); justify-items: start; }
.acct > * { width: 100%; }
.acct h1 { margin: 0 0 28px; font-family: var(--font-display); font-size: clamp(34px, 5.5vw, 56px); line-height: 1.12; }
.acct-tabs { display: flex; flex-wrap: wrap; gap: 2px; }
.acct-tabs a { padding: 14px 24px; border-radius: var(--radius) var(--radius) 0 0; color: var(--dim); font-size: 17px; transition: color .2s, background-color .2s; }
.acct-tabs a:hover { color: var(--fg); }
.acct-tabs a[aria-current="page"] { color: var(--fg); background: var(--surface); }
.acct-panel { display: grid; gap: 20px; padding: clamp(16px, 3vw, 28px); background: var(--surface); border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg); }
.acct-panel > p { margin: 0; }
.acct-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.acct-box h2 { margin: 0; padding: 20px 26px; font-size: 22px; border-bottom: 1px solid var(--line); }
.acct-box > p { margin: 0; padding: 22px 26px; font-size: 16px; }
.acct-table { width: calc(100% - 52px); margin: 8px 26px 18px; border-collapse: collapse; font-size: 17px; }
.acct-table th { text-align: left; font-weight: 600; font-size: 15.5px; color: var(--dim); padding: 14px 16px 12px 0; border-bottom: 1px solid var(--fg); white-space: nowrap; }
.acct-table td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.acct-table tr:last-child td { border-bottom: 0; }
.acct-table td .status { font-size: inherit; }
.acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.acct-actions form { margin: 0; }
.acct-note { font-size: 14.5px; }
.acct > form { margin-top: 16px; width: auto; }
@media (max-width: 640px) {
  .acct-tabs a { padding: 11px 13px; font-size: 15px; }
  .acct-table { width: calc(100% - 32px); margin: 4px 16px 10px; font-size: 16px; }
  .acct-box h2 { padding: 16px; font-size: 19px; }
  .acct-table thead { display: none; }
  .acct-table tr { display: grid; padding-block: 8px; border-bottom: 1px solid var(--line); }
  .acct-table tr:last-child { border-bottom: 0; }
  .acct-table td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 5px 0; border: 0; overflow-wrap: anywhere; }
  .acct-table td::before { content: attr(data-label); color: var(--faint); font-size: 13.5px; }
}

/* 운영 화면 프리셋 (SPEC 4-4): 프리셋마다 카드 · "작가가 고르면 →" 미리보기 한 줄 · 고치기는 접힘 · 칸마다 이름과 설명 */
.pst { display: grid; gap: 12px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.pst-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.pst-head b { font-size: 17px; }
.pst-acts { display: flex; align-items: center; gap: 14px; }
.pst-acts form { margin: 0; }
.pst-acts .textlink:disabled { opacity: .35; text-decoration: none; }
.pst-prev { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg); }
.pst-edit summary { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 14.5px; cursor: pointer; list-style: none; }
.pst-edit summary::-webkit-details-marker { display: none; }
.pst-edit summary::after { content: "▾"; font-size: 12.5px; }
.pst-edit[open] summary::after { content: "▴"; }
.pst-edit[open] summary { margin-bottom: 14px; color: var(--fg); }
.pst-edit form, .pst-new { display: grid; gap: 16px; justify-items: start; }
.pst-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 16px; width: 100%; }
.pst-f { display: grid; grid-template-rows: 1fr auto; gap: 6px; } /* 설명이 없는 칸도 입력칸이 같은 줄에 */
.pst-f > span { font-size: 14.5px; color: var(--fg); }
.pst-f small, .pst-show small { display: block; font-size: 12.5px; color: var(--faint); font-weight: 400; }
.pst-f input, .pst-f select { min-height: 42px; padding: 0 12px; font-size: 15px; }
.pst-show { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; width: 100%; }
.pst-show legend { padding: 0; margin-bottom: 8px; font-size: 14.5px; }

/* 운영 화면 사이트 설정의 구독 칸 · 작가 목록의 구독 상태 (SPEC 4-9) */
.adm-sub { display: grid; gap: 14px; margin: 6px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.adm-sub legend { padding: 0 6px; font-size: 15px; }
.adm-sub legend small { margin-left: 8px; font-size: 13.5px; color: var(--faint); }
.adm-sub-st { font-size: 14.5px; }
.adm-price { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.adm-price input, .adm-price select { height: 54px; }
.adm-note { margin: -4px 0 0; font-size: 13.5px; }

/* 운영자가 작가로 들어가 있을 때 맨 위 띠 (SPEC 4-8) */
.as-bar { background: var(--surface); border-bottom: 1px solid var(--line); font-size: 14.5px; }
.as-bar .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; padding-block: 10px; }
.as-bar form { margin: 0; }
.acct-ok { margin: 0; padding: 14px 18px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 15.5px; }
.acct-ok a { color: var(--accent); text-decoration: underline; }
.acct-warn { margin: 0; padding: 14px 18px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--busy) 50%, var(--line)); font-size: 15.5px; }
.acct-sub-h { margin: 6px 26px 0; font-size: 15.5px; color: var(--dim); }
.acct-form { display: grid; gap: 0; }
.acct-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; padding: 20px 26px 4px; }
.acct-form .acct-actions { padding: 14px 26px 22px; }
.adm-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 8px; flex: none; }
.adm-import { display: grid; gap: 12px; justify-items: start; margin-top: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.adm-import h3 { margin: 0; font-size: 16px; }
.adm-import h3 small { margin-left: 8px; font-size: 13.5px; font-weight: 400; }
.adm-import .adm-price { width: 100%; }
.adm-import input[type="file"] { min-height: 54px; }
.btn.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, var(--line)); }
.adm-sec > .btn { align-self: flex-start; }

/* Beta 표시 (로고 옆) · Account 첫 사용 체크리스트 */
.beta-badge { display: inline-block; margin-left: 8px; padding: 1px 7px; border: 1px solid var(--line); border-radius: var(--pill); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--dim); vertical-align: 2px; }
.acct-steps h2 small { margin-left: 8px; font-size: 14.5px; font-weight: 400; }
.acct-steps ol { list-style: none; margin: 0; padding: 10px 26px 18px; display: grid; gap: 4px; }
.acct-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 0; color: var(--dim); }
.acct-steps li a { color: inherit; font-size: 16.5px; }
.acct-steps li small { display: block; font-size: 13.5px; color: var(--faint); }
.acct-step-n { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 14px; }
.acct-steps li.done .acct-step-n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.acct-steps li.done a { text-decoration: line-through; text-decoration-color: var(--faint); }
.acct-steps li.now { color: var(--fg); }
.acct-steps li.now .acct-step-n { border-color: var(--accent); color: var(--accent); }
.acct-steps li.now a { text-decoration: underline; text-underline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.adm-r2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.adm-r2 form { margin: 0; }
.adm-cnt { font-variant-numeric: tabular-nums; }

/* 견적 창 (작가 페이지): 아이콘 → 옮기고 · 크기 바꾸고 · 접는 창 */
.qw-dot { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 22px 0 18px; border: 0; border-radius: var(--pill); background: var(--accent); color: var(--on-accent); font: inherit; font-size: 16px; font-weight: 700; box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--accent) 60%, transparent), 0 2px 8px rgba(0, 0, 0, .25); cursor: pointer; }
.qw-dot span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--on-accent); color: var(--accent); font-size: 16px; }
.qw-dot:hover { filter: brightness(1.08); }
.qw-dot { transition: opacity .25s, translate .25s; }
.qw-dot.qw-away { opacity: 0; translate: 0 16px; pointer-events: none; }
@media (min-width: 720px) { .qw-dot { top: calc(50% - 27px); bottom: auto; } } /* 컴퓨터: 오른쪽 가운데 (아래는 눈에 덜 띔, Jiho 2026-10-31) · 휴대폰은 엄지 닿는 아래 */
.secnav .go-quote { margin-left: auto; padding: 8px 16px; border: 1.5px solid var(--accent); border-radius: var(--pill); background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.secnav .go-quote:not([hidden]) + .go-apply { margin-left: 8px; }
.secnav .go-quote:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.qw { position: fixed; right: 20px; bottom: 20px; z-index: 41; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 40px)); min-width: 260px; min-height: 48px; resize: both; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.qw[hidden], .qw-dot[hidden] { display: none; }
.qw.min { height: auto !important; resize: none; }
.qw.min .qw-body { display: none; }
.qw-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); cursor: move; touch-action: none; user-select: none; }
.qw-mini { margin-left: auto; margin-right: 8px; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--accent); }
.qw:not(.min) .qw-mini { display: none; }
.qw.min .qw-head { cursor: pointer; border-bottom: 0; }
.qw-head button { width: 32px; height: 32px; border: 0; background: none; color: var(--dim); font-size: 18px; cursor: pointer; border-radius: var(--radius); }
.qw-head button:hover { color: var(--fg); }
.qw-body { flex: 1; overflow: auto; padding: 2px 16px 16px; }
/* 탭 둘: 구성 만들기 · 담은 것 */
.qw-tabs { display: flex; padding: 0 16px; border-bottom: 1px solid var(--line); }
.qw-tabs button { flex: 1; padding: 10px 0 9px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--dim); font: inherit; font-size: 14px; cursor: pointer; }
.qw-tabs button[aria-selected="true"] { color: var(--fg); font-weight: 600; border-bottom-color: var(--accent); }
.qw-tabs b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: var(--pill); background: var(--accent); color: var(--on-accent); font-size: 11.5px; font-weight: 700; }
.qw.min .qw-tabs, .qw.min .qw-foot { display: none; }
.qw-k { margin: 16px 0 6px; font-size: 12px; color: var(--dim); letter-spacing: .02em; }
/* 목록: 한 묶음 안에 가는 구분선 (줄마다 테두리 대신) */
.qw-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.qw-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; font-size: 14.5px; }
.qw-row + .qw-row { border-top: 1px solid var(--line); }
.qw-row input[type="radio"], .qw-row input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: var(--accent); }
.qw-row label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.qw-row > span:not(.qw-p):not(.qw-step) { flex: 1; }
.qw-nm { min-width: 0; }
.qw-nm small { display: block; font-size: 12px; color: var(--dim); }
.qw-row.on { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.qw-row.full { opacity: .5; cursor: not-allowed; }
.qw-slots.qw-in { animation: qw-pop .35s cubic-bezier(.2, .7, .2, 1) both; } /* 고르면 기간 고르기가 아래에서 떠오름 */
@keyframes qw-pop { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .qw-slots.qw-in { animation: none; } }
.qw-row.qw-hit { outline: 2px solid var(--accent); outline-offset: -2px; }
.qw-p { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qw-p small { display: block; font-size: 11.5px; color: var(--dim); }
.qw-step { display: inline-flex; align-items: center; gap: 4px; }
.qw-row:has(.qw-step) { flex-wrap: wrap; }
.qw-row .qw-step { order: 3; flex-basis: 100%; justify-content: flex-end; } /* 개수는 아래 줄 오른쪽 (이름이 쪼개지지 않게) */
.qw-step button { width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--fg); font-size: 14px; line-height: 1; cursor: pointer; }
.qw-step button:hover { border-color: var(--accent); }
.qw-step .qw-n { width: 3.4em; height: 26px; min-height: 0; padding: 0 2px; border: 1px solid var(--line); border-radius: var(--radius); background: none; color: var(--fg); font-size: 14px; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; } /* 개수 직접 적기 (분 · 초처럼 많을 때) */
.qw-step .qw-n::-webkit-inner-spin-button, .qw-step .qw-n::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qw-step i { min-width: 1.2em; font-style: normal; font-size: 12.5px; color: var(--dim); }
/* 신청 양식 "작성 예시 보기" (작가가 질문마다 적은 예시 답을 한 장으로) */
.ap-ex { margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ap-ex summary { padding: 11px 14px; cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--accent); }
.ap-ex dl { display: grid; gap: 0; margin: 0; padding: 0 14px; border-top: 1px solid var(--line); }
.ap-ex dl div { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 4px 14px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.ap-ex dt { color: var(--accent); font-size: 13.5px; }
.ap-ex dd { margin: 0; font-size: 14.5px; }
.ap-ex p { margin: 0; padding: 9px 14px 12px; font-size: 13px; }
@media (max-width: 520px) { .ap-ex dl div { grid-template-columns: minmax(0, 1fr); } }
.qw-p .per, .addons .per { margin-right: 4px; font-size: 12.5px; color: var(--faint); } /* 단위: 분당 · 10개당 */
.qw-p small.per { margin: 0; }
/* 이 구성 내역 · 계산식 (만들기 탭 아래) */
.qw-now { margin-top: 4px; }
.qw-now ul { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.qw-now li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; color: var(--dim); font-variant-numeric: tabular-nums; }
.qw-math { margin: 6px 0 0; font-family: var(--font-display), monospace; font-size: 12px; line-height: 1.6; color: var(--faint); overflow-wrap: anywhere; }
/* 담은 것: 구성마다 한 장 */
.qw-cart { list-style: none; margin: 12px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.qw-cart li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 8px; padding: 10px 6px 10px 12px; }
.qw-cart li + li { border-top: 1px solid var(--line); }
.qw-cn { font-size: 14.5px; }
.qw-cart b { font-weight: 600; font-variant-numeric: tabular-nums; }
.qw-c2 { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding-right: 6px; }
.qw-c2 small { flex: 1; font-size: 12.5px; color: var(--dim); }
.qw-edit { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; }
.qw-edit:hover { text-decoration: underline; }
.qw-x { width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--faint); font-size: 16px; cursor: pointer; }
.qw-x:hover { color: var(--err); }
.qw-empty { margin: 24px 0 8px; text-align: center; color: var(--dim); font-size: 14px; }
.qw-more { width: 100%; margin-top: 8px; padding: 9px; border: 1px dashed var(--line); border-radius: var(--radius); background: none; color: var(--dim); font: inherit; font-size: 13.5px; cursor: pointer; }
.qw-more:hover { color: var(--accent); border-color: var(--accent); }
.qw-note { margin: 8px 0 0; font-size: 12.5px; }
/* 아래 줄: 금액 + 버튼 하나 (늘 보임) */
.qw-foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.qw-sum { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.qw-sum small { font-size: 12px; color: var(--dim); }
.qw-sum b { font-size: 19px; font-variant-numeric: tabular-nums; }
.skin[data-frame="grid"] .qw-sum b { font-family: var(--font-display); font-weight: 300; font-size: 22px; }
.qw-foot .cta { flex: none; min-height: 42px; padding: 0 20px; }
.quote-line { white-space: pre-line; font-variant-numeric: tabular-nums; line-height: 1.7; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: var(--radius); font-size: 14.5px; }

/* 작가 테스트 (?preview&test) */
.qt-bar { position: fixed; left: 20px; bottom: 20px; z-index: 42; width: min(380px, calc(100vw - 40px)); max-height: 46vh; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--accent); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.qt-bar > .dim { grid-column: 1 / -1; grid-row: 2; font-size: 13px; }
.qt-bar .cta { min-height: 36px; padding: 0 16px; font-size: 14px; }
.qt-log { grid-column: 1 / -1; margin: 4px 0 0; padding: 0; list-style: none; overflow: auto; max-height: 30vh; font-size: 13px; font-variant-numeric: tabular-nums; }
.qt-log:empty { display: none; }
.qt-log li { padding: 1px 0; color: var(--dim); }
.qt-log li.qt-case { color: var(--fg); font-weight: 600; margin-top: 6px; }
.qt-log li.qt-bad { color: var(--err); }

/* 작가 페이지 꾸미기 D1 (docs/DESIGN.md · public/design.js): .skin 안에서만 사이트 토큰을 작가 값으로 다시 정의.
   위 헤더 · 탭 줄 · 견적 창은 .skin 밖이라 그대로 */
.skin[data-skin="1"] { background: var(--bg); color: var(--fg); font-family: var(--font); padding: 0 max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); } /* .gutter 여백까지 바탕이 꽉 차게 */
:is(.skin, .ws-canvas .doc)[data-bg="gradient"] { background: linear-gradient(170deg, var(--bg) 0%, var(--d-soft) 100%); }
:is(.skin, .ws-canvas .doc)[data-bg="dots"] { background: radial-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 1.6px, transparent 2.2px) 0 0 / 22px 22px, var(--bg); }
:is(.skin, .ws-canvas .doc)[data-bg="grid"] { background: linear-gradient(color-mix(in srgb, var(--fg) 7%, transparent) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, color-mix(in srgb, var(--fg) 7%, transparent) 1px, transparent 1px) 0 0 / 28px 28px, var(--bg); }
:is(.skin, .ws-canvas .doc)[data-bg="glow"] { background: radial-gradient(42% 38% at 0% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), radial-gradient(48% 42% at 100% 55%, color-mix(in srgb, var(--d-deep, var(--accent)) 26%, transparent), transparent 72%), var(--bg); } /* 빛 번짐: 모서리 빛 두 덩이 (움직이지 않음) */
/* 섹션 경계 모양: 섹션 위쪽에 포인트 색 띠 */
:is(.skin, .doc)[data-edge]:not([data-edge="none"]) :is(.asec ~ .asec, .dsec ~ .dsec) { position: relative; }
:is(.skin, .doc)[data-edge]:not([data-edge="none"]) :is(.asec ~ .asec, .dsec ~ .dsec)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--accent); opacity: .5; }
:is(.skin, .doc)[data-edge="line"]:not([data-edge="none"]) :is(.asec ~ .asec, .dsec ~ .dsec)::before { height: 1px; opacity: .35; } /* :not까지 붙여야 위 기본 규칙(14px)보다 셈 — 없으면 직선이 굵은 막대로 나옴 */
:is(.skin, .doc)[data-edge="wave"] :is(.asec ~ .asec, .dsec ~ .dsec)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Cpath d='M0 7 Q10 0 20 7 T40 7' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") repeat-x 0 0 / 40px 14px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Cpath d='M0 7 Q10 0 20 7 T40 7' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") repeat-x 0 0 / 40px 14px; }
:is(.skin, .doc)[data-edge="cloud"] :is(.asec ~ .asec, .dsec ~ .dsec)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 14 A14 14 0 0 1 28 14 Z' fill='black'/%3E%3C/svg%3E") repeat-x 0 0 / 28px 14px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 14 A14 14 0 0 1 28 14 Z' fill='black'/%3E%3C/svg%3E") repeat-x 0 0 / 28px 14px; opacity: .25; }
:is(.skin, .doc)[data-edge="zigzag"] :is(.asec ~ .asec, .dsec ~ .dsec)::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14'%3E%3Cpath d='M0 12 L10 2 L20 12' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") repeat-x 0 0 / 20px 14px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14'%3E%3Cpath d='M0 12 L10 2 L20 12' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") repeat-x 0 0 / 20px 14px; }
/* 버튼 · 카드 모양 */
.skin[data-btn="offset"] :is(.cta, .opt, .btn) { box-shadow: 4px 4px 0 var(--d-deep); border: 1.5px solid var(--d-deep); }
.skin[data-btn="outline"] .cta { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.skin[data-skin="1"] .cta { box-shadow: none; }
.skin[data-btn="offset"] .cta { box-shadow: 4px 4px 0 var(--d-deep); }
/* 편집기 디자인 칸 */
.dz-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dz-themes button { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 64px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--fg); font-size: 14px; text-align: left; cursor: pointer; }
.dz-themes button[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.dz-sw { display: flex; gap: 4px; }
.dz-sw i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(127, 127, 127, .35); }
.dz-imgs { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-imgs button { width: 52px; height: 52px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: none; cursor: pointer; }
.dz-imgs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-color { display: grid; grid-template-columns: 5em 40px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 14px; color: var(--dim); }
.dz-color input[type="color"] { width: 40px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.dz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-chips button { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--pill); background: none; color: var(--fg); font-size: 13.5px; cursor: pointer; }
.dz-chips button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.dz-warn { margin: 0; font-size: 13px; color: var(--err); }

/* 꾸미기 덱 조각 (DESIGN 0장) — 작가 본문(.skin) 안에서만 */
:is(.skin, .ws-canvas .doc)[data-pat="1"] { position: relative; isolation: isolate; }
:is(.skin, .ws-canvas .doc)[data-pat="1"]::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pat) repeat 0 0 / var(--pat-size) auto; opacity: var(--pat-op); pointer-events: none; }
/* 무늬 움직임 (design.pat.move): 무늬 위치만 옮김. 칸 크기의 배수(멀리)만큼 가서 되돌아오니 이음매가 안 보임 (정사각 무늬면 완전히). 움직임 줄이기면 멈춤 */
[data-patmove="rain"] { --to: calc(-20 * var(--pat-size)) calc(60 * var(--pat-size)); --pat-dur: 18s; }
[data-patmove="snow"] { --to: calc(4 * var(--pat-size)) calc(20 * var(--pat-size)); --pat-dur: 90s; }
[data-patmove="drift"] { --to: calc(-20 * var(--pat-size)) 0; --pat-dur: 200s; }
[data-patmove="rise"] { --to: 0 calc(-20 * var(--pat-size)); --pat-dur: 160s; }
@media (prefers-reduced-motion: no-preference) {
  :is(.skin, .ws-canvas .doc):not([data-patmove=""])[data-patmove]::before, [data-patmove]:not([data-patmove=""]) .pat-over::before { animation: pat-move var(--pat-dur) linear infinite; }
}
@keyframes pat-move { to { background-position: var(--to); } }
/* 대표 그림 위에도 무늬 (pat.on = all): 사진 위로 비가 내리는 것처럼. z 1 = 움직이는 사진(확대 등)보다 위, 이름 글(z 1, 뒤에 옴)보다 아래 */
:is(.khero, .d-hero).pat-over::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--pat) repeat 0 0 / var(--pat-size) auto; opacity: min(1, calc(var(--pat-op) * 3)); mix-blend-mode: screen; pointer-events: none; }
.skin .asec { position: relative; overflow: clip; overflow-clip-margin: 24px; container-type: inline-size; } /* 스티커 세로 자리 = 섹션 너비 기준(cqw) */
/* 대표 그림 */
.khero { position: relative; flex: none; border-radius: var(--radius-lg); overflow: hidden; }
.khero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.khero-full { aspect-ratio: 16 / 8; max-height: 62vh; margin-inline: calc(-1 * clamp(0px, 3vw, 40px)); }
.khero-frame { aspect-ratio: 16 / 9; }
.khero-full::after, .khero-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--bg) calc(var(--dim) * 100%), transparent), transparent 60%); pointer-events: none; }
.khero.cn-none { border-radius: 0; }
.khero.cn-cut { border-radius: 0 var(--radius-lg) 120px 0; }
.khero > .me-name { position: absolute; z-index: 1; padding: clamp(16px, 3vw, 40px); max-width: 100%; text-shadow: 0 0 1.4em color-mix(in srgb, var(--bg) 70%, transparent), 0 1px 2px color-mix(in srgb, var(--bg) 50%, transparent); } /* 사진 위 이름: 밝은 테마 · "아래쪽 어둡게" 0이어도 읽히게 */
.khero.pos-bl > .me-name { left: 0; bottom: 0; }
.khero.pos-bc > .me-name { left: 0; right: 0; bottom: 0; justify-content: center; text-align: center; }
.khero.pos-br > .me-name { right: 0; bottom: 0; text-align: right; justify-content: flex-end; }
.khero.pos-c > .me-name { inset: 0; display: grid; place-content: center; text-align: center; }
.khero-side { position: absolute; right: 0; top: 0; bottom: 0; width: 42%; border-radius: 0; overflow: visible; z-index: 0; pointer-events: none; }
.khero-side img { object-fit: contain; object-position: right bottom; }
.khero-side ~ .me { position: relative; z-index: 1; max-width: 60%; }
@media (max-width: 720px) { .khero-side { position: relative; width: 100%; height: 320px; } .khero-side ~ .me { max-width: none; } }
/* 이름 연출 */
.me-name > .name-sub { flex-basis: 100%; }
.name-sub { display: block; font-size: 13px; letter-spacing: .4em; color: var(--accent); margin-bottom: 6px; overflow-wrap: anywhere; }
@media (max-width: 640px) { .name-sub { font-size: 11.5px; letter-spacing: .25em; } }
.me-name.fx-wide h1 { font-size: clamp(48px, 11vw, 168px); line-height: .95; letter-spacing: -.03em; }
.me-name.fx-vertical { position: absolute; right: clamp(8px, 3vw, 40px); top: 0; z-index: 2; writing-mode: vertical-rl; }
.me-name.fx-vertical h1 { font-size: clamp(48px, 9vw, 140px); line-height: 1; letter-spacing: -.02em; }
.me-name.fx-vertical .name-sub { margin: 0 0 0 10px; }
.me-name.fx-outline h1 { color: transparent; -webkit-text-stroke: 2px var(--fg); font-size: clamp(44px, 8vw, 120px); }
.me-name.fx-grad h1 { background: linear-gradient(120deg, var(--accent), var(--d-deep, var(--brand-2))); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(44px, 8vw, 120px); }
@media (max-width: 720px) { .me-name.fx-vertical { position: static; writing-mode: horizontal-tb; } }
/* 스티커 */
.deco { position: absolute; height: auto; transform: rotate(var(--rot, 0deg)); pointer-events: none; user-select: none; }
@media (max-width: 640px) { .deco.mo-small { scale: .6; } .deco.mo-hide { display: none; } }
/* 움직임 (SPEC 3장: 작가 본문만 · transform/opacity만 · 움직임 줄이기면 끔) */
@media (prefers-reduced-motion: no-preference) {
  .an-float { animation: dz-float 5s ease-in-out infinite; }
  .an-sway { animation: dz-sway 6s ease-in-out infinite; transform-origin: 50% 90%; }
  .an-pop, .an-pop h1 { animation: dz-pop .7s cubic-bezier(.2, .9, .3, 1.2) both; }
  .an-wipe h1 { animation: dz-wipe 1s cubic-bezier(.6, 0, .2, 1) both; }
  .an-blur h1 { animation: dz-blur 1.1s ease-out both; }
  .an-rise h1 { animation: dz-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .an-wipe .name-sub, .an-blur .name-sub, .an-rise .name-sub { animation: dz-blur .8s .35s ease-out both; }
  /* 작품 카드 반응: 마우스를 올렸을 때만 */
  [data-cardfx] .pcard .thumb, [data-cardfx] .pcard .fg { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, scale .35s; }
  [data-cardfx="lift"] .pcard:is(:hover, :focus-visible) .thumb { transform: translateY(-6px); box-shadow: 0 18px 40px -16px color-mix(in srgb, #000 70%, transparent); }
  [data-cardfx="zoom"] .pcard:is(:hover, :focus-visible) .fg { scale: 1.07; }
  [data-cardfx="tilt"] .pcard:is(:hover, :focus-visible) .thumb { transform: perspective(900px) rotateX(5deg) rotateY(-7deg) scale(1.02); }
  [data-cardfx="glow"] .pcard:is(:hover, :focus-visible) .thumb { box-shadow: 0 0 0 1px var(--accent), 0 0 36px -6px var(--accent); }
}
/* 이름 글자마다 (nameAnim = letters): 글자가 차례로 흐림에서 떠오르고, 위 작은 글은 넓은 자간에서 모여듦 */
.an-letters h1 .ch { display: inline-block; white-space: pre; }
/* 그라데이션 + 글자마다: 글자를 따로 움직이면 제목 전체에 칠한 그라데이션이 글자에 안 먹어 이름이 사라짐 → 글자마다 같은 그라데이션의 제 조각을 칠함 (--i 번째 / --n 글자) */
.me-name.fx-grad.an-letters h1 .ch { background: linear-gradient(120deg, var(--accent), var(--d-deep, var(--brand-2))) calc(var(--i, 0) / max(var(--n, 1) - 1, 1) * 100%) 0 / calc(var(--n, 1) * 100%) 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 대표 그림 효과: 필름 입자 · 빛이 한 번 · 마우스 따라 깊이(public/site.js가 --hx · --hy) */
.kh-film, .kh-sheen, .kh-leak { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.kh-leak { mix-blend-mode: screen; opacity: .35; background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%), radial-gradient(40% 50% at 0% 100%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 70%); }
.kh-film { inset: -40px; opacity: .14; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
.kh-sheen { background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, #fff 22%, transparent) 50%, transparent 65%); translate: -100% 0; opacity: 0; }
.hf-mouse > img { transform: translate(var(--hx, 0px), var(--hy, 0px)) scale(1.05); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.hf-mouse > .me-name { transform: translate(calc(var(--hx, 0px) * -.35), calc(var(--hy, 0px) * -.35)); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
/* 작품 카드 마우스 따라 빛 (cardFx = spot): public/site.js가 --mx · --my */
[data-cardfx="spot"] .pcard .thumb::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .35s; mix-blend-mode: screen; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); }
[data-cardfx="spot"] .pcard:is(:hover, :focus-visible) .thumb::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .an-letters h1 .ch { animation: dz-letter .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 75ms + .15s); }
  .an-letters .name-sub { animation: dz-track 1.6s cubic-bezier(.2, .7, .2, 1) both; }
  .kh-film { animation: kh-film 1s steps(6) infinite; }
  .kh-leak { animation: kh-leak 7s ease-in-out infinite alternate; }
  .kh-sheen { animation: kh-sheen 1.8s .9s cubic-bezier(.4, 0, .2, 1) both; }
}
@media (prefers-reduced-motion: reduce) { .hf-mouse > img, .hf-mouse > .me-name { transform: none; } }
@keyframes dz-letter { from { opacity: 0; translate: 0 .35em; filter: blur(8px); } }
@keyframes dz-track { from { opacity: 0; letter-spacing: 1.1em; } }
@keyframes kh-film { 0% { translate: 0 0; } 20% { translate: -12px 8px; } 40% { translate: 9px -14px; } 60% { translate: -6px -4px; } 80% { translate: 14px 10px; } 100% { translate: 0 0; } }
@keyframes kh-leak { from { opacity: .18; } to { opacity: .5; } }
@keyframes kh-sheen { 0% { translate: -100% 0; opacity: 1; } 100% { translate: 100% 0; opacity: 1; } }
@keyframes dz-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dz-blur { from { opacity: 0; filter: blur(14px); } }
@keyframes dz-rise { from { opacity: 0; translate: 0 40%; } }
/* 섹션 나타나기 (design.reveal): 스크롤해서 들어올 때 한 번 (스크롤 따라 진행, 안 되는 브라우저는 그냥 보임) · 작품 카드도 하나씩 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal]:not([data-reveal=""]):not([data-reveal="boot"]) :is(.asec ~ .asec, .pgrid .pcard) { animation: var(--rv) linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    [data-reveal="fade"] { --rv: rv-fade; }
    [data-reveal="rise"] { --rv: rv-rise; }
    [data-reveal="blur"] { --rv: rv-blur; }
  }
}
@keyframes rv-fade { from { opacity: 0; } }
@keyframes rv-rise { from { opacity: 0; translate: 0 48px; } }
@keyframes rv-blur { from { opacity: 0; filter: blur(10px); } }
@keyframes dz-float { 50% { translate: 0 -10px; } }
@keyframes dz-sway { 50% { rotate: 6deg; } }
@keyframes dz-pop { from { opacity: 0; scale: .85; } }
/* 대표 그림 움직임: 그림만 한 번 (이름 글은 그대로 읽힘). 스크롤 따라는 스크롤할 때만, 안 되는 브라우저는 그냥 정지.
   pv-는 편집기 미리보기 (마름모 메뉴에 올렸을 때 한 번) */
@media (prefers-reduced-motion: no-preference) {
  .ha-zoom > img, .pv-zoom > img { animation: ha-zoom 1.8s cubic-bezier(.2, .7, .2, 1) both; }
  .ha-rise > img, .pv-rise > img { animation: ha-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .ha-fade > img, .pv-fade > img { animation: ha-fade 1.1s ease-out both; }
  .pv-parallax > img { animation: ha-par-pv 1.2s ease-in-out both; }
  @supports (animation-timeline: view()) {
    .ha-parallax > img { animation: ha-par linear both; animation-timeline: view(); animation-range: exit; }
  }
}
@keyframes ha-zoom { from { scale: 1.14; } }
@keyframes ha-rise { from { opacity: 0; translate: 0 8%; } }
@keyframes ha-fade { from { opacity: 0; } }
@keyframes ha-par { to { translate: 0 22%; } }
@keyframes ha-par-pv { 50% { scale: 1.12; translate: 0 5%; } }
/* 편집기: 독스식 서식 막대 — 바탕과 반대색의 떠 있는 둥근 막대 (다크에선 밝게, 라이트에선 어둡게) */
.ws-fmt-wrap { flex: none; display: flex; justify-content: center; padding: 8px 20px; border-bottom: 1px solid var(--line); }
.ws-fmt { --fb: var(--fg); --ff: var(--bg); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 5px 8px; border-radius: var(--pill); background: var(--fb); color: var(--ff); box-shadow: 0 6px 22px -8px color-mix(in srgb, var(--fg) 45%, transparent); font-size: 13.5px; }
.ws-fmt-hint { display: flex; align-items: center; height: 40px; margin: 0; color: var(--dim); font-size: 13.5px; }
.ws-fmt .fmt-k { padding: 0 10px 0 6px; font-weight: 700; color: var(--ff); border-right: 1px solid color-mix(in srgb, var(--ff) 25%, transparent); margin-right: 2px; }
.ws-fmt select { min-height: 0; height: 30px; max-width: 150px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--ff) 10%, transparent); color: var(--ff); font: inherit; padding: 0 6px; cursor: pointer; }
.ws-fmt select option, .ws-fmt select optgroup { color: initial; }
.ws-fmt .fmt-g { display: inline-flex; align-items: center; }
.ws-fmt button { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--ff); font: inherit; cursor: pointer; }
.ws-fmt button:hover, .ws-fmt .fmt-c:hover { background: color-mix(in srgb, var(--ff) 12%, transparent); }
.ws-fmt button[aria-pressed="true"] { background: var(--ff); color: var(--fb); } /* 눌림 = 막대 안에서 반대색 (다크 · 라이트 둘 다 보임) */
.ws-fmt .fmt-n { min-width: 2.4em; text-align: center; font-variant-numeric: tabular-nums; }
.ws-fmt .fmt-c { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-weight: 800; }
.ws-fmt .fmt-c input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ws-fmt .fmt-c i { position: absolute; left: 7px; right: 7px; bottom: 4px; height: 3px; border-radius: 2px; pointer-events: none; }
.doc .tt-on { outline: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 4px; border-radius: 4px; }
.doc [data-tt] { cursor: text; }
.ws-tabs { display: flex; gap: 4px; margin: 0 0 10px; padding: 3px; border: 1px solid var(--line); border-radius: var(--pill); }
.ws-tabs button { flex: 1; height: 30px; border: 0; border-radius: var(--pill); background: none; color: var(--dim); font: inherit; font-size: 13.5px; cursor: pointer; }
.ws-tabs button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.dk-grid { display: grid; gap: 8px; }
.dk { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: grab; }
.dk[aria-pressed="true"] { border-color: var(--accent); }
.dk .ti { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 700; }
.dk .tn { display: flex; flex-direction: column; font-size: 14px; }
.dk .tn small { color: var(--faint); font-size: 12.5px; }
.dsec { position: relative; container-type: inline-size; }
.ed-deco { position: absolute; height: auto; transform: rotate(var(--rot, 0deg)); cursor: move; touch-action: none; user-select: none; pointer-events: auto; }
.ed-deco > img { display: block; width: 100%; height: auto; pointer-events: none; }
.ed-deco.on { outline: 2px dashed var(--accent); outline-offset: 2px; }
/* 포스터처럼 손잡이: 크기(오른쪽 아래) · 회전(위 가운데) · 빼기(✕) */
.dh { position: absolute; width: 14px; height: 14px; border: 2px solid var(--accent); background: var(--bg); }
.dh-size { right: -9px; bottom: -9px; border-radius: 3px; cursor: nwse-resize; }
.dh-rot { left: 50%; top: -28px; margin-left: -7px; border-radius: 50%; cursor: grab; }
.dh-rot::after { content: ""; position: absolute; left: 50%; top: 12px; width: 2px; height: 12px; margin-left: -1px; background: var(--accent); }
.dh-x { position: absolute; z-index: 2; right: -12px; top: -12px; width: 26px; height: 26px; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--fg); font-size: 12px; line-height: 1; cursor: pointer; }
.dh-x:hover { border-color: var(--err); color: var(--err); }
.d-hero { position: relative; margin-bottom: 16px; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 8; max-height: 62vh; }
.d-hero-frame { aspect-ratio: 16 / 9; }
.d-hero-side { aspect-ratio: auto; height: 200px; width: 42%; margin-left: auto; }
.d-hero-dots { aspect-ratio: auto; height: 200px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 24px; border: 1px dashed var(--line); background: radial-gradient(color-mix(in srgb, var(--fg) 30%, transparent) 1px, transparent 1.4px) 0 0 / 6px 6px; }
.d-hero-dots b { font-family: var(--font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 300; line-height: 1; }
.d-hero-dots span { font-size: 13.5px; color: var(--faint); }
.d-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d-hero-side img { object-fit: contain; }
.d-hero .textlink { position: absolute; right: 10px; bottom: 10px; background: var(--bg); padding: 4px 10px; border-radius: var(--pill); }
.d-hero img { -webkit-touch-callout: none; user-select: none; }
.d-hero { cursor: pointer; }
/* 편집기 종이: 이름 위 작은 글 · 이름 모양 (공개 화면 .me-name과 같은 느낌, 글칸이라 가능한 만큼) */
.doc .g-sub { font-size: 13px; letter-spacing: .4em; color: var(--accent); padding-block: 2px; }
.doc .g-name.nfx-wide { font-size: clamp(44px, 6vw, 96px); line-height: 1; letter-spacing: -.03em; }
.doc .g-name.nfx-vertical { font-size: clamp(40px, 5vw, 72px); }
.doc .g-name.nfx-outline { color: transparent; -webkit-text-stroke: 2px var(--fg); caret-color: var(--fg); font-size: clamp(44px, 6vw, 96px); }
.doc .g-name.nfx-grad { background: linear-gradient(120deg, var(--accent), var(--d-deep, var(--brand-2))); -webkit-background-clip: text; background-clip: text; color: transparent; caret-color: var(--fg); font-size: clamp(44px, 6vw, 96px); }
.nfx-note { display: inline-block; margin-top: 2px; font-size: 12px; color: var(--faint); }
/* 편집기: 마름모 메뉴 (우클릭 · 길게 누르기 · 끌어 놓기). 사이트 토큰만, 가는 선 + 고정폭 글자 */
.rad { position: fixed; z-index: 90; width: 0; height: 0; font-family: var(--font); font-size: 12px; color: var(--fg); outline: none; }
.rad::before { content: ""; position: absolute; left: -84px; top: -84px; width: 168px; height: 168px; rotate: 45deg; border-radius: 22px; background: color-mix(in srgb, var(--bg) 74%, transparent); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 18px 50px -20px color-mix(in srgb, var(--fg) 40%, transparent); }
.rad-wire { position: absolute; left: -130px; top: -130px; width: 260px; height: 260px; overflow: visible; pointer-events: none; fill: none; stroke: var(--accent); stroke-width: 1; }
.rad-wire circle, .rad-wire line { opacity: .55; }
.rad-wire .rad-out { opacity: .4; stroke-dasharray: 2 5; }
.rad-wire .rad-tick { opacity: .9; }
.rad button { position: absolute; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; translate: -50% -50%; }
.rad-c { left: 0; top: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: 1.25; }
.rad-c small { font-size: 8.5px; letter-spacing: .08em; color: var(--accent); white-space: nowrap; }
.rad-c b { font-weight: 600; font-size: 11px; color: var(--dim); }
.rad-c:hover b, .rad-c:focus-visible b { color: var(--fg); }
.rad-d { display: grid; place-items: center; width: 40px; height: 40px; rotate: 45deg; border: 1px solid var(--accent); border-radius: 7px; background: var(--surface); transition: background-color .12s, color .12s, box-shadow .12s; }
.rad-d > svg { rotate: -45deg; }
.rad-i.cur .rad-d { box-shadow: inset 0 0 0 2px var(--accent); }
.rad-i.on .rad-d, .rad-i:focus-visible .rad-d { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); }
.rad-l { position: absolute; white-space: nowrap; padding: 3px 9px; border-radius: var(--pill); border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); pointer-events: none; }
.rad-l em { font-style: normal; color: var(--accent); margin-right: 6px; }
.rad-i.on .rad-l { border-color: var(--accent); }
.rad-n .rad-l { bottom: calc(100% + 12px); left: 50%; translate: -50% 0; }
.rad-s .rad-l { top: calc(100% + 12px); left: 50%; translate: -50% 0; }
.rad-e .rad-l { left: calc(100% + 12px); top: 50%; translate: 0 -50%; }
.rad-w .rad-l { right: calc(100% + 12px); top: 50%; translate: 0 -50%; }
@media (prefers-reduced-motion: no-preference) {
  .rad::before, .rad-i { animation: rad-in .14s cubic-bezier(.2, .8, .2, 1) both; }
  .rad-wire { animation: rad-wire .2s ease-out both; }
}
@keyframes rad-in { from { opacity: 0; scale: .7; } }
@keyframes rad-wire { from { opacity: 0; scale: .5; } }
.dk-thumb { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.dk-thumb img { display: block; width: 100%; max-height: 160px; object-fit: cover; }
.dk-thumb.small img { max-height: 80px; }
.dz-range { width: 100%; accent-color: var(--accent); }
.ins-f output { font-size: 12.5px; color: var(--dim); }
.dk-foot { margin: 12px 0 0; font-size: 13.5px; }
/* 보여 주기: 가짜 커서가 칸을 눌러 보이고 아래 자막으로 설명 (편집기) */
.dk-demo { display: block; width: calc(100% - 32px); margin: 10px 16px 0; }
.demo-cur { position: fixed; z-index: 2147483000; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent); pointer-events: none; transition: left .65s cubic-bezier(.2, .7, .2, 1), top .65s cubic-bezier(.2, .7, .2, 1), transform .15s; }
.demo-cur.tap { transform: scale(.7); }
.demo-cap { position: fixed; z-index: 2147483000; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(600px, calc(100vw - 32px)); padding: 12px 14px 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--bg) 90%, transparent); font-size: 15px; }
.demo-cap p { margin: 0; }
.demo-n { flex: none; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .demo-cur { transition: none; } }
.dz-imgs button[aria-pressed="true"] { outline: 2px solid var(--accent); }
/* 기간 칸: 숫자 ~ 숫자 + 일/주 */
.dur { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.dur input, .dur select { min-height: 36px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; width: 100%; }
.dur span { color: var(--dim); }

/* 서로 억지력 (SPEC 4-5-2): 작가 페이지 아래 신고 줄 · 기록 확인 */
.report-line { margin: 0 0 40px; font-size: 13.5px; color: var(--faint); text-align: center; }
.report-line a { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.verify-form { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 16px; }
.verify-form textarea { width: 100%; font: inherit; font-size: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--fg); }
.verify-form .cta { align-self: flex-start; }
.verify-ok, .verify-bad { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); font-weight: 600; }
.verify-ok { color: var(--accent); }
.verify-bad { color: var(--busy); }
/* Safe Pay (/safe-pay): 보호 장치 4칸 → 기록 메일 확인. 한 폭(960) */
.sp-page { max-width: 960px; margin-inline: auto; padding-block: 64px 80px; display: flex; flex-direction: column; gap: 56px; }
.sp-hero { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.sp-hero h1 { font-weight: 700; font-size: clamp(34px, 5.4vw, 56px); line-height: 1.1; letter-spacing: -.03em; word-break: keep-all; }
.sp-hero .lead { font-size: clamp(17px, 2.2vw, 20px); margin: 0; }
.sp-sec { display: flex; flex-direction: column; gap: 20px; }
.sp-h { font-size: 21px; font-weight: 600; }
.sp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.sp-steps li { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-right: 1px solid var(--line); }
.sp-steps li:last-child { border-right: 0; }
.sp-steps small { color: var(--dim); font-size: 14px; line-height: 1.55; }
.sp-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--on-accent); background: var(--accent); margin-bottom: 6px; }
@media (max-width: 860px) { .sp-steps li { border-right: 0; border-bottom: 1px solid var(--line); } .sp-steps li:last-child { border-bottom: 0; } }
/* 메인 쇼케이스: 대표 그림을 넓게 */
.sc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.sc-card { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.sc-img, .sc-img > img, .sc-img > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-img > img { transition: transform .5s ease; }
.sc-card:hover .sc-img > img { transform: scale(1.03); }
.sc-txt { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; padding: 40px 20px 16px; background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 88%, transparent)); }
.sc-txt small { font-size: 12px; letter-spacing: .18em; color: var(--c); }
.sc-txt b { font-size: clamp(20px, 3vw, 28px); line-height: 1.2; }
.sc-txt span { font-size: 14px; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .sc-card:hover .sc-img > img { transform: none; } }
@media (max-width: 520px) { .sp-page { padding-block: 40px 56px; gap: 44px; } }
.sp-verify .verify-form { margin: 0; }
.sp-small { font-size: 14px; margin: 0; }
.sp-only { margin: 0; padding: 14px 16px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface); font-size: 15px; color: var(--dim); }
.sp-only b { color: var(--fg); }
/* 맨 위 입구: 이메일로 들어가기 (작가 · 들어와 있는 의뢰자는 버튼 하나) */
.sp-enter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 6px; }
.sp-enter small { flex-basis: 100%; }
.sp-form { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; max-width: 560px; }
.sp-form input { flex: 1 1 240px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; }
.sp-small a { text-decoration: underline; }
/* 운영 화면 → 테스트: 파트 고르기 · 지난 결과 */
.chk-pick { display: grid; gap: 10px; max-width: 760px; }
.chk-grp { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; }
.chk-grp input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.chk-grp b { display: block; font-size: 15px; }
.chk-grp small { color: var(--dim); }
.chk-pick .cta { justify-self: start; margin-top: 6px; }
.chk-last { margin-top: 28px; max-width: 760px; }
.chk-last h2 { font-size: 15px; margin: 0 0 6px; }
.chk-last h2 span, .chk-last .ok { color: var(--dim); font-weight: 400; }
.chk-last .bad { color: var(--err); }
/* 점검 화면: 왼쪽 단계 목록 · 오른쪽 실제 화면 */
.chk { display: grid; grid-template-columns: 320px 1fr; height: 100vh; }
.chk-side { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--surface); overflow: auto; padding: 18px 18px 24px; font-size: 13px; }
.chk-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.chk-top b { font-family: var(--font-display); font-size: 18px; }
.chk-top span { color: var(--dim); }
.chk-g h2 { font-size: 13px; color: var(--accent); margin: 14px 0 6px; }
.chk-g ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chk-g li { position: relative; padding: 6px 8px 6px 28px; border-radius: var(--radius); color: var(--faint); }
.chk-g li::before { content: "·"; position: absolute; left: 10px; }
.chk-g li.run { color: var(--fg); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.chk-g li.run::before { content: "▶"; color: var(--accent); font-size: 10px; top: 9px; }
.chk-g li.ok { color: var(--fg); }
.chk-g li.ok::before { content: "✓"; color: var(--pal-5); }
.chk-g li.bad { color: var(--err); }
.chk-g li.bad::before { content: "✗"; }
.chk-g li small { display: block; color: var(--dim); }
.chk-end { margin: 0 0 6px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); }
.chk-end p { margin: 0 0 10px; font-weight: 700; }
.chk-end p.bad { color: var(--err); }
#chk-frame { width: 100%; height: 100%; border: 0; background: var(--bg); }
.chk-pane[hidden] { display: none; } /* 숨긴 의뢰자 화면 칸이 자리를 차지해 겹쳐 보이던 것 */
/* 다시 보기 링크 = 의뢰자의 거래방 입구 */
.rc-deal { display: grid; gap: 6px; justify-items: start; margin: 16px 0; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.rc-deal span { color: var(--dim); font-size: 14px; }
.rc-deal .cta { margin-top: 6px; }
.rc-deal.wait { border-color: var(--line); background: var(--surface); }
/* 두 사람이 나오는 단계: 왼쪽 작가 · 오른쪽 의뢰자 화면을 나란히 (이름표) */
.chk-stage { display: grid; grid-template-columns: 1fr; min-height: 0; }
.chk-stage.split { grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.chk-pane { margin: 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.chk-pane iframe { flex: 1; width: 100%; height: auto; border: 0; background: var(--bg); }
.chk-cap { display: none; padding: 7px 12px; font-size: 13px; font-weight: 700; color: var(--accent); background: var(--surface); border-bottom: 1px solid var(--line); }
.chk-cap small { margin-left: 8px; font-weight: 400; color: var(--dim); }
.chk-stage.split .chk-cap { display: block; }
@media (max-width: 760px) { .chk { grid-template-columns: 1fr; grid-template-rows: 40vh 1fr; } .chk-side { border-right: 0; border-bottom: 1px solid var(--line); } }
/* 편집기: 본격 튜토리얼 (public/learn.js) — 떠 있는 카드 + 할 곳 고리 */
.lrn { position: fixed; z-index: 85; left: calc(50% - 180px); bottom: 20px; width: 360px; max-width: calc(100vw - 32px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 18px 50px -18px color-mix(in srgb, var(--fg) 40%, transparent); font-size: 14px; cursor: grab; }
.lrn.moving { cursor: grabbing; }
.lrn-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 14px 44px 10px 16px; position: relative; }
.lrn-head b { width: 100%; font-size: 16px; }
.lrn-k { font-size: 12px; color: var(--accent); }
.lrn-x { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--dim); cursor: pointer; }
.lrn-x:hover { color: var(--fg); background: var(--bg); }
.lrn-bar { height: 3px; margin: 0 16px; border-radius: var(--pill); background: var(--line); overflow: hidden; }
.lrn-bar i { display: block; height: 100%; background: var(--accent); }
.lrn-body { padding: 12px 16px 4px; cursor: auto; }
.lrn-body p { margin: 0 0 10px; line-height: 1.6; }
.lrn-dim, .lrn-st { color: var(--dim); font-size: 13px; }
.lrn-st.ok, .lrn-why.ok { color: var(--pal-5); }
.lrn-why.bad { color: var(--err); }
.lrn-q { font-weight: 700; }
.lrn-opts { display: grid; gap: 6px; margin-bottom: 10px; }
.lrn-opts button { text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; cursor: pointer; }
.lrn-opts button:hover:not(:disabled) { border-color: var(--accent); }
.lrn-opts button.ok { border-color: var(--pal-5); }
.lrn-opts button.bad { border-color: var(--err); }
.lrn-opts button:disabled { cursor: default; }
.lrn-chs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.lrn-chs button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.lrn-chs button:hover { border-color: var(--accent); }
.lrn-chs span { width: 20px; color: var(--dim); font-size: 12px; }
.lrn-chs i { margin-left: auto; font-style: normal; color: var(--pal-5); }
.lrn-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px 14px; }
.lrn-foot .cta { padding: 8px 18px; }
.lrn-foot .cta:disabled { opacity: .4; }
.lrn-dots { display: flex; gap: 5px; }
.lrn-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.lrn-dots i.on { background: var(--accent); }
.lrn-dots i.now { background: var(--fg); }
.lrn-ring { position: fixed; z-index: 84; border: 2px solid var(--accent); border-radius: var(--radius); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .lrn-ring { transition: left .2s, top .2s, width .2s, height .2s; } }
.acct-learn .btn { margin-top: 4px; display: inline-block; }
/* 편집기 보기 모드: 내용 · 꾸미기 · 둘 다 (위 줄) */
.ws-mode { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--pill); }
.ws-mode button { padding: 5px 12px; border: 0; border-radius: var(--pill); background: none; color: var(--dim); font: inherit; font-size: 13.5px; cursor: pointer; }
.ws-mode button:hover { color: var(--fg); }
.ws-mode button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
/* 내용: 꾸미기를 끄고 글 · 블록만 (서식 막대 · 스티커 · 이름 모양 숨김) */
.ed.m-content .ws-fmt-wrap, .ed.m-content .ed-deco, .ed.m-content .nfx-note { display: none; }
.ed.m-content .doc .g-name { color: var(--fg); -webkit-text-stroke: 0; background: none; font-size: clamp(34px, 4vw, 48px); line-height: 1.15; }
/* 꾸미기: 꾸민 모습만 (블록 머리줄 · + 줄 · + 박스 · 빈 칸 안내 숨김) */
.ed.m-design .doc :is(.bk-head, .bk-add, .bk-tile, .drop-hint, .dsec-meta) { display: none; }
/* 편집기 단축키 목록 (⌘/) */
.kbd-help { position: fixed; z-index: 95; left: 50%; top: 50%; translate: -50% -50%; width: min(520px, calc(100vw - 32px)); max-height: 80vh; overflow: auto; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--fg) 40%, transparent); font-size: 14px; outline: none; }
.kbd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kbd-head .lrn-x { position: static; }
.kbd-help dl { margin: 0; display: grid; gap: 2px; }
.kbd-help dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); }
.kbd-help dd { margin: 0; color: var(--dim); }
.kbd-help kbd { font-family: var(--font); font-size: 12.5px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); white-space: nowrap; }
/* 꾸미기 덱: 적용된 것은 포인트 색 글 + ✕ 빼기 */
.dk { position: relative; }
.dk.on .tn small { color: var(--accent); }
.dk-off { margin-left: auto; flex: none; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--dim); font-size: 12px; cursor: pointer; }
.dk-off:hover { color: var(--err); border-color: var(--err); }
/* 작업 목록 창 (⌥L) — 작게 떠 있음(머리줄을 잡고 옮김), 탭 하나씩 · 줄마다 이름 ··· 값 */
.dz-list { position: fixed; z-index: 80; right: 360px; top: 140px; width: 360px; max-height: min(620px, calc(100vh - 160px)); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 18px 50px -18px color-mix(in srgb, var(--fg) 45%, transparent); font-size: 14px; }
.dz-list.moving { cursor: grabbing; }
.dz-l-head { display: flex; align-items: center; padding: 12px 12px 4px 18px; cursor: grab; }
.dz-l-head b { font-size: 15px; }
.dz-l-x { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--dim); font-size: 14px; cursor: pointer; }
.dz-l-x:hover { color: var(--fg); background: var(--bg); }
.dzr-tabs { display: flex; gap: 4px; margin: 6px 14px 4px; padding: 3px; border-radius: var(--pill); background: var(--bg); }
.dzr-tabs button { flex: 1; display: flex; justify-content: center; align-items: baseline; gap: 5px; padding: 7px 4px; border: 0; border-radius: var(--pill); background: none; color: var(--dim); font: inherit; font-size: 13.5px; cursor: pointer; }
.dzr-tabs button small { font-size: 11.5px; color: var(--faint); }
.dzr-tabs button[aria-selected="true"] { background: var(--surface); color: var(--fg); font-weight: 700; box-shadow: 0 1px 0 var(--line); }
.dz-l-body { overflow: auto; padding: 6px 8px 10px; scrollbar-width: thin; }
.dzr-sec { display: flex; align-items: center; gap: 8px; padding: 12px 10px 4px; font-size: 12px; letter-spacing: .08em; color: var(--dim); }
.dzr-sec i { width: 7px; height: 7px; border-radius: 2px; background: var(--tc); }
.dzr-list { list-style: none; margin: 0; padding: 0; }
.dzr { position: relative; display: flex; align-items: center; }
.dzr-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 9px 40px 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.dzr-main:hover, .dzr-main:focus-visible { background: var(--bg); }
.dz-list .ti { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 700; font-size: 12px; }
.dzr-name { flex: none; font-weight: 600; }
.dzr-val { margin-left: auto; min-width: 0; color: var(--accent); font-size: 13px; text-align: right; overflow-wrap: anywhere; }
.dzr-val.none { color: var(--faint); }
.dzr-x { position: absolute; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--faint); cursor: pointer; opacity: .35; }
.dzr:hover .dzr-x, .dzr-x:focus-visible { opacity: 1; }
.dzr-x:hover { color: var(--err); background: var(--bg); }
.dzr-empty { margin: 14px 10px; color: var(--dim); line-height: 1.6; }
.dzr-foot { display: flex; justify-content: space-between; align-items: center; margin: 8px 10px 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }
.ws-foot-l { display: flex; gap: 14px; }

/* ── 입자로 그린 이름 (hero.kind = dots, public/site.js). 그림이 그려진 뒤(dots-on)에만 이름 글을 눈에서 숨김 (읽는 프로그램엔 그대로) */
.khero-dots { position: relative; height: clamp(150px, min(40vh, 30vw), 440px); margin-inline: calc(-1 * clamp(0px, 3vw, 40px)); color: var(--fg); }
.khero-dots, .d-hero-dots b { --dot: var(--dot-d, var(--fg)); } /* 입자 색: 어두운 화면 · 밝은 화면 따로 (public/design.js dotVars) */
:root[data-theme="light"] :is(.khero-dots, .d-hero-dots b) { --dot: var(--dot-l, var(--fg)); }
.d-hero-dots b { color: var(--dot); }
.khero-dots > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 입자 이름 뒤 그림: 어둡게, 가장자리는 페이지로 녹아듦 */
.khero-dots > .kh-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: saturate(.75); -webkit-mask-image: radial-gradient(120% 90% at 60% 50%, #000 35%, transparent 85%); mask-image: radial-gradient(120% 90% at 60% 50%, #000 35%, transparent 85%); }
.khero-dots > .me-name { position: absolute; left: 0; bottom: 0; padding: clamp(16px, 3vw, 40px); z-index: 1; pointer-events: none; }
.me .me-who { margin: 2px 0 0; font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); font-weight: 500; color: var(--fg); line-height: 1.2; }
.khero-dots.dots-on h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── 정밀 격자 (design.frame = grid): 섹션 번호 · 가는 선 · 모서리 눈금 · 요약 숫자 판. 작은 글은 모노(제목 폰트) */
:is(.skin, .ws-canvas .doc)[data-frame="grid"] { counter-reset: sec; }
.skin[data-frame="grid"] .asec, .ws-canvas .doc[data-frame="grid"] .dsec { counter-increment: sec; position: relative; }
.skin[data-frame="grid"] .asec ~ .asec { border-top: 1px solid var(--line); }
.skin[data-frame="grid"] .asec > .label, .ws-canvas .doc[data-frame="grid"] .dsec-head .label { font-family: var(--font-display); font-size: 12.5px; letter-spacing: .2em; }
.skin[data-frame="grid"] .asec > .label:first-child::before, .ws-canvas .doc[data-frame="grid"] .dsec-head .label::before { content: counter(sec, decimal-leading-zero) "  —  "; color: var(--faint); }
.ws-canvas .doc[data-frame="grid"] .dsec-head .label::before { width: auto; height: auto; border-radius: 0; background: none; white-space: pre; } /* 편집기: 섹션 색 점 자리라 "01 —"이 세로로 쪼개지던 것 */
.skin[data-frame="grid"] .asec ~ .asec::after { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-left: 1px solid var(--accent); border-top: 1px solid var(--accent); }
.skin[data-frame="grid"] .asec h2.t { font-weight: 300; letter-spacing: -.02em; }
.skin[data-frame="grid"] .avatar { outline: 1px solid var(--line); outline-offset: 5px; }
.skin[data-frame="grid"] .role-label, .skin[data-frame="grid"] .name-sub, .skin[data-frame="grid"] .tagline { font-family: var(--font-display); }
.skin[data-frame="grid"] .role-label { letter-spacing: .04em; font-family: var(--font); }
.skin[data-frame="grid"] .summary { gap: 0; padding: 0; border-color: var(--line); }
.skin[data-frame="grid"] .summary > div { padding: 18px 20px 20px; border-left: 1px solid var(--line); }
.skin[data-frame="grid"] .summary > div:first-child { border-left: 0; padding-left: 0; }
.skin[data-frame="grid"] .summary dt { font-size: 12.5px; letter-spacing: .06em; }
.skin[data-frame="grid"] .summary dd { font-size: clamp(20px, 2.2vw, 28px); font-weight: 300; font-variant-numeric: tabular-nums; }
.skin[data-frame="grid"] .summary .to-notice { align-self: center; padding-left: 20px; }
@media (max-width: 760px) { .skin[data-frame="grid"] .summary > div:nth-child(odd) { border-left: 0; padding-left: 0; } .skin[data-frame="grid"] .summary > div { border-top: 1px solid var(--line); } }
/* 접수 중 점: 숨 쉬듯 부드럽게 + 은은하게 퍼지는 고리 */
.skin[data-frame="grid"] .status i { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .skin[data-frame="grid"] .status i { animation: grid-live 2.8s ease-in-out infinite; }
  .skin[data-frame="grid"] .status i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: grid-ring 2.8s ease-out infinite; }
}
@keyframes grid-live { 50% { opacity: .45; } }
@keyframes grid-ring { 0% { transform: scale(1); opacity: .45; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

/* ── 차례로 켜지기 (reveal = boot): 첫 화면은 불러올 때 칸마다 차례로, 아래 섹션은 스크롤해서 들어올 때 칸마다. 왼쪽부터 짧게 드러남 */
@media (prefers-reduced-motion: no-preference) {
  .skin[data-reveal="boot"] #s-about > *, .skin[data-reveal="boot"] .summary > div { animation: boot .7s cubic-bezier(.2, .7, .2, 1) backwards; } /* 끝나면 잘라 내기를 풀어야 바깥 이름표 · 테두리가 안 잘림 */
  .skin[data-reveal="boot"] #s-about > :nth-child(2) { animation-delay: .12s; }
  .skin[data-reveal="boot"] #s-about > :nth-child(3) { animation-delay: .5s; }
  .skin[data-reveal="boot"] #s-about > :nth-child(4) { animation-delay: .65s; }
  .skin[data-reveal="boot"] .summary > div:nth-child(2) { animation-delay: .8s; }
  .skin[data-reveal="boot"] .summary > div:nth-child(3) { animation-delay: .9s; }
  .skin[data-reveal="boot"] .summary > div:nth-child(4) { animation-delay: 1s; }
  .skin[data-reveal="boot"] .summary > div:nth-child(5) { animation-delay: 1.1s; }
  @supports (animation-timeline: view()) {
    .skin[data-reveal="boot"] .asec ~ .asec > * { animation: boot linear backwards; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@keyframes boot { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* 쇼케이스 "만든 도구 보기" (body.xray): 부분마다 점선 + 도구 이름표 */
.xray-btn { margin-left: 8px; padding: 2px 10px; border: 1px solid currentColor; border-radius: var(--pill); background: none; color: inherit; font: inherit; cursor: pointer; }
.xray-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
body.xray [data-tool]:not([data-tool=""]) { position: relative; outline: 1px dashed var(--accent); outline-offset: 8px; }
body.xray [data-tool]:not([data-tool=""])::after { content: attr(data-tool); position: absolute; top: -8px; left: 0; translate: 0 -100%; z-index: 6; max-width: min(100%, 560px); padding: 3px 9px; background: var(--accent); color: var(--on-accent); font: 500 12px/1.4 var(--font-display), monospace; letter-spacing: .02em; white-space: normal; pointer-events: none; }
body.xray .khero-dots[data-tool]::after { top: 8px; translate: 0 0; left: auto; right: 0; }

/* ── 섹션 사이 띠 (design.bands): 큰 글 한 줄 · 이미지 띠 · 구분선. 절제: 여백 · 얇은 글 · 가는 선 */
.band { margin: clamp(28px, 4vw, 56px) 0 0; max-width: 920px; }
.band-line p { margin: 0; font-family: var(--font); font-size: clamp(28px, 4.4vw, 58px); font-weight: 300; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; max-width: 16em; }
.band-line .band-c, .band-image figcaption span, .band-rule span { font-family: var(--font-display); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.band-line .band-c { display: block; margin-bottom: 14px; }
.band-image { max-width: none; margin-inline: calc(-1 * clamp(0px, 3vw, 40px)); }
.band-image img { display: block; width: 100%; aspect-ratio: 21 / 7; max-height: 44vh; object-fit: cover; border-radius: var(--radius-lg); }
.band-image figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px clamp(0px, 3vw, 40px) 0; }
.band-image figcaption b { font-weight: 400; font-size: 15px; }
.band-rule { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid var(--line); position: relative; }
.band-rule::before { content: ""; position: absolute; left: 0; top: -1px; width: 32px; height: 1px; background: var(--accent); }
.band-rule span:first-child { color: var(--fg); }
/* 정밀 격자 · 경계 모양과 같이: 다음 섹션의 위 선 · 눈금 · 물결이 띠 글에 바로 붙어 가리지 않게 아래도 띄움 */
:is(.skin[data-frame="grid"], .skin[data-edge]:not([data-edge="none"])) .band { margin-bottom: clamp(28px, 4vw, 56px); }
:is(.doc[data-frame="grid"], .doc[data-edge]:not([data-edge="none"])) .band-pv { margin-bottom: 48px; } /* 편집기도 같게 */
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { [data-reveal]:not([data-reveal=""]) .band { animation: rv-fade linear backwards; animation-timeline: view(); animation-range: entry 0% entry 50%; } } }
/* 편집기 미리보기 */
.band-pv { position: relative; cursor: pointer; border-radius: var(--radius); outline: 1px dashed transparent; outline-offset: 6px; margin-block: 8px 24px; }
.band-x { opacity: 0; transition: opacity .15s; }
.band-pv:hover .band-x, .band-pv:focus-within .band-x { opacity: 1; }
.band-in { width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; letter-spacing: inherit; }
textarea.band-in { display: block; min-height: 0; resize: none; overflow: hidden; field-sizing: content; line-height: inherit; } /* 큰 글 한 줄: 길면 공개 화면처럼 줄바꿈 (한 줄 칸이라 잘리던 것) */
.band-in:focus { outline: 1px dashed var(--accent); outline-offset: 4px; }
.band-pv:hover { outline-color: var(--line); }
.band-pv .band-image { margin-inline: 0; }
/* 꾸미기 자리 표시 (편집기, 내용 모드 빼고): 쓸 수 있는 자리를 점선으로. 꾸미기 모드는 늘, 둘 다 모드는 옅게 → 올리면 진하게 */
.band-slot, .d-hero-slot { display: grid; place-items: center; width: 100%; border: 1px dashed var(--line); border-radius: var(--radius); background: none; color: var(--faint); font: inherit; cursor: pointer; transition: color .15s, border-color .15s, opacity .15s; }
.band-slot { position: relative; height: 22px; margin: 6px 0; border-width: 0; border-radius: 0; opacity: .55; }
.band-slot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line); }
.band-slot span { position: relative; padding: 0 10px; background: var(--bg); font-size: 12.5px; }
.d-hero-slot { gap: 4px; min-height: 120px; margin-bottom: 18px; padding: 18px; text-align: center; }
.d-hero-slot b { font-weight: 600; color: var(--dim); }
.d-hero-slot span { font-size: 13px; }
:is(.band-slot, .d-hero-slot):hover, :is(.band-slot, .d-hero-slot):focus-visible { opacity: 1; color: var(--accent); border-color: var(--accent); }
.band-slot:hover::before { border-color: var(--accent); }
.ed.m-design .band-slot { opacity: 1; }
.ed:not(.m-content) .doc .dsec::after { content: "✦ 우클릭 · 길게 누르기 → 이 자리 꾸미기"; position: absolute; right: 0; bottom: 6px; font-size: 11.5px; color: var(--faint); opacity: 0; pointer-events: none; transition: opacity .15s; }
.ed:not(.m-content) .doc .dsec:hover::after, .ed.m-design .doc .dsec::after { opacity: .8; }
@media (hover: none) { .ed:not(.m-content) .doc .dsec::after { opacity: .8; } }
.band-empty { display: grid; place-items: center; aspect-ratio: 21 / 7; border: 1px dashed var(--line); border-radius: var(--radius-lg); color: var(--faint); font-size: 14px; }

/* Safe Pay 거래방 · 인보이스 (SPEC 4-5-3) */
.deal { max-width: 760px; margin: 0 auto; padding-block: 40px 64px; }
.deal h1 { margin: 8px 0 6px; }
.deal-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.deal-form .g { width: auto; flex: 1 1 140px; }
.deal-pre { white-space: pre-wrap; word-break: break-word; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 14px; }
.invoice { max-width: 720px; margin: 40px auto; padding: 36px 40px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.inv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.inv-head h1 { margin: 6px 0 10px; font-size: clamp(32px, 5vw, 44px); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.inv-meta { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 22px; margin: 0; font-variant-numeric: tabular-nums; }
.inv-meta dt { font-size: 12px; color: var(--faint); }
.inv-meta dd { margin: 2px 0 0; font-size: 14.5px; }
.inv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.inv-foot p { flex: 1 1 320px; margin: 0; font-size: 13px; }
@media (max-width: 560px) { .inv-meta { grid-template-columns: 1fr 1fr; } .invoice { padding: 22px; } }
.inv-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 28px 0; }
.inv-t { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.inv-t th, .inv-t td { padding: 10px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.inv-t th:last-child, .inv-t td:last-child { text-align: right; }
@media print {
  .top, .foot, .inv-print { display: none !important; }
  .invoice { border: 0; margin: 0; padding: 0; background: none; }
}
.deal textarea, .deal select, .deal input:not([type="hidden"]), .acct-box textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--fg); font: inherit; }
.deal textarea:focus, .deal select:focus, .deal input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.deal-new { display: inline-block; min-width: 22px; padding: 1px 8px; border-radius: var(--pill); background: var(--accent); color: var(--on-accent); font-size: 12.5px; font-weight: 700; text-align: center; }

/* 거래 받은편지함 (views/inbox.js): 메신저처럼 왼쪽 목록 + 오른쪽 대화, 휴대폰은 목록 → 대화 */
.nav-inbox { display: inline-flex; align-items: center; gap: 6px; }
.ib { display: grid; grid-template-columns: 280px minmax(0, 1fr); max-width: 1360px; margin: 24px auto; height: calc(100vh - 140px); min-height: 480px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.ib-side { display: flex; flex-direction: column; border-right: 1px solid var(--line); overflow-y: auto; }
.ib-h { margin: 0; padding: 18px 18px 6px; font-size: 20px; }
.ib-k { margin: 14px 18px 6px; font-size: 12.5px; color: var(--dim); }
.ib-k small { color: var(--faint); margin-left: 4px; }
.ib-list { list-style: none; margin: 0; padding: 0 8px; display: grid; gap: 2px; }
.ib-list a, .ib-new { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--radius); color: var(--fg); text-decoration: none; }
.ib-list a:hover { background: var(--bg); }
.ib-list a.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ib-new { border: 1px dashed var(--line); margin-bottom: 6px; }
.ib-new .bk-acts { flex-wrap: wrap; }
.ib-new .btn, .ib-new .cta { min-height: 0; padding: 6px 12px; font-size: 13.5px; white-space: nowrap; }
.ib-row1 { display: flex; align-items: center; gap: 8px; }
.ib-row1 small { margin-left: auto; color: var(--faint); font-size: 12px; white-space: nowrap; }
.ib-last { color: var(--dim); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-empty { padding: 8px 18px; font-size: 14px; }
.ib-foot { margin: auto 18px 16px; padding-top: 12px; font-size: 13.5px; }
.ib-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ib-pick { margin: auto; }
.ib-top { display: flex; align-items: center; gap: 12px; padding: 22px 26px 16px; }
.ib-top h2 { margin: 4px 0 2px; font-size: clamp(22px, 3vw, 30px); font-weight: 500; }
/* 거래 한 방 = 매트릭스: 대화 + 오른쪽 "한눈에"(단계 · 인보이스 · 신청 글)를 한 화면에. 탭은 휴대폰에서만 */
.ib-tabs { display: none; }
.ib-room { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; border-top: 1px solid var(--line); }
.ib-body { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ib-p-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ib-glance { min-height: 0; overflow-y: auto; border-left: 1px solid var(--line); padding: 4px 18px 18px; display: grid; align-content: start; gap: 4px; }
.ib-glance .ib-p + .ib-p { border-top: 1px solid var(--line); }
.ib-pane { padding: 12px 0; }
.ib-h3 { margin: 0 0 10px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.ib-glance .deal-pre { max-height: 220px; overflow-y: auto; font-size: 13px; }
.ib-glance .deal-form { flex-direction: column; align-items: stretch; }
.ib-glance .ib-invs .ib-card { flex-direction: column; align-items: flex-start; text-align: left; }
.ib-invs { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.ib-invs .ib-card { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius); font-variant-numeric: tabular-nums; }
.ib-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 4px; }
.ib-steps li { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: var(--faint); font-size: 14px; }
.ib-steps li.ok { color: var(--fg); }
.ib-steps li > span { width: 20px; height: 20px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 12px; color: var(--accent); flex: none; }
.ib-steps small { color: var(--dim); }
.ib-top > div { display: grid; }
.ib-top small { color: var(--faint); font-size: 12.5px; }
.ib-back { display: none; font-size: 20px; color: var(--fg); text-decoration: none; }
.ib-msg { margin: 8px 18px 0; }
.ib-msgs { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 16px 22px; display: flex; flex-direction: column; gap: 10px; }
.ib-msgs > li { max-width: 78%; padding: 9px 13px; border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; background: var(--bg); align-self: flex-start; }
.ib-msgs > li.mine { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: color-mix(in srgb, var(--accent) 16%, var(--bg)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.ib-msgs p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.ib-msgs small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--faint); }
.ib-msgs > li.ib-card { align-self: center; max-width: 92%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; border-radius: var(--radius); border-style: dashed; font-variant-numeric: tabular-nums; }
.ib-card-k { font-size: 12px; color: var(--dim); }
.ib-sys { align-self: center !important; max-width: 92% !important; border: 0 !important; background: none !important; color: var(--dim); font-size: 13.5px; text-align: center; }
.ib-say { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px 14px; border-top: 1px solid var(--line); }
.ib-say textarea { flex: 1; resize: none; height: 46px; min-height: 46px; }
.ib textarea, .ib select, .ib input:not([type="hidden"]) { padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--fg); font: inherit; }
.ib textarea:focus, .ib select:focus, .ib input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 거래방은 자기 폭에 맞춰 (화면 폭이 아니라 — Account 안 · 반쪽 화면에서도): 중간 폭이면 방 안을 탭으로, 좁으면 목록 → 방 */
.ib-c { container-type: inline-size; }
@container (max-width: 1000px) {
  .ib-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); padding: 0 8px; }
  .ib-tabs a { padding: 10px 12px; color: var(--dim); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .ib-tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
  .ib-room { grid-template-columns: 1fr; border-top: 0; }
  .ib-glance { border-left: 0; padding: 0 16px; }
  .ib-glance .ib-p + .ib-p { border-top: 0; }
  .ib-p:not(.on) { display: none !important; }
  .ib-h3 { display: none; }
  .ib-msgs { padding: 12px 16px; }
}
@container (max-width: 720px) {
  .ib { grid-template-columns: 1fr; margin: 0; border: 0; border-radius: 0; height: calc(100dvh - 110px); }
  .ib.has-cur .ib-side { display: none; }
  .ib:not(.has-cur) .ib-main { display: none; }
  .ib-back { display: block; }
  .ib-msgs > li { max-width: 88%; }
  .ib-top { padding: 14px 16px 8px; }
}

/* Account 첫 화면: 한눈에 (내 페이지 · 찾아온 사람 · 튜토리얼 나란히, 좁으면 세로) */
.acct-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.acct-card { display: flex; flex-direction: column; }
.acct-card h2 small { margin-left: 6px; font-size: 14px; font-weight: 400; }
.acct-card > p, .acct-card > dl { margin: 0; padding: 16px 22px 0; }
.acct-card > .acct-actions { margin-top: auto; padding: 16px 22px 20px; }
.acct-card .acct-big { font-size: 26px; font-weight: 700; }
.acct-card .acct-meta { font-size: 14.5px; color: var(--dim); line-height: 1.6; }
.acct-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.acct-nums dt { font-size: 13.5px; color: var(--dim); }
.acct-nums dd { margin: 2px 0; font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.acct-nums small { font-size: 12.5px; }
.acct-card > .acct-meta:last-child { padding-bottom: 20px; }
.acct-steps ol { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px 16px; } /* 시작하기 단계도 가로로 */

/* 신청: 위에 순서 3단계 · 짧은 칸은 두 개씩 나란히, 긴 글 칸만 한 줄 */
.ap-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 20px; padding: 0; counter-reset: ap; font-size: 14px; color: var(--dim); }
.ap-steps li { counter-increment: ap; display: flex; align-items: center; gap: 8px; }
.ap-steps li::before { content: counter(ap); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); font-size: 12.5px; }
.ap-steps li.now { color: var(--fg); }
.ap-steps li.now::before { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#req { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; }
#req > :is(.two, .wide, .note, .hp) { grid-column: 1 / -1; }
#req > .cta { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 640px) { #req { grid-template-columns: minmax(0, 1fr); } }

.acct-panel .ib { margin: 0; height: min(72vh, 760px); max-width: none; }

.inv-pay { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.inv-pay p { margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.biz-kind label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--pill); cursor: pointer; }

.ib-preview { margin: 0; padding: 8px 18px; font-size: 13px; color: var(--busy); border-bottom: 1px dashed var(--line); }
.acct .ib-h { margin: 0; font-family: inherit; font-size: 20px; line-height: 1.3; }

.ib-void { text-decoration: line-through; color: var(--faint); }
.invoice.is-void .inv-head h1 { text-decoration: line-through; color: var(--faint); }

/* 개인정보 처리 방침 표 (약관) */
.pv-wrap { overflow-x: auto; margin: 12px 0 20px; border: 1px solid var(--line); border-radius: var(--radius); }
.pv-t { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.pv-t th, .pv-t td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pv-t th { color: var(--dim); font-weight: 600; font-size: 13px; background: var(--surface); }
.pv-t td:first-child { font-weight: 600; white-space: nowrap; }
.pv-t tr:last-child td { border-bottom: 0; }


/* 거래 금액 표: 총액 하나 → 계약금 · 잔금 · 받은 · 남은 (자동) */
.ib-money { display: grid; gap: 8px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ib-total { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ib-total label { font-weight: 700; }
.ib-total input { flex: 1 1 120px; min-height: 0; font-variant-numeric: tabular-nums; }
.ib-calc { display: grid; gap: 2px; margin: 0; font-variant-numeric: tabular-nums; }
.ib-calc > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.ib-calc dt { color: var(--dim); }
.ib-calc dd { margin: 0; }
.ib-calc .ok dd { color: var(--pal-5); }
.ib-calc .due { border-top: 1px dashed var(--line); padding-top: 8px; font-weight: 700; }
.ib-calc .sum dd { font-weight: 700; }
.ib-glance .bk-acts { flex-wrap: wrap; gap: 6px; }
.ib-glance .bk-acts .btn { min-height: 0; padding: 6px 11px; font-size: 13px; white-space: nowrap; }

/* 거래 닫기: 닫힌 거래 띠 · 읽기 전용 안내 · 닫기 버튼 */
.ib-closed { margin: 8px 18px 0; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); font-size: 14px; color: var(--dim); }
.ib-closed b { color: var(--fg); }
.ib-closed.done { border-color: color-mix(in srgb, var(--pal-5) 45%, var(--line)); }
.ib-closed.cancel { border-color: color-mix(in srgb, var(--err) 45%, var(--line)); }
.ib-shut { margin: 0; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--dim); font-size: 14px; }
.ib-close { margin: 4px 0 12px; font-size: 14px; }
.ib-close summary { cursor: pointer; color: var(--dim); }
.ib-close-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ib-close-f input { flex: 1 1 140px; min-height: 0; }
.ib-ended a { opacity: .75; }

.biz-help { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); font-size: 14px; color: var(--dim); }
.biz-help b { color: var(--fg); }
.biz-help dl { display: grid; gap: 8px; margin: 0; }
.biz-help dt { color: var(--fg); font-weight: 600; }
.biz-help dd { margin: 2px 0 0; }
.biz-help code { font-size: 13px; color: var(--accent); word-break: break-all; }
/* 인보이스 정보: 구분 칸 · 송금 링크 안내도 다른 칸과 같은 들여쓰기, 라디오는 작은 알약 */
#biz > .field { padding: 20px 26px 0; }
#biz > .biz-help { margin: 14px 26px 0; }
.biz-kind { display: flex; flex-wrap: wrap; gap: 8px; }
.biz-kind input { width: auto; min-height: 0; margin: 0; padding: 0; accent-color: var(--accent); }
/* 설정처럼: 칸마다 저장됨 / 비어 있음 */
.biz-st { margin-left: 6px; padding: 1px 8px; border: 1px solid var(--line); border-radius: var(--pill); font-size: 12px; font-weight: 400; color: var(--faint); }
#biz .is-set .biz-st { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); }

/* ── 섹션 이름표 · 공지 줄 · 프로필 고리 (design.label · notice · avatar) — 작가 본문 · 편집기 같게, 색은 작가 토큰 */
/* 이름표 알약: ● NOTICE */
.skin[data-label="pill"] .asec > .label, .ws-canvas .doc[data-label="pill"] .dsec-head .label { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: var(--pill, 999px); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 12px; letter-spacing: .12em; }
.skin[data-label="pill"]:not([data-frame="grid"]) .asec > .label::before, .ws-canvas .doc[data-label="pill"]:not([data-frame="grid"]) .dsec-head .label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* 공지 아이콘 칸: 번호 대신 ✦를 둥근 네모 안에, 줄은 칸 하나로 */
.skin[data-notice="icon"] .nl, .ws-canvas .doc[data-notice="icon"] .d-nl { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.skin[data-notice="icon"] .nl li { grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 14px 16px; align-items: start; }
.skin[data-notice="icon"] .nl li:last-child { border-bottom: 0; }
.skin[data-notice="icon"] .nl li::before, .ws-canvas .doc[data-notice="icon"] .d-nl .num { content: "✦"; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 12px; padding: 0; }
.ws-canvas .doc[data-notice="icon"] .d-nl .num { font-size: 0; }
.ws-canvas .doc[data-notice="icon"] .d-nl .num::before { content: "✦"; font-size: 12px; }
.ws-canvas .doc[data-notice="icon"] .d-nl .blk.row { padding-inline: 12px; }
/* 프로필 궤도 고리: 사진 둘레 점선 고리 + 주색 빛 */
:is(.skin[data-avatar="orbit"] .me, .ws-canvas .doc[data-avatar="orbit"] .d-about) { --orb: 14px; }
.skin[data-avatar="orbit"] .me .avatar, .ws-canvas .doc[data-avatar="orbit"] .av { box-shadow: 0 0 0 1px var(--line), 0 0 48px color-mix(in srgb, var(--accent) 35%, transparent); outline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: var(--orb); }
.skin[data-avatar="orbit"] .me .avatar, .ws-canvas .doc[data-avatar="orbit"] .av { margin: var(--orb); flex: none; }
@media (prefers-reduced-motion: no-preference) { .skin[data-avatar="orbit"] .me .avatar { animation: orb-breathe 6s ease-in-out infinite; } }
@keyframes orb-breathe { 50% { outline-offset: calc(var(--orb) + 4px); } }