/* madebyai 공통 - 토큰·부품·화면. 머리·모바일 메뉴·바닥·퀵메뉴는 layout.css, 로그인 전 화면은 auth.css, 관리자는 admin_style.css
   색은 [테마 확정] DS09 Graphite Premium(docs/design/design_system_09-graphite-premium.md §6)을 그대로 쓴다 - 화면에서 유일하게 색을 가진 것은 작품 이미지와 상태 표시다 */

/* ── 1. 테마 토큰 (DS09 §6 그대로) ── */
:root{
    --color-bg:            #000000;
    --color-bg-alt:        #0d0d0f;
    --color-surface:       #1c1c1e;
    --color-surface-2:     #2c2c2e;
    --gradient-hero:       linear-gradient(155deg,#5c5c62 0%,#303034 42%,#0f0f11 100%);
    --overlay-scrim:       linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,.75) 100%);
    --color-accent:        #ffffff;
    --color-accent-dim:    #e5e5e7;
    --color-accent-soft:   rgba(255,255,255,.08);
    --color-text:          #ffffff;
    --color-text-soft:     #d1d1d6;
    --color-text-muted:    #98989d;
    --color-text-dim:      #6e6e73;
    --color-border:        #2c2c2e;
    --color-border-soft:   rgba(255,255,255,.08);
    --color-border-strong: rgba(255,255,255,.28);
    --color-success:       #30d158;
    --color-warning:       #ffd60a;
    --color-danger:        #ff453a;
    --color-info:          #0a84ff;
    --color-disabled-bg:   #1c1c1e;
    --shadow-lift:         0 12px 40px rgba(0,0,0,.6);
    --focus-ring:          0 0 0 3px rgba(255,255,255,.18);
    --radius-sm:    10px;
    --radius-md:    14px;
    --radius-lg:    20px;
    --radius-pill:  999px;
}
/* ── 2. 셸 토큰 (ui/site-shell-standard.md §0-3 - 값은 위 테마에서 고른다) ── */
:root{
  --header-h:84px;--header-h-compact:64px;
  --header-bg:var(--color-bg);
  --header-glass:rgb(0 0 0 / .86);
  --header-shadow:0 10px 30px rgb(0 0 0 / 50%),0 1px 0 rgb(255 255 255 / 6%);
  --nav-accent:var(--color-accent);        /* 흰색 - 검정 머리 위 21:1 (3:1 기준) */
  --nav-glide:var(--color-accent-soft);
  --overlay:rgb(0 0 0 / 55%);
  --band:var(--color-surface);             /* 퀵메뉴·인증 오른쪽 면 */
  --band-text:#fff;
  --band-link:var(--color-text-soft);      /* #d1d1d6 - #1c1c1e 위 11.6:1 (4.5:1 기준) */
  --band-line:var(--color-border-soft);
  --band-accent:#fff;                      /* 밴드 위 강조 - 16.7:1 */
  /* 레이아웃 표준이 쓰는 이름을 테마 값에 잇는다(layout.css·admin_style.css 공용) */
  --color-primary:var(--color-accent);--color-primary-soft:var(--color-accent-soft);--color-white:#fff;--color-text-light:var(--color-text-soft);
  --color-error-bg:rgb(255 69 58 / 12%);
  --font:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --shell:1140px;--gutter:24px;
  --text-sm:15px;
}
@media (max-width:991.98px){:root{--header-h:72px;--header-h-compact:60px}}
@media (max-width:575.98px){:root{--gutter:16px}}

/* ── 3. 바탕 ── */
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-gutter:stable;background:var(--color-bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font);font-size:16px;line-height:1.65;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img,svg,video,iframe{max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--color-accent)}
h1,h2,h3{line-height:1.3;letter-spacing:-.02em;margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.lucide{width:18px;height:18px;flex:none;vertical-align:-3px}
.shell{width:100%;max-width:calc(var(--shell) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 16px;background:var(--color-accent);color:var(--color-bg);border-radius:var(--radius-sm);font-weight:700}
.skip-link:focus{left:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.eyebrow{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--color-text-muted)}
.muted{color:var(--color-text-muted)}

/* ── 4. 버튼 (DS09 §7 - 흰 버튼은 한 화면에 하나, 나머지는 테두리 버튼) ── */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border:1px solid var(--color-accent);border-radius:var(--radius-pill);background:var(--color-accent);color:var(--color-bg);font:inherit;font-size:15px;font-weight:650;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer}
.button:hover{background:var(--color-accent-dim);border-color:var(--color-accent-dim);color:var(--color-bg)}
.button-outline,.button-ghost{background:transparent;border-color:var(--color-border-strong);color:var(--color-text)}
.button-outline:hover,.button-ghost:hover{background:var(--color-accent-soft);border-color:var(--color-border-strong);color:var(--color-text)}
.button-ghost{border-color:transparent}
.button-small{min-height:40px;padding:0 16px;font-size:14px}
.button-full{width:100%}
.button-danger{background:transparent;border-color:rgb(255 69 58 / 50%);color:var(--color-danger)}
.button-danger:hover{background:var(--color-error-bg);border-color:var(--color-danger);color:var(--color-danger)}
.button[disabled]{opacity:.5;cursor:not-allowed}
.button-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.link-arrow{display:inline-flex;align-items:center;gap:4px;color:var(--color-text-soft);font-size:14px;font-weight:600;text-decoration:none}
.link-arrow:hover{color:var(--color-accent)}

/* ── 5. 알림 ── */
.flash-stack{display:grid;gap:8px;margin-top:16px}
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-soft);font-size:15px;line-height:1.6}
.notice-success{border-color:rgb(48 209 88 / 40%)}
.notice-success::before,.notice-error::before,.notice-warning::before{content:"";flex:none;width:8px;height:8px;margin-top:.55em;border-radius:50%;background:var(--color-success)}
.notice-error{border-color:rgb(255 69 58 / 45%)}.notice-error::before{background:var(--color-danger)}
.notice-warning{border-color:rgb(255 214 10 / 40%)}.notice-warning::before{background:var(--color-warning)}
.notice .lucide{margin-top:3px;color:var(--color-text-muted)}

/* ── 6. 폼 ── */
.form-stack{display:grid;gap:16px}
.field{display:grid;gap:6px}
.field-label{font-size:14px;font-weight:650;color:var(--color-text-soft)}
.field-label small,.field-help{font-weight:400;font-size:13px;color:var(--color-text-muted)}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=search],input[type=number],input:not([type]),select,textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-bg-alt);color:var(--color-text);font:inherit;font-size:16px}
textarea{min-height:160px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-text-muted) 50%),linear-gradient(135deg,var(--color-text-muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
input::placeholder,textarea::placeholder{color:var(--color-text-dim)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:var(--focus-ring)}
input[type=file]{width:100%;padding:12px;border:1px dashed var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-bg-alt);color:var(--color-text-soft);font:inherit;font-size:14px}
input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);background:transparent;color:var(--color-text);font:inherit;cursor:pointer}
.password-field{position:relative;display:block}
.password-field input{padding-right:84px}
.password-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-muted);font:inherit;font-size:13px;cursor:pointer}
.password-toggle:hover{color:var(--color-text)}
.check{display:flex;gap:10px;align-items:flex-start;min-height:28px;font-size:15px;color:var(--color-text-soft);cursor:pointer}
.check input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--color-accent)}
.check small{color:var(--color-text-muted)}
.consent{display:grid;gap:8px;margin:0;padding:14px 16px;border:1px solid var(--color-border);border-radius:var(--radius-sm)}
.consent legend{padding:0 6px;font-size:14px;font-weight:650;color:var(--color-text-soft)}
.consent legend small{font-weight:400;color:var(--color-text-muted)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.choice{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-alt);font-size:14px;color:var(--color-text-soft);cursor:pointer}
.choice:has(input:checked){border-color:var(--color-accent);color:var(--color-text);background:var(--color-accent-soft)}
.choice input{accent-color:var(--color-accent);width:18px;height:18px;margin:0}
.choice small{display:block;color:var(--color-text-dim);font-size:12px}
.form-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:10px}
@media (max-width:575.98px){.form-row{grid-template-columns:1fr}}
.form-section{display:grid;gap:16px;padding:24px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.form-section h2{font-size:18px}
.form-section>p{color:var(--color-text-muted);font-size:14px}
.thumb-keep{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.thumb-keep label{display:grid;gap:6px;font-size:13px;color:var(--color-text-muted)}
.thumb-keep img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--color-border)}
/* 대표 이미지 고르기(2026-11-04, vibecode.co.kr submit.php 썸네일 슬롯 구조 그대로 - 큰 미리보기 + 아래 한 줄 바(제목 / 가져오기)) */
.thumb-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.thumb-slots.has-current{grid-template-columns:repeat(4,minmax(0,1fr))}
.thumb-slot{position:relative;min-width:0;overflow:hidden;border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-alt);transition:border-color .12s}
.thumb-slot.is-empty{border-style:dashed}
.thumb-slot:not(.is-empty):hover{border-color:var(--color-border-strong)}
.thumb-slot:has(input:checked){border-color:var(--color-accent);background:var(--color-accent-soft)}
.thumb-slot:has(input:focus-visible){outline:2px solid var(--color-accent);outline-offset:2px}
.thumb-slot-media{position:relative;display:block;aspect-ratio:16/10;background:var(--color-surface-2);cursor:pointer}
.thumb-slot.is-empty .thumb-slot-media,.thumb-slot.is-empty .thumb-slot-title{cursor:default}
.thumb-slot-media img{display:block;width:100%;height:100%;object-fit:contain}
.thumb-slot-media img[hidden]{display:none}
.thumb-slot-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--color-text-dim)}
.thumb-slot-ph .lucide{width:28px;height:28px}
.thumb-slot-media img:not([hidden])+.thumb-slot-ph{display:none}
.thumb-slot:has(input:checked) .thumb-slot-media::after{content:"";position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat}
.thumb-slot-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 12px;border-top:1px solid var(--color-border)}
.thumb-slot-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;color:var(--color-text-soft);cursor:pointer}
.thumb-slot:has(input:checked) .thumb-slot-title{color:var(--color-text)}
.thumb-slot-action{flex:none;min-height:44px;padding:0 2px;border:0;background:none;color:var(--color-text-muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.thumb-slot-action:hover{color:var(--color-accent)}
.thumb-slot-action[disabled]{opacity:.5;cursor:wait}
.thumb-slot-meta{flex:none;font-size:13px;color:var(--color-text-muted)}
.thumb-status:empty{display:none}
.thumb-status.is-error{color:var(--color-danger)}
.thumb-notes{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--color-text-muted)}
.thumb-notes[hidden]{display:none}
.thumb-notes strong{margin-right:6px;font-weight:650;color:var(--color-text-soft)}
@media (max-width:575.98px){.thumb-slots,.thumb-slots.has-current{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.thumb-slot-foot{padding:0 8px}.thumb-slot-title,.thumb-slot-action{font-size:13px}}
/* 쓴 AI 도구 - 그룹 이름 왼쪽 열 + 도구 오른쪽, 그룹 사이 구분선(Codex 설계 상의 C). 도구 칸은 모든 그룹이 같은 열 폭이라 표처럼 맞는다 */
.tool-groups{display:grid;border-top:1px solid var(--color-border)}
.tool-group{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--color-border)}
.tool-group-name{padding-top:15px;font-size:14px;font-weight:700;color:var(--color-text)}
.tool-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.tool-option{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:10px;align-items:center;min-height:52px;padding:6px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-alt);cursor:pointer}
.tool-option input{grid-row:span 2;width:18px;height:18px;margin:0;accent-color:var(--color-accent)}
.tool-name{overflow-wrap:anywhere;font-size:14px;font-weight:600;line-height:1.35;color:var(--color-text-soft)}
.tool-option small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.35;color:var(--color-text-dim)}
.tool-option:has(input:checked){border-color:var(--color-accent);background:var(--color-accent-soft)}
.tool-option:has(input:checked) .tool-name{color:var(--color-text)}
@media (max-width:575.98px){.tool-group{grid-template-columns:1fr;gap:8px}.tool-group-name{padding-top:0}.tool-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* AI 를 쓴 곳 - 6개 한 줄(PC) · 3×2(태블릿) · 2×3(휴대폰) */
.scope-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.scope-grid .choice{min-width:0;justify-content:center;padding:8px 6px;white-space:nowrap}
@media (max-width:767.98px){.scope-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:575.98px){.scope-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 작품 올리기 화면 틀 - 폼 + 오른쪽 안내 사이드바, 바깥 폭은 머리(.shell)와 같다. 992px 미만은 사이드바가 폼 아래로 */
.work-compose{padding-bottom:64px}
/* 본문 + 오른쪽 안내(300px) 틀. .side-* 는 글·내 작품·신고 화면이 같은 틀을 쓴다(2026-11-04 사용자 요청 - 폭을 내비와 통일) */
.compose-layout,.side-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}   /* 작품 상세의 .work-layout 과 다른 틀 - 이름을 나눴다 */
.compose-main,.compose-aside,.side-main,.side-aside{min-width:0}
.compose-main{display:grid;gap:16px}
.compose-aside-inner,.side-aside-inner{position:sticky;top:calc(var(--header-h-compact) + 16px);display:grid;gap:12px}
.aside-box{padding:20px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.aside-box h2{margin-bottom:12px;font-size:16px}
.aside-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:step}
.aside-steps li{counter-increment:step;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--color-text-soft)}
.aside-steps li::before{content:counter(step);flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--color-surface-2);color:var(--color-text);font-size:12px;font-weight:700}
.aside-list{display:grid;gap:6px;margin:0;padding-left:18px;font-size:14px;color:var(--color-text-soft)}
.aside-list li::marker{color:var(--color-text-dim)}
.aside-box .link-arrow{margin-top:14px}
.aside-text{font-size:14px;line-height:1.7;color:var(--color-text-soft)}
.aside-cta{margin-top:16px}
.aside-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.side-nav{display:grid;margin:0;padding:0;list-style:none}
.side-nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 4px;border-bottom:1px solid var(--color-border-soft);color:var(--color-text-soft);font-size:14px;text-decoration:none}
.side-nav li:last-child a{border-bottom:0}
.side-nav a:hover,.side-nav a:focus-visible{color:var(--color-text)}
.side-nav a[aria-current]{color:var(--color-text);font-weight:700}
.side-nav svg{width:16px;height:16px;flex:none;color:var(--color-text-muted)}
.aside-status{display:grid;gap:10px;margin:0}
.aside-status dd{margin:4px 0 0;font-size:13.5px;line-height:1.6;color:var(--color-text-soft)}
.rights-box{display:grid;gap:12px;padding:16px 20px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-alt)}
.rights-box .check{font-weight:650;color:var(--color-text)}
@media (max-width:991.98px){.compose-layout,.side-layout{grid-template-columns:minmax(0,1fr)}.compose-aside-inner,.side-aside-inner{position:static}}
/* 스크린샷 - 미리보기 카드 + 하나씩 빼기(2026-11-04). 카드 비율은 대표 이미지 카드와 같은 16:10 */
.shot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.shot-item{display:grid;gap:6px;min-width:0}
.shot-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2)}
.shot-media img{display:block;width:100%;height:100%;object-fit:cover}
.shot-tag{position:absolute;left:8px;top:8px;padding:2px 8px;border-radius:var(--radius-pill);background:rgb(0 0 0 / 72%);color:var(--color-text);font-size:12px;font-weight:650}
.shot-remove{position:absolute;right:6px;top:6px;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid rgb(255 255 255 / 25%);border-radius:50%;background:rgb(0 0 0 / 72%);color:var(--color-text);cursor:pointer}
.shot-remove:hover{background:var(--color-danger);border-color:var(--color-danger)}
.shot-remove .lucide{width:18px;height:18px}
.shot-item.is-removed .shot-media img{opacity:.25}
.shot-undo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;border:0;background:none;color:var(--color-text);font:inherit;font-size:13px;cursor:pointer}
.shot-undo small{font-size:12px;color:var(--color-text-muted)}
.shot-undo strong{padding:6px 14px;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);font-weight:650}
.shot-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:16/10;border:2px dashed var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-alt);color:var(--color-text-soft);font:inherit;font-size:14px;font-weight:650;cursor:pointer}
.shot-add:hover{border-color:var(--color-border-strong);color:var(--color-text)}
.shot-add[hidden],.shot-remove[hidden],.shot-undo[hidden]{display:none}   /* display 지정이 hidden 을 덮지 않게 */
.shot-add small{font-size:12px;font-weight:400;color:var(--color-text-muted)}
.shot-add .lucide{width:22px;height:22px}
@media (max-width:575.98px){.shot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
/* 추가 링크 - 빈 칸은 접어 두고 「링크 추가」로 연다 */
.link-rows{display:grid;gap:16px}
.link-row[hidden],.link-add[hidden],.link-remove[hidden],.thumb-slots[hidden]{display:none}   /* .form-row·.button 의 display 가 hidden 을 덮지 않게 */
.link-row:has(.link-remove:not([hidden])){grid-template-columns:180px minmax(0,1fr) 44px;align-items:end}
.link-remove{display:inline-flex;align-items:center;justify-content:center;width:44px;height:48px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:transparent;color:var(--color-text-muted);cursor:pointer}
.link-remove:hover{color:var(--color-text);background:var(--color-accent-soft)}
.link-add{justify-self:start}
.kind-help{grid-column:1/-1;margin-top:-4px}   /* 고른 링크 종류가 작품 화면에서 무엇으로 보이는지 - 행 전체 폭 한 줄 */
.link-add small{font-size:13px;font-weight:400;color:var(--color-text-muted)}
@media (max-width:575.98px){.link-row:has(.link-remove:not([hidden])){grid-template-columns:minmax(0,1fr) 44px}.link-row:has(.link-remove:not([hidden])) .field:first-child{grid-column:1/-1}}

/* ── 7. 칩·배지 ── */
.chip-row{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:4px;min-height:26px;padding:0 10px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-bg-alt);color:var(--color-text-soft);font-size:12.5px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap}
a.chip:hover{border-color:var(--color-border-strong);color:var(--color-text)}
.chip-strong{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg)}
.badge{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:700;background:var(--color-surface-2);color:var(--color-text-soft);white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-pending{color:var(--color-warning)}
.badge-published{color:var(--color-success)}
.badge-rejected,.badge-hidden{color:var(--color-danger)}
.badge-revision{color:var(--color-info)}

/* ── 8. 섹션 머리 (css-standard §16.1 - 부제에 max-width 를 두지 않는다) ── */
.section{padding-block:56px}
.section+.section{padding-top:8px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.section-head h2{font-size:clamp(22px,2.4vw,28px)}
.section-head p{margin-top:6px;color:var(--color-text-muted);font-size:15px}
.page-head{padding-block:40px 24px}
.page-head h1{font-size:clamp(28px,3.4vw,40px)}
.page-lead{margin-top:10px;color:var(--color-text-soft);font-size:17px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;font-size:15px;color:var(--color-text-muted)}   /* 2026-11-04 사용자 요청 13→15px */
.crumbs a{color:var(--color-text-soft);text-decoration:none}
.crumbs a:hover{color:var(--color-accent);text-decoration:underline}
main.shell>.crumbs:first-child{padding-top:24px}
.crumbs span[aria-hidden]{color:var(--color-text-dim)}

/* ── 9. 첫 화면 ── */
.hero{position:relative;overflow:hidden;padding-block:56px 48px;background:var(--gradient-hero)}
.hero::after{content:"";position:absolute;inset:0;background:var(--overlay-scrim);pointer-events:none}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center}
.hero h1{font-size:clamp(32px,4.6vw,56px);letter-spacing:-.03em;line-height:1.15}
.hero-lead{margin-top:16px;color:var(--color-text-soft);font-size:18px}
.hero .button-row{margin-top:28px}
.hero-stat{margin-top:20px;color:var(--color-text-muted);font-size:14px}
.hero-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;transform:rotate(-3deg)}
.hero-mosaic a{display:block;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-lift);border:1px solid var(--color-border-soft)}
.hero-mosaic a:nth-child(3n+2){transform:translateY(24px)}
.hero-mosaic img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.hero-empty{display:grid;gap:10px;padding:28px;border:1px dashed var(--color-border-strong);border-radius:var(--radius-lg);background:rgb(0 0 0 / 35%);color:var(--color-text-soft)}
.hero-empty strong{font-size:20px;color:var(--color-text)}
@media (max-width:991.98px){.hero-inner{grid-template-columns:1fr}.hero-mosaic{transform:none}.hero-mosaic a:nth-child(3n+2){transform:none}}
@media (max-width:575.98px){.hero{padding-block:36px}.hero-lead{font-size:16px}.hero-mosaic{grid-template-columns:repeat(2,1fr)}.hero-mosaic a:nth-child(n+5){display:none}}

/* 에디터 추천 히어로 - 큰 슬라이드 + 옆 목록(site.js [data-pick]). 목록 막대가 다 차면 다음 작품 */
/* 2026-11-07 재설계(Codex 상의 B안): 이미지 위에 글을 올리지 않는다(밝은 이미지·글자 든 캡처에서 안 읽혔다).
   높이 예산을 정해 좌우를 맞춘다 - 왼쪽 = 테두리 2 + 이미지 270 + 글 220 = 492 / 오른쪽 = 칸 92 x 5 + 간격 8 x 4 = 492.
   글 칸은 제목 2줄·요약 2줄·메타 1줄·버튼 자리를 미리 잡아 작품이 바뀌어도 높이가 흔들리지 않는다 */
.hero-pick{padding-block:20px 28px;background:none}
.hero-pick::after{display:none}
.pick-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:16px}
.pick-head h1{margin:0;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;line-height:1.3}
.pick-head p{margin:0;color:var(--color-text-muted);font-size:14px}
.pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.pick-single{grid-template-columns:minmax(0,1fr)}
.pick-stage{min-width:0;border:1px solid var(--color-border-soft);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg-alt)}
.pick-slide{display:grid;grid-template-rows:270px 220px;min-width:0}
.pick-slide[hidden]{display:none}
.pick-bg{display:block;width:100%;height:270px;min-width:0;object-fit:contain;background:var(--color-bg-alt)}
.pick-body{display:grid;grid-template-rows:64px 42px 20px 44px;gap:8px;min-width:0;padding:13px 24px;background:var(--color-surface)}
.pick-eyebrow{display:none}   /* 목록과 머리글이 이미 「추천」임을 알려 준다 - 높이 예산을 위해 숨긴다 */
.pick-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;align-self:end;overflow:hidden;margin:0;font-size:26px;line-height:32px;letter-spacing:-.025em;overflow-wrap:anywhere}
.pick-title a{color:inherit;text-decoration:none}
.pick-title a:hover{text-decoration:underline}
.pick-summary{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;color:var(--color-text-soft);font-size:14px;line-height:21px;overflow-wrap:anywhere}
.pick-meta{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;min-width:0;margin:0;padding:0;list-style:none;color:var(--color-text-soft);font-size:13px;line-height:20px}
.pick-meta li{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pick-meta li:first-child{flex:0 0 auto}
.pick-meta li:not(:first-child){flex:0 1 auto}
.pick-meta .lucide{width:14px;height:14px;margin-right:4px;vertical-align:-2px}
.pick .button-row{flex-wrap:nowrap;gap:8px;margin:0}
.pick .button-row .button{padding-inline:18px;font-size:14px}
.pick-list{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;list-style:none}
.pick-list li{flex:0 0 auto;min-width:0}
.pick-item{position:relative;display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;gap:12px;height:92px;padding:9px 12px;border:1px solid var(--color-border-soft);border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg-alt);color:var(--color-text-soft);text-decoration:none}
.pick-item:hover,.pick-item[aria-current]{background:var(--color-surface);color:var(--color-text)}
.pick-item[aria-current]{border-color:var(--color-border-strong)}
.pick-item img{display:block;width:128px;height:72px;object-fit:contain;border-radius:var(--radius-sm);background:var(--color-bg)}
.pick-item-text{display:grid;grid-template-rows:22px 20px 18px;gap:4px;min-width:0}
.pick-item-text strong,.pick-item-summary,.pick-item-text small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pick-item-text strong{font-size:15px;line-height:22px}
.pick-item-summary{color:var(--color-text-soft);font-size:13px;line-height:20px}
.pick-item-text small{color:var(--color-text-muted);font-size:12px;line-height:18px}
/* 막대가 다 차는 애니메이션 끝(animationend)이 다음 작품으로 넘기는 신호다(site.js) - 지우면 자동 넘김도 멈춘다 */
.pick-bar{position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:var(--radius-pill);background:var(--color-accent);transform:scaleX(0);transform-origin:left}
.pick-item[aria-current] .pick-bar{transform:scaleX(1)}
.pick.is-auto .pick-item.is-active .pick-bar{animation:pick-fill 6s linear forwards}
.pick.is-auto.is-paused .pick-item.is-active .pick-bar{animation-play-state:paused}
@keyframes pick-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* 추천이 1개면 목록이 없다 - 이미지·글을 가로로 놓아 빈 오른쪽 칸을 만들지 않는다 */
.pick-single .pick-slide{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:270px;align-items:center}
.pick-single .pick-body{align-content:center;height:100%}
@media (min-width:992px) and (max-width:1199.98px){
  .pick-body{padding-inline:18px}
  .pick-item{grid-template-columns:112px minmax(0,1fr);gap:10px}
  .pick-item img{width:112px;height:63px}
}
@media (max-width:991.98px){
  .pick{grid-template-columns:minmax(0,1fr)}
  .pick-slide{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:270px;align-items:center}
  .pick-body{align-content:center;height:100%;padding-inline:20px}
  /* 좁은 화면은 목록도 한 번에 한 작품만(다음 작품이 반쯤 보이지 않게 - 2026-11-02 사용자 요청). 지금 작품으로 site.js 가 옮긴다 */
  .pick-list{flex-direction:row;gap:0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
  .pick-list::-webkit-scrollbar{display:none}
  .pick-list li{flex:0 0 100%;scroll-snap-align:start}
}
@media (max-width:767.98px){
  .pick-slide,.pick-single .pick-slide{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 220px}
  .pick-bg{height:auto;max-height:270px;aspect-ratio:16/9}
  .pick-body,.pick-single .pick-body{height:auto;padding:13px 20px}
}
@media (max-width:575.98px){
  /* 정보 줄(분류·도구·제작자)은 모바일 폭에 다 안 들어가 말줄임으로 잘려 숨긴다(2026-11-07 사용자 결정) - 행 20px + 간격 8px 만큼 글 칸을 줄인다 */
  .pick-slide,.pick-single .pick-slide{grid-template-rows:auto 202px}
  .pick-body,.pick-single .pick-body{grid-template-rows:60px 42px 44px;padding:20px}
  .pick-meta{display:none}
  .pick-title{font-size:24px;line-height:30px}
  .pick-item{grid-template-columns:112px minmax(0,1fr);gap:10px}
  .pick-item img{width:112px;height:63px}
}

/* ── 10. 작품 카드 ── */
.list-page,.side-page{padding-bottom:64px}   /* 작품 목록·제작자·글·내 작품·신고 화면 마지막 카드(빈 안내)와 바닥 사이 여백 - .narrow 와 같은 값(2026-11-04 사용자 요청) */
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.work-card{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-md);background:var(--color-surface);overflow:hidden;border:1px solid var(--color-border-soft)}
.work-card:hover{border-color:var(--color-border-strong)}
.work-card-media{display:block;position:relative;aspect-ratio:16/9;background:var(--color-surface-2);overflow:hidden}
.work-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.work-card-media .chip{position:absolute;left:10px;top:10px;background:rgb(0 0 0 / 70%);border-color:transparent;color:#fff}
.work-card-media .work-card-play{position:absolute;right:10px;top:10px;display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;background:rgb(0 0 0 / 70%);color:#fff}
.work-card-media .work-card-play .lucide{width:14px;height:14px}
.work-card-body{display:flex;flex-direction:column;gap:8px;flex:1;padding:14px 16px 16px}
.work-card-title{font-size:17px;line-height:1.35}
.work-card-title a{text-decoration:none}
.work-card-title a::after{content:"";position:absolute;inset:0}   /* 카드 전체를 누를 수 있게 */
.work-card-summary{color:var(--color-text-muted);font-size:14px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.work-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px;font-size:13px;color:var(--color-text-muted)}
.work-card-meta .maker{position:relative;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.work-card-meta .stats{display:inline-flex;gap:10px;flex:none}
.work-card-meta .stats span{display:inline-flex;align-items:center;gap:3px}
.work-card-meta .lucide{width:14px;height:14px;vertical-align:-2px}
.work-card .chip-row{position:relative;z-index:1}
.empty-state{display:grid;justify-items:start;gap:12px;padding:32px;border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);color:var(--color-text-soft)}
.empty-state strong{font-size:18px;color:var(--color-text)}

/* 인기 순위 */
.rank-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.rank-list li{position:relative;display:grid;grid-template-columns:34px 112px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--color-border)}
/* 번호는 저장한 순위(rank_no) - 인기 화면과 같은 번호(그사이 비공개된 작품이 빠지면 번호가 비어 보인다, 2026-11-05) */
.rank-no{font-size:22px;font-weight:800;color:var(--color-text-muted);text-align:center}
.rank-list li.is-top .rank-no{color:var(--color-text)}
.rank-list img{display:block;width:112px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-sm)}
.rank-list a{text-decoration:none}
.rank-list a::after{content:"";position:absolute;inset:0}
.rank-title{display:block;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-sub{display:block;font-size:13px;color:var(--color-text-muted)}
@media (max-width:767.98px){.rank-list{grid-template-columns:1fr}.rank-list li{grid-template-columns:28px 96px minmax(0,1fr)}.rank-list img{width:96px}}
/* 인기 순위 화면(/trending) - 한 줄 목록 + 어제 대비 변동(2026-11-05 사용자 요청). 변동은 색만이 아니라 화살표·글자로도 보인다 */
/* 안내 한 줄(기준 시각 | 점수 설명 펼치기) - 2026-11-05 사용자 지적: 산만하다 */
.trend-info{margin-bottom:12px;font-size:14px}
.trend-help summary{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;min-height:44px;list-style:none;cursor:pointer}
.trend-help summary::-webkit-details-marker{display:none}
.trend-help summary:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}
.trend-stamp,.trend-help-toggle{display:inline-flex;align-items:center;gap:6px}
.trend-stamp{color:var(--color-text-soft)}
.trend-help-toggle{color:var(--color-text-muted)}
.trend-help summary:hover .trend-help-toggle,.trend-help[open] .trend-help-toggle{color:var(--color-text)}
.trend-info .lucide{width:16px;height:16px}
.trend-help ul{margin:4px 0 8px;padding:12px 16px 12px 32px;border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-soft);line-height:1.7}
.trend-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-border-soft)}
.trend-row{position:relative;display:grid;grid-template-columns:64px 160px minmax(0,1fr) auto;gap:20px;align-items:center;padding:16px 8px;border-bottom:1px solid var(--color-border-soft);transition:background-color .15s ease}
.trend-row:hover{background:var(--color-accent-soft)}
.trend-rank{display:flex;flex-direction:column;align-items:center;gap:4px}
.trend-no{font-size:28px;font-weight:800;line-height:1;color:var(--color-text-muted)}
.trend-row.is-top .trend-no{color:var(--color-text)}
.trend-move{display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:700;line-height:1;color:var(--color-text-muted)}
.trend-move svg{width:14px;height:14px}
.trend-move.is-up{color:var(--color-success)}
.trend-move.is-down{color:var(--color-danger)}
.trend-move.is-new{padding:3px 6px;border-radius:999px;background:var(--color-accent-soft);color:var(--color-accent);font-size:11px;letter-spacing:.04em}
.trend-thumb{display:block;width:160px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-sm);background:var(--color-surface)}
.trend-main{min-width:0}
.trend-title{display:block;font-size:17px;font-weight:650;color:var(--color-text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trend-title::after{content:"";position:absolute;inset:0}
.trend-title:focus-visible{outline:none}
.trend-row:focus-within{outline:2px solid var(--color-accent);outline-offset:-2px}
.trend-sub{display:block;margin-top:4px;font-size:14px;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trend-stats{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;white-space:nowrap}
.trend-score{font-size:14px;color:var(--color-text-muted)}
.trend-score strong{margin-right:2px;font-size:20px;font-weight:800;color:var(--color-text)}
.trend-week{font-size:13px;color:var(--color-text-muted)}
.trend-more{margin:24px 0 0;font-size:14px;color:var(--color-text-soft)}
.trend-more .link-arrow{margin-left:6px}
@media (max-width:767.98px){
.trend-row{grid-template-columns:44px 96px minmax(0,1fr);gap:12px;padding:14px 4px}
.trend-no{font-size:22px}
.trend-thumb{width:96px}
.trend-title{font-size:16px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.trend-stats{grid-column:3;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:10px;text-align:left}
.trend-score strong{font-size:16px}
.trend-week-label{display:none}
}

/* 분류·도구 */
/* 작품 둘러보기 - 제목 한 줄 + 분류 한 줄 + AI 도구 펼침(첫 화면) */
.section.section-tight{padding-block:32px}
.browse-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.browse-head h2{font-size:clamp(20px,2vw,24px)}
.browse-tools{margin-top:10px}
.browse-tools summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--radius-pill);color:var(--color-text-soft);font-size:14px;font-weight:600;cursor:pointer;list-style:none}
.browse-tools summary::-webkit-details-marker{display:none}
.browse-tools summary:hover{background:var(--color-accent-soft);color:var(--color-text)}
.browse-tools summary .lucide{width:16px;height:16px}
.browse-tools summary small{color:var(--color-text-muted);font-weight:500}
.browse-tools summary .lucide:last-child{transition:transform .2s ease}
.browse-tools[open] summary .lucide:last-child{transform:rotate(90deg)}
.browse-tools .tool-grid{margin-top:8px;padding:12px;border:1px solid var(--color-border-soft);border-radius:var(--radius-md)}
@media (min-width:768px){.browse-tools .tool-chip{min-height:40px;padding:0 14px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.browse-tools summary .lucide:last-child{transition:none}}

/* 분류 - 한 줄 알약 버튼. 화면이 좁아 넘치면 줄바꿈 없이 옆으로 넘겨 본다(좁은 화면은 화면 끝까지 붙여 다음 버튼이 반쯤 보이게) */
.cat-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
@media (max-width:767.98px){.cat-row{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}}
.cat-row::-webkit-scrollbar{display:none}
.cat-pill{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none}
.cat-pill:hover{border-color:var(--color-border-strong);color:var(--color-text)}
.cat-pill .lucide{width:16px;height:16px;color:var(--color-text-soft)}
.cat-pill small{color:var(--color-text-muted);font-weight:500}
.tool-grid{display:flex;flex-wrap:wrap;gap:8px}
.tool-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);font-size:14px;font-weight:600;text-decoration:none}
.tool-chip:hover{border-color:var(--color-border-strong);color:var(--color-text)}
.tool-chip small{color:var(--color-text-muted);font-weight:500}

/* 목록 도구줄 */
.list-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.search-form{display:flex;gap:8px;flex:1;max-width:460px}
.list-cats{margin-bottom:20px}
.search-form input{min-height:44px}
.tab-row{display:flex;gap:4px;padding:4px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface)}
.tab-row a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--radius-pill);font-size:14px;font-weight:600;color:var(--color-text-muted);text-decoration:none}
.tab-row a[aria-current]{background:var(--color-accent);color:var(--color-bg)}
.pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:32px}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--color-border);border-radius:var(--radius-pill);text-decoration:none;font-size:14px}
.pagination [aria-current]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg);font-weight:700}

/* 제작자 안내 띠 */
.maker-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:32px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--gradient-hero)}
.maker-cta h2{font-size:24px}
.maker-cta p{margin-top:6px;color:var(--color-text-soft)}

/* ── 11. 작품 상세 ── */
.work-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);gap:32px;align-items:start;padding-block:24px 56px}
.work-media{border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border-soft)}
.work-media img,.work-media iframe{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:0}
.work-side{display:grid;gap:16px}   /* 스크롤을 따라오지 않게 고정 배치(2026-11-02 사용자 요청 - sticky 제거) */
.work-side h1{font-size:clamp(26px,3vw,34px)}
.work-summary{color:var(--color-text-soft);font-size:17px}
.work-maker{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--color-text-muted)}
.work-maker a{color:var(--color-text);font-weight:650;text-decoration:none}
.work-actions{display:flex;flex-wrap:wrap;gap:8px}
.work-actions form{margin:0}
.like-button[aria-pressed=true]{background:var(--color-accent-soft);border-color:var(--color-accent)}
.like-button[aria-pressed=true] .lucide{fill:currentColor}
.meta-list{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0;padding:16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font-size:14px}
.meta-list dt{color:var(--color-text-muted)}
.meta-list dd{margin:0;color:var(--color-text-soft)}
.meta-list dd a{text-decoration:none}
.work-body{display:grid;gap:28px;margin-top:28px}
.work-body h2{font-size:20px;margin-bottom:12px}
.work-desc{color:var(--color-text-soft);white-space:pre-line;font-size:16px;line-height:1.8}
/* 스크린샷 - 한 줄 가로 슬라이드(2026-11-04 사용자 요청). PC 2장·모바일 1장(다음 장이 조금 보이게)씩, 칸은 16:10 고정에 이미지 전체를 보인다(세로로 긴 화면도 잘리지 않게) */
.gallery-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.work-body .gallery-head h2{margin-bottom:0}
.gallery-head h2 small{margin-left:6px;font-size:14px;font-weight:500;color:var(--color-text-muted)}
.gallery-nav{display:flex;align-items:center;gap:6px}
.gallery-nav[hidden]{display:none}
.gallery-count{min-width:56px;margin-right:4px;text-align:right;font-size:13px;color:var(--color-text-muted)}
.gallery-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--color-border-strong);border-radius:50%;background:transparent;color:var(--color-text);cursor:pointer}
.gallery-btn:hover:not([disabled]){background:var(--color-accent-soft)}
.gallery-btn[disabled]{opacity:.35;cursor:default}
.gallery{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:var(--radius-md)}
.gallery::-webkit-scrollbar{display:none}
.gallery:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}
.gallery a{flex:0 0 calc((100% - 12px) / 2);scroll-snap-align:start;display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--color-border-soft);border-radius:var(--radius-md);background:var(--color-surface-2)}
.gallery img{display:block;width:100%;height:100%;object-fit:contain}
@media (prefers-reduced-motion:reduce){.gallery{scroll-behavior:auto}}
/* 스크린샷 크게 보기(2026-11-05 사용자 요청) - <dialog>. 사진이 잘 보이게 밝기 설정과 상관없이 어두운 바탕 */
html.lightbox-open{overflow:hidden}
.lightbox{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:transparent;color:#fff;touch-action:pan-y pinch-zoom}
.lightbox::backdrop{background:rgba(10,10,14,.96)}
.lightbox-inner{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:64px 88px}
.lightbox-figure{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;max-height:100%;margin:0}
.lightbox-figure img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 160px);object-fit:contain;border-radius:var(--radius-md);background:#111}
.lightbox-count{padding:4px 12px;border-radius:999px;background:rgba(0,0,0,.7);font-size:14px;color:rgba(255,255,255,.88)}
.lightbox-btn{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(0,0,0,.5);color:#fff;cursor:pointer}
.lightbox-btn:hover{background:rgba(255,255,255,.2)}
.lightbox-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lightbox-btn[hidden]{display:none}
.lightbox-btn svg{width:24px;height:24px}
.lightbox-prev{top:50%;left:20px;transform:translateY(-50%)}
.lightbox-next{top:50%;right:20px;transform:translateY(-50%)}
.lightbox-close{top:12px;right:20px}
@media (max-width:575.98px){
.lightbox-inner{padding:68px 12px 96px}
.lightbox-figure img{max-height:calc(100dvh - 200px)}
.lightbox-prev,.lightbox-next{top:auto;bottom:24px;transform:none}
.lightbox-prev{left:calc(50% - 64px)}
.lightbox-next{right:calc(50% - 64px)}
.lightbox-close{right:12px}
}
/* 작품 보러 가기 - 눈에 띄게(2026-11-04 사용자 요청): 밝은 테두리 카드 + 동그란 아이콘 + 굵은 이름 + 오른쪽 「바로가기」 */
.link-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.link-list a{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 14px 10px 12px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);text-decoration:none;transition:border-color .15s,background .15s}
.link-list a:hover{border-color:var(--color-accent);background:var(--color-surface-2)}
.link-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--color-accent);color:var(--color-bg)}
.link-icon .lucide{width:20px;height:20px}
.link-text{display:grid;gap:2px;min-width:0}
.link-text strong{font-size:16px;font-weight:700;line-height:1.3}
.link-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--color-text-muted)}
.link-go{flex:none;display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:8px 14px;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);font-size:14px;font-weight:650;color:var(--color-text)}
.link-go .lucide{width:16px;height:16px}
.link-list a:hover .link-go{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg)}
.outbound-note{margin-top:10px;font-size:13px;color:var(--color-text-muted)}
/* 신고·삭제 요청 - 회색 안내 글과 구분되게 경고 색(2026-11-04 사용자 요청) */
.report-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--color-danger);text-decoration:none}
.report-link:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:991.98px){.work-layout{grid-template-columns:1fr}}
@media (max-width:575.98px){.gallery a{flex-basis:85%}}

/* 제작자 화면 */
.maker-head{display:grid;gap:10px;padding-block:40px 24px}
.maker-head h1{font-size:clamp(28px,3.4vw,38px)}
.maker-handle{color:var(--color-text-muted);font-size:15px}
.maker-bio{color:var(--color-text-soft);white-space:pre-line}

/* ── 12. 내 작품·계정 ── */
.my-list{display:grid;gap:12px}
.my-item{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.my-item img{display:block;width:160px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-sm)}
.my-item h2{font-size:17px}
.my-item p{font-size:14px;color:var(--color-text-muted);margin-top:4px}
.my-item .reason{margin-top:8px;padding:8px 12px;border-radius:var(--radius-sm);background:var(--color-bg-alt);color:var(--color-text-soft);font-size:14px}
.my-item .button-row{justify-content:flex-end}
@media (max-width:767.98px){.my-item{grid-template-columns:1fr}.my-item img{width:100%}.my-item .button-row{justify-content:flex-start}}
.panel-grid{display:grid;gap:20px;padding-bottom:56px}
.panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:24px;padding:24px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.panel h2{font-size:18px}
.panel-intro p{margin-top:6px;color:var(--color-text-muted);font-size:14px}
@media (max-width:991.98px){.panel{grid-template-columns:1fr}}
.narrow{max-width:760px;padding-bottom:64px}   /* 폼 화면 마지막 버튼과 바닥 사이 여백(2026-11-04 사용자 요청) */

/* ── 13. 글 화면(약관·소개) ── */
.content-body{color:var(--color-text-soft)}   /* 폭·아래 여백은 .side-layout·.side-page 가 맡는다(2026-11-04) */
.content-body>:first-child,.content-body>.steps:first-child{margin-top:0}   /* 오른쪽 안내와 위쪽 줄을 맞춘다 */
.content-body>.button-row{margin-top:28px}
.content-body h2{margin:36px 0 12px;font-size:21px;color:var(--color-text)}
.content-body h3{margin:24px 0 8px;font-size:17px;color:var(--color-text)}
.content-body p,.content-body li{line-height:1.8}
.content-body p+p{margin-top:12px}
.content-body ul,.content-body ol{padding-left:22px;margin:12px 0}
.content-body table{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px}
.content-body th,.content-body td{padding:10px;border:1px solid var(--color-border);text-align:left;vertical-align:top}
.content-body th{background:var(--color-surface);color:var(--color-text)}
.table-scroll{overflow-x:auto}
.table-scroll-hint{display:none;position:sticky;left:0;font-size:12.5px;color:var(--color-text-muted)}
@media (max-width:575.98px){.table-scroll-hint{display:block}.table-scroll table{min-width:520px}}
.steps,.content-body .steps{list-style:none;padding:0;margin:16px 0;display:grid;gap:12px;counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.steps li::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--color-accent);color:var(--color-bg);font-weight:800}
.steps strong{display:block;color:var(--color-text)}
/* 업데이트 내역 - 카드 안에 연도 > 월 > 날짜 줄(2026-11-04 사용자 지정) */
.history{padding:32px 32px 12px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.history-year{display:flex;align-items:center;gap:20px;margin:4px 0 8px;font-size:clamp(32px,4vw,42px);font-weight:800;line-height:1.1;color:var(--color-text)}
.history-year::after{content:"";flex:1;height:1px;background:var(--color-border)}
.history-year+.history-months{margin-bottom:28px}
.history-month{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--color-border)}
.history-month:last-child{border-bottom:0}
.history-month h3{font-size:16px;font-weight:800;line-height:1.6;color:var(--color-text)}
.history-items{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.history-items li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px}
.history-items time{font-size:15px;font-weight:600;line-height:1.6;color:var(--color-text-muted)}
.history-items strong{display:block;font-size:15.5px;font-weight:500;line-height:1.6;color:var(--color-text)}
.history-items p{margin-top:2px;font-size:14px;line-height:1.6;color:var(--color-text-muted)}
@media (max-width:575.98px){.history{padding:24px 18px 8px}.history-month{grid-template-columns:1fr;gap:10px}.history-items li{grid-template-columns:40px minmax(0,1fr)}}

/* ── 14. 자주 묻는 질문 (css-standard §16.2·§16.6 goin 모양 - 좌 제목 / 우 선만 있는 목록, 하나만 펼침) ── */
.faq-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);gap:40px;align-items:start}
.faq-section h2{font-size:clamp(24px,2.6vw,32px)}
.faq-section .faq-intro p{margin-top:10px;color:var(--color-text-muted)}
/* FAQ 왼쪽 - 답을 못 찾았을 때 이어 갈 곳 3개 */
.help-links{display:grid;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.help-links a{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);text-decoration:none}
.help-links a:hover{border-color:var(--color-border-strong)}
.help-links a>.lucide:first-child{flex:none;width:20px;height:20px;color:var(--color-text-soft)}
.help-links a>.lucide:last-child{flex:none;width:16px;height:16px;margin-left:auto;color:var(--color-text-muted)}
.help-links span{display:grid;gap:2px;min-width:0}
.help-links strong{font-size:15px}
.help-links small{overflow:hidden;color:var(--color-text-muted);font-size:13px;white-space:nowrap;text-overflow:ellipsis}
.faq-list{border-top:1px solid var(--color-border)}
.faq-list details{border-bottom:1px solid var(--color-border)}
.faq-list summary{position:relative;display:block;padding:20px 40px 20px 0;font-size:17px;font-weight:650;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:300;color:var(--color-text-muted);transition:transform .2s ease}
.faq-list details[open] summary::after{transform:translateY(-50%) rotate(45deg);color:var(--color-text)}
.faq-list details p{padding:0 40px 20px 0;color:var(--color-text-soft);line-height:1.8}
@media (max-width:767.98px){.faq-section{grid-template-columns:1fr;gap:16px}}

/* ── 15. 오류 화면 ── */
.error-page{display:grid;justify-items:start;gap:14px;min-height:50vh;align-content:center;padding-block:64px}
.error-page h1{font-size:clamp(26px,3vw,34px)}
.error-page p{color:var(--color-text-soft);max-width:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}