/* 검색엔진용 아카이브 꾸밈 (.seo-archive)
   2026-10-12 에 index.html 안에서 이 파일로 옮겼습니다. 글자 하나 안 바꿨습니다.
   고친 뒤 : node tools/check.js 로 확인하고 sh tools/deploy.sh 로 올립니다. */

  .seo-archive{background:#f2f0ec;color:#6b6b6b;font-size:.86rem;padding:30px 0;border-top:1px solid #e4e1db}
  .seo-archive h2{font-size:1rem;color:#3a3640;margin-bottom:10px}
  .seo-archive h3{font-size:.9rem;color:#3a3640;margin:16px 0 6px}
  .seo-archive p{margin:6px 0;line-height:1.7;word-break:keep-all}
  .seo-archive ul{list-style:none;padding:0;margin:6px 0}
  .seo-archive li{padding:3px 0;line-height:1.6}
  .seo-archive a{color:#5b4b8a}

/* ══════════════════════════════════════════════════════════════════
   2026-08 개편 ④ 모바일 친화 — 이 스타일 블록이 문서에서 가장 마지막이라
   앞의 모든 규칙을 이긴다. 손가락 기준(44px)·글씨 하한(12px)·노치 여백만
   손대고, 미니멀 갤러리의 넓은 자간과 얇은 선은 그대로 둔다.
   ══════════════════════════════════════════════════════════════════ */

/* 탭 하이라이트: 기본 파란 사각형 대신 브랜드 톤으로 */
a,button,[onclick],.more,.back,summary,label,input,select,textarea{
  -webkit-tap-highlight-color:rgba(90,74,138,.13)}

@media(max-width:900px){
  /* 주소창이 줄었다 늘었다 하는 모바일에서 100vh 는 실제 화면보다 크다 */
  nav.gnb{max-height:calc(100dvh - 110px);overscroll-behavior:contain}
  nav.gnb a{padding:12px 18px;min-height:46px;display:flex;align-items:center;box-sizing:border-box}
}

@media(max-width:720px){
  /* ── 노치·홈바 여백 (viewport-fit=cover 와 짝). 모바일에서만 적용해
        PC 의 넉넉한 좌우 여백은 건드리지 않는다 ── */
  .wrap{padding-left:max(15px,env(safe-area-inset-left));
        padding-right:max(15px,env(safe-area-inset-right))}
  footer{padding-bottom:max(34px,calc(24px + env(safe-area-inset-bottom)))}
  .seo-archive{padding-bottom:max(30px,calc(20px + env(safe-area-inset-bottom)))}

  /* ── 손가락 크기: 최소 44px ── */
  .logo{padding:8px 0}
  #authNav a{display:inline-block;padding:11px 10px;margin:0 -2px}
  .sec-head .more{display:inline-block;padding:12px 2px;margin:-12px 0}
  .back{display:inline-block;padding:12px 4px 12px 0;margin:16px 0 0}
  #app a.hl{display:inline-block;padding:11px 0}
  .tabs button,.wk-tabs button{padding:13px 2px;min-width:44px;text-align:center}
  .act-btns a,.hero .btns a{padding:13px 22px}
  footer a{display:inline-block;padding:9px 0}
  .foot-in>div{line-height:2.1}
  .seo-archive a{display:inline-block;padding:11px 5px;margin:0 -5px}
  .seo-archive li{padding:2px 0}
  .seo-archive p{margin:8px 0}

  /* ── 글씨 하한: 12px 아래로는 내려가지 않게. 자간은 유지 ── */
  .badge{font-size:.72rem;letter-spacing:.16em;padding:4px 9px 4px 11px}
  .hero .tag{font-size:.72rem;letter-spacing:.2em}
  .sec-head .more{font-size:.78rem;letter-spacing:.16em}
  .act-btns a,.hero .btns a{font-size:.8rem;letter-spacing:.1em}
  .foot-in{font-size:.84rem}
  .seo-archive{font-size:.88rem}

  /* ── 고정 영역 줄이기: 상단바(38px)를 같이 붙여두지 않고 흘려보낸다.
        헤더만 맨 위에 붙어 화면을 91px → 53px 만 쓴다 ── */
  .topbar{position:static}
  header{top:0}
}

/* ══════════════════════════════════════════════════════════════════
   2026-08 개편 ⑤ 방명록 · 작품 댓글 (로그인 없이)
   ══════════════════════════════════════════════════════════════════ */
.gb-form{border:1px solid var(--line);background:#fff;padding:18px;margin-top:16px}
.gb-form input,.gb-form textarea{width:100%;box-sizing:border-box;margin-top:9px;padding:12px 13px;
  border:1px solid var(--line);background:#fff;font-family:inherit;font-size:.93rem;color:var(--ink);border-radius:0}
.gb-form textarea{min-height:92px;resize:vertical;line-height:1.7}
.gb-form input:focus,.gb-form textarea:focus,.cf-in:focus{outline:none;border-color:var(--accent)}
.gb-form input::placeholder,.gb-form textarea::placeholder,.cf-in::placeholder{color:#a9a6ae}
.gb-card{border-top:1px solid var(--line);padding:15px 2px}
.gb-card .gnm{font-weight:600;font-size:.87rem}
.gb-card .gdt{color:var(--sub);font-size:.74rem;margin-left:8px}
.gb-card .gone{font-size:.98rem;line-height:1.8;margin-top:6px;word-break:keep-all;white-space:pre-line}
.gb-adm{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cf-in{padding:11px 12px;border:1px solid var(--line);background:#fff;font-family:inherit;
  font-size:.9rem;color:var(--ink);box-sizing:border-box;border-radius:0}

/* 메뉴가 10개가 되면서 노트북 폭(901~1240px)에서 두 줄로 접히던 것을 한 줄로 되돌린다 */
@media(min-width:901px) and (max-width:1240px){
  nav.gnb a{padding:8px 8px;letter-spacing:.02em}
  nav.gnb a.on::after{left:8px;right:8px}
}

@media(max-width:720px){
  .gb-form{padding:14px}
  .gb-form input,.gb-form textarea{font-size:16px}  /* iOS 자동 확대 방지 */
  .cf-in{font-size:16px}
  .gb-adm{gap:12px}
  .gb-adm .linkbtn{padding:12px 4px}
}

/* ── 2026-08 개편 ⑥ 방명록 질문 편집 · 질문별 공개/비공개 ───────────── */
.gb-q{font-size:.86rem;font-weight:600;margin-top:14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.gb-q:first-child{margin-top:0}
.gb-tag{font-size:.68rem;font-weight:500;letter-spacing:.02em;border-radius:11px;padding:2px 8px;
  border:1px solid var(--line);color:var(--sub);background:#fff;white-space:nowrap}
.gb-tag.on{border-color:var(--accent);color:var(--accent)}
.gb-form .gb-q + input,.gb-form .gb-q + textarea{margin-top:5px}
.gans{margin-top:9px;padding:10px 13px;background:var(--paper)}
.gal{font-size:.75rem;color:var(--sub);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gav{font-size:.9rem;line-height:1.8;margin-top:3px;white-space:pre-line;word-break:keep-all}
.gb-qrow{display:flex;align-items:center;gap:8px;margin-top:8px;padding:9px 10px;
  border:1px solid var(--line);background:#fff;flex-wrap:wrap}
.gb-qrow input[type=text]{flex:1;min-width:150px}
.gb-qrow select{padding:7px 8px;border:1px solid var(--line);background:#fff;
  font-family:inherit;font-size:.84rem;color:var(--ink);border-radius:0}
.gb-req{font-size:.8rem;color:var(--sub);display:flex;align-items:center;gap:5px;white-space:nowrap}
.gb-req input[type=checkbox]{width:16px;height:16px;min-width:16px;flex:none;margin:0;padding:0;
  border:0;background:none;align-self:center;accent-color:var(--accent)}
.linkbtn.gb-pub{border-color:var(--line);color:var(--sub);min-width:62px}
.linkbtn.gb-pub.on{border-color:var(--accent);color:var(--accent);font-weight:600}
@media(max-width:720px){
  .gb-qrow{gap:10px}
  .gb-qrow input[type=text]{min-width:100%;flex:none;font-size:16px}
  .gb-qrow .linkbtn{padding:10px 6px}
}

/* ── 2026-08 개편 ⑦ 방명록 : 소제목 · 점수 · 5단계 응답 ─────────────── */
.gb-sect{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.gb-form > div:first-child.gb-sect,.gb-sect:first-child{margin-top:0;padding-top:0;border-top:0}
.gb-secd{font-size:.82rem;line-height:1.75;color:var(--sub);margin-top:5px;word-break:keep-all}
.gb-scl{display:flex;justify-content:space-between;gap:10px;margin-top:6px;
  font-size:.74rem;color:var(--sub);word-break:keep-all}
.gb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.gb-chip{position:relative;display:inline-flex;margin:0;cursor:pointer}
.gb-chip input{position:absolute;opacity:0;width:0;height:0;min-width:0;padding:0;margin:0;
  border:0;pointer-events:none}
.gb-chip span{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;padding:9px 11px;border:1px solid var(--line);background:#fff;
  font-size:.84rem;color:var(--ink);line-height:1;white-space:nowrap;transition:.15s}
.gb-chip input:checked + span{border-color:var(--accent);color:var(--accent);
  font-weight:600;background:var(--paper)}
.gb-chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.gb-qx{flex-basis:100%;display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.gb-qx label{flex:1;min-width:170px;display:flex;flex-direction:column;gap:4px;
  font-size:.74rem;color:var(--sub)}
.gb-qx label.gb-qxn{flex:none;min-width:96px}
.gb-qx input,.gb-qx textarea{width:100%;font-size:.84rem;margin:0}
.gb-qx textarea{min-height:62px}
.gb-qrow.is-sect{border-left:3px solid var(--accent)}
.gb-exbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:22px}
.gb-exbar:empty{margin:0}
.gb-exbar select{flex:1;min-width:180px;max-width:340px;padding:9px 10px;border:1px solid var(--line);
  background:#fff;font-family:inherit;font-size:.85rem;color:var(--ink);border-radius:0}
@media(max-width:720px){
  .gb-chips{gap:5px}
  .gb-chip span{min-width:34px;padding:9px 7px;font-size:.8rem}
  .gb-qx label{min-width:100%}
  .gb-qx input,.gb-qx textarea{font-size:16px}
}

/* ── 2026-08 개편 ⑧ 아카이브 작품 사진 올리기 · 교체 ────────────────── */
.cfimg-row{display:flex;gap:13px;align-items:flex-start;margin-top:14px;padding:12px;
  border:1px solid var(--line);background:var(--paper);flex-wrap:wrap}
.cfimg-th{width:104px;height:104px;flex:none;object-fit:cover;background:#fff;border:1px solid var(--line)}
.cfimg-non{display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:.76rem}
.cfimg-bd{flex:1;min-width:190px}
@media(max-width:720px){
  .cfimg-row{gap:11px;padding:11px}
  .cfimg-th{width:82px;height:82px}
  .cfimg-bd{min-width:100%}
}

/* ── 2026-08 개편 ⑨ 회원 관리 통계 숫자 → 해당 목록으로 ──────────────── */
button.stat{display:block;width:100%;text-align:left;font-family:inherit;color:inherit;
  border-radius:0;cursor:pointer;transition:.15s;-webkit-appearance:none;appearance:none}
button.stat:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.06)}
button.stat:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.stat .sl::after{content:' →';font-size:.72rem}

/* ── 2026-08 개편 ⑩ 작품 사진 내려받기 (관리자 · 열람 권한) ──────────── */
.dl-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;
  padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.dl-bar .mbtn.dl-all{flex:none;padding:11px 20px;font-size:.9rem;white-space:normal}
.dl-bar .rmeta{flex:1;min-width:180px}
.wk-card.dl-on{position:relative}
.wk-card .dl-chip{position:absolute;top:8px;right:8px;z-index:3;
  width:34px;height:34px;line-height:1;padding:0;border:none;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:.95rem;font-family:inherit;
  cursor:pointer;opacity:.85;transition:.15s;-webkit-appearance:none;appearance:none}
.wk-card .dl-chip:hover{background:var(--accent);opacity:1}
.wk-card .dl-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wk-card .dl-chip[disabled]{opacity:.6;cursor:default}
@media(max-width:720px){
  .dl-bar{flex-direction:column;align-items:stretch}
  .dl-bar .mbtn.dl-all{width:100%}
}

/* ── 2026-08 개편 ⑪ 아카이브 작품 삭제 · 휴지통 (관리자) ─────────────── */
.cf-admin-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;
  padding:10px 14px;border:1px dashed var(--line);border-radius:10px;background:transparent}
.cf-admin-bar .rmeta{flex:1;min-width:170px}
.linkbtn.cf-del{color:#c0392b;border-color:#e0b4ad}
.linkbtn.cf-del:hover{background:#c0392b;border-color:#c0392b;color:#fff}
.cf-trash-row{display:flex;gap:13px;align-items:flex-start;margin-top:12px;padding:12px;
  border:1px solid var(--line);border-radius:8px;background:var(--paper)}

/* ── 2026-08 개편 ⑫ 전시 페이지에서 도록 올리기 (관리자) ──────────────── */
.cat-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;
  padding:11px 14px;border:1px dashed var(--accent);border-radius:10px;background:transparent}
@media(max-width:720px){
  .cf-admin-bar{flex-direction:column;align-items:stretch}
  .cf-trash-row{gap:11px;padding:11px}
  .cat-bar{flex-direction:column;align-items:stretch;gap:8px}
  .cat-bar .linkbtn{text-align:center}
}

/* ══════════════════════════════════════════════════════════════════
   2026-08 개편 ⑬ 전체 디자인 정리 — 미술관형
   앞의 '미니멀 갤러리' 블록이 색·여백·활자를 이미 잡아뒀다.
   여기서는 그 위에 남아 있던 세 가지를 정리한다.
     1) 머리말   — 검은 로그인 띠를 없애고, 로고 락업과 메뉴를 다시 짠다
     2) 페이지   — 모든 페이지가 같은 모양의 제목으로 시작하게 한다
     3) 캡션·상자 — 작품 캡션에 위계를 주고, 관리자 UI를 관람객 화면에서 뺀다
   문서에서 가장 마지막 스타일이라 위 규칙을 전부 이긴다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. 머리말 ─────────────────────────────────────────────────── */

/* 검은 상단 띠를 없앴다. 헤더가 화면 맨 위에 붙는다. */
.topbar{display:none}
header{top:0;background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(1.25)}
.head-in{min-height:76px;height:auto;padding-top:10px;padding-bottom:10px;
         gap:clamp(16px,4vw,56px)}
.brand{gap:12px;flex:none}

/* 워드마크 하나만 남긴다. 협력 로고는 푸터로 내렸다. */
.logo{font-weight:500;letter-spacing:.22em;font-size:.95rem;line-height:1;
      cursor:pointer;white-space:nowrap}
.logo span{color:var(--ink)}
header .plogos{display:none}

/* 메뉴: 아홉 개를 다섯 개로 묶었다. 주소는 그대로라 기존 링크·QR은 그대로 열린다. */
nav.gnb{gap:0;align-items:center}
nav.gnb>a,.gnb-t{display:inline-block;font-size:.8rem;letter-spacing:.1em;
                 color:#6a655f;padding:10px 15px;position:relative;transition:color .25s}
nav.gnb>a:hover,.gnb-t:hover{color:var(--ink);background:transparent}
nav.gnb>a.on,.gnb-t.on{color:var(--ink);font-weight:500;box-shadow:none}
nav.gnb>a.on::after,.gnb-t.on::after{content:'';position:absolute;left:15px;right:15px;
                                     bottom:4px;height:1px;background:var(--ink)}
.gnb-g{position:relative;display:inline-flex;align-items:center}
.gnb-d{position:absolute;top:100%;left:6px;z-index:60;display:none;flex-direction:column;
       min-width:158px;padding:8px 0;background:#fff;border:1px solid var(--hair);
       box-shadow:0 18px 40px rgba(18,16,15,.09)}
.gnb-g:hover .gnb-d,.gnb-g:focus-within .gnb-d{display:flex}
.gnb-d a{display:block;padding:9px 18px;font-size:.82rem;letter-spacing:.04em;
         color:#6a655f;white-space:nowrap;transition:.2s}
.gnb-d a:hover{color:var(--ink);background:var(--paper)}
.gnb-d a.on{color:var(--ink);font-weight:500}

/* 작가 로그인 — 검은 띠에서 메뉴 끝으로. 관람객에게는 작게, 관리자에게는 필요한 만큼. */
#authNav.authnav{display:inline-flex;align-items:center;gap:0;
         margin-left:clamp(8px,1.6vw,22px);
         padding-left:clamp(10px,1.6vw,20px);border-left:1px solid var(--hair)}
#authNav a{padding:9px 12px;font-size:.74rem;letter-spacing:.1em;color:var(--sub);
           background:transparent;border-radius:0;box-shadow:none;white-space:nowrap;
           transition:color .25s}
#authNav a:hover{background:transparent;color:var(--ink)}
#authNav a.hl{color:var(--ink);font-weight:500;background:transparent;box-shadow:none}
#authNav a.hl:hover{background:transparent;color:var(--ink);opacity:.55}

/* ── 2. 페이지 제목 ────────────────────────────────────────────────
   전시·작품·도록·소식·공지·소개·후원·문의 페이지는 모두
   <div class="wrap"><div class="sec"><div class="sec-head"><h2>…
   로 시작한다. 그 첫 덩어리만 골라 '페이지 제목'으로 키운다.
   홈은 맨 앞이 히어로라 여기 걸리지 않는다. */
#app>.wrap:first-child>.sec:first-child{padding-top:clamp(56px,8vw,104px)}
#app>.wrap:first-child>.sec:first-child>.sec-head{
  display:block;border-bottom:none;padding-bottom:0}
#app>.wrap:first-child>.sec:first-child>.sec-head :is(h1,h2){
  font-size:clamp(2rem,5.2vw,3.4rem);font-weight:600;letter-spacing:-.045em;line-height:1.08}
#app>.wrap:first-child>.sec:first-child>.sec-head+.rmeta{
  max-width:640px;margin-top:20px;color:var(--sub);font-size:.9rem;line-height:1.85;
  word-break:keep-all}
#app>.wrap:first-child>.sec:first-child>.sec-head::after{
  content:'';display:block;height:1px;background:var(--hair);margin-top:clamp(28px,4vw,44px)}

/* 전시 상세의 '뒤로' 도 같은 여백에서 시작하게 */
#app>.wrap>.back:first-child{margin-top:clamp(38px,5vw,60px)}

/* ── 3. 작품 캡션 — 도록처럼 세 단으로 ──────────────────────────────
   작가 이름(작게·넓게) / 작품 제목(크게) / 재료·연도(작게·흐리게).
   줄 수를 묶어 카드 높이가 들쭉날쭉하지 않게 했다. */
.wk-card{display:flex;flex-direction:column}
.wk-card .bd{padding:16px 0 0;display:flex;flex-direction:column;gap:0}
.wk-card .cap-a{font-size:.72rem;letter-spacing:.16em;color:var(--sub);
                white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-card .tt{margin-top:7px;font-size:1rem;font-weight:600;letter-spacing:-.028em;
             line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
             overflow:hidden;transition:opacity .25s}
.wk-card .cap-m{margin-top:7px;font-size:.78rem;line-height:1.65;color:var(--sub);
                display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wk-card .cap-y{margin-top:3px;font-size:.76rem;letter-spacing:.1em;color:var(--sub)}
.wk-card .ar-chip{align-self:flex-start;margin-top:11px;font-size:.62rem;letter-spacing:.2em;
                  padding:4px 10px 4px 12px;border:1px solid var(--hair);color:var(--sub)}
.wk-card .hid-chip{margin-left:6px;font-size:.62rem;letter-spacing:.14em;padding:2px 8px;
                   border:1px solid var(--hair);color:var(--sub);font-weight:400;vertical-align:middle}
.wk-card .st{margin-top:10px;display:flex;gap:14px;font-size:.74rem;color:var(--sub)}
.wk-card .im{background:var(--paper)}
.wk-card .ar{letter-spacing:.06em;font-size:.78rem;color:var(--sub)}
.wk-grid{align-items:start}

/* 사진이 아직 없는 자리 — 개발용 문구 대신 조용한 빈 판 */
.poster .ph,.wk-card .im.ph{background:var(--paper);color:#b6b1aa;font-size:.74rem;
                            letter-spacing:.14em;display:flex;align-items:center;
                            justify-content:center;text-align:center;padding:0 14px}

/* ── 4. 관리자 UI를 관람객 화면 문법에서 떼어놓는다 ─────────────────
   점선·둥근 모서리·연보라를 걷고, 관리자에게만 보이는 얇은 회색 판으로. */
.cf-admin-bar,.cat-bar,.dl-bar,.todo-box,.gb-form{
  border:1px solid var(--hair);border-radius:0;background:var(--paper)}
/* 관리자 안내문은 버튼 옆에 끼워 넣지 않고 한 줄을 통째로 쓴다 */
.cat-bar{padding:16px 18px;gap:10px 10px;align-items:center}
.cat-lb,.cat-hint{flex:1 0 100%;min-width:0;margin:0}
.cat-lb{font-size:.68rem;letter-spacing:.2em;color:var(--sub)}
.cat-hint{font-size:.8rem;line-height:1.75;color:var(--sub)}
.cf-admin-bar,.dl-bar{padding:16px 18px}
.cf-trash-row,.fw-warn,.rec-notice{border-radius:0}
.rec-notice{border-width:1px}
.rec-notice .rn-badge{border-radius:0;letter-spacing:.14em;font-weight:600}
.admedit{border-radius:0;border-color:var(--hair);color:var(--sub);letter-spacing:.08em}
.admedit:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.todo-item,.todo-item .tn{border-radius:0}
.dday{border-radius:0}
.modal input,.modal,.form-panel,.soc-btn,.filebtn2,.linkbtn,.mbtn,.atab,.stat,#toast{border-radius:0}

/* ── 4-2. 라벨의 색을 뺀다 ────────────────────────────────────────
   '현재 전시 / 예정 / 지난'을 색이 아니라 채움과 선의 차이로 구분한다.
   화면에서 색을 쓰는 건 작품 사진뿐이 되게. */
.badge{background:transparent;border:1px solid var(--ink);color:var(--ink);
       font-weight:500;line-height:1.6}
.badge.b-current{background:var(--ink);border-color:var(--ink);color:#fff}
.badge.b-upcoming{background:transparent;border-color:var(--ink);color:var(--ink)}
.badge.b-past{background:transparent;border-color:var(--hair);color:var(--sub)}
.hero .tag::before{background:rgba(255,255,255,.55)}
.dday{border-color:var(--ink);color:var(--ink);background:transparent;font-weight:600;
      letter-spacing:.1em;box-shadow:none}
.dday.urgent{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none;animation:none}
.dday.off{border-color:var(--hair);color:var(--sub);background:transparent}
.todo-item .tn{background:var(--ink);color:#fff}
.todo-box{border-color:var(--hair)}
.rec-notice{border-color:var(--ink);background:var(--paper);color:var(--ink)}
.rec-notice .rn-badge{background:var(--ink);color:#fff}
.ptag.video,.ptag.card,.ptag.press{border-color:var(--hair);color:var(--sub);background:transparent}
.stb.st-selected{border-color:var(--ink);color:var(--ink)}
.stb.st-draft{border-color:var(--hair);color:var(--sub)}
.linkbtn.cf-del{color:var(--ink);border-color:var(--hair)}
.linkbtn.cf-del:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.chk input{accent-color:var(--ink)}

/* ── 5. 푸터 ──────────────────────────────────────────────────── */
footer{background:#fff;border-top:1px solid var(--ink);
       padding:clamp(48px,6.5vw,88px) 0 clamp(36px,4.5vw,56px)}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;
          gap:28px;flex-wrap:wrap;padding-bottom:clamp(28px,4vw,44px)}
.foot-mark{font-size:.95rem;font-weight:500;letter-spacing:.22em;cursor:pointer;white-space:nowrap}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 22px;justify-content:flex-end;max-width:560px}
.foot-nav a{font-size:.78rem;letter-spacing:.06em;color:var(--sub);cursor:pointer;
            box-shadow:none;transition:color .22s}
.foot-nav a:hover{color:var(--ink);box-shadow:none}
.foot-in{border-top:1px solid var(--hair);padding-top:clamp(24px,3.4vw,36px)}
.foot-partners{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
               margin-top:clamp(28px,4vw,44px);padding-top:clamp(20px,3vw,30px);
               border-top:1px solid var(--hair)}
.fp-label{font-size:.66rem;letter-spacing:.24em;color:var(--sub);white-space:nowrap}
.foot-partners .plogos{display:flex;align-items:center;gap:20px;padding-left:0;border-left:none}
.foot-partners .plogos img{height:26px;width:auto;
                           filter:grayscale(1) contrast(.9);opacity:.5;transition:.3s}
.foot-partners .plogos img:hover{filter:none;opacity:1}

/* ── 6. 모바일 ────────────────────────────────────────────────── */
@media(max-width:900px){
  .head-in{min-height:56px;padding-top:7px;padding-bottom:7px}
  .logo{font-size:.88rem;letter-spacing:.16em}
  nav.gnb{padding-bottom:6px;align-items:stretch;text-align:left;gap:0}
  nav.gnb>a,.gnb-t{display:block;padding:15px 18px;font-size:.95rem;letter-spacing:.01em;
                   color:var(--ink);border-bottom:1px solid var(--hair)}
  nav.gnb>a.on::after,.gnb-t.on::after{display:none}
  nav.gnb>a.on,.gnb-t.on{font-weight:600;box-shadow:inset 2px 0 0 var(--ink)}
  .gnb-g{display:block;position:static}
  .gnb-d{position:static;display:flex;min-width:0;padding:0;border:none;box-shadow:none;
         background:transparent}
  nav.gnb .gnb-d a{padding:14px 18px 14px 38px;font-size:.9rem;color:#57524c;
           border-bottom:1px solid var(--hair);position:relative}
  nav.gnb .gnb-d a::before{content:'';position:absolute;left:20px;top:50%;
           width:8px;height:1px;background:var(--hair)}
  /* 묶음 제목과 같은 곳으로 가는 항목은 서랍에서 한 번만 보이게 */
  nav.gnb .gnb-d a[data-r="exhibitions"],nav.gnb .gnb-d a[data-r="blog"],
  nav.gnb .gnb-d a[data-r="about"]{display:none}
  #authNav.authnav{display:flex;flex-direction:column;align-items:stretch;margin:0;padding:0;
           border-left:none;border-top:1px solid var(--hair)}
  #authNav a{padding:15px 18px;font-size:.9rem;color:var(--ink);letter-spacing:.01em;
             border-bottom:1px solid var(--hair)}
  .foot-nav{justify-content:flex-start;max-width:none;gap:4px 18px}
}
@media(max-width:720px){
  #app>.wrap:first-child>.sec:first-child{padding-top:40px}
  #app>.wrap:first-child>.sec:first-child>.sec-head :is(h1,h2){font-size:clamp(1.7rem,8.4vw,2.2rem)}
  #app>.wrap:first-child>.sec:first-child>.sec-head::after{margin-top:24px}
  #app>.wrap:first-child>.sec:first-child>.sec-head+.rmeta{margin-top:14px;font-size:.86rem}
  .wk-card .tt{font-size:.92rem}
  .wk-card .cap-a{font-size:.66rem;letter-spacing:.13em}
  .wk-card .cap-m{font-size:.74rem}
  .foot-top{padding-bottom:24px}
  .foot-partners{gap:14px;margin-top:26px;padding-top:18px}
  .foot-partners .plogos img{height:22px}
}

/* ══════════════════════════════════════════════════════════════════
   2026-08 개편 ⑭ 휴대폰에서 보기
   손에 들고 보는 화면을 기준으로 다시 짠다.
     1) 작품 창을 화면 전체로 — 좁은 상자에 갇히지 않게
     2) 캡션·설명에 위계와 숨 쉴 틈을
     3) 방명록 보기(0~10, 5단계)를 격자로 — 줄이 어긋나지 않고 누르기 쉽게
     4) 버튼은 한 줄에 하나, 최소 높이 48px
     5) 글자를 한 단계 키우고 여백을 넓힌다
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. 작품 상세 캡션 (PC·모바일 공통) ────────────────────────────── */
.wk-detail{margin-top:22px}
.wd-artist{font-size:.74rem;letter-spacing:.18em;color:var(--sub)}
.wd-title{font-family:var(--f-g);font-size:clamp(1.25rem,3.4vw,1.6rem);font-weight:600;
          letter-spacing:-.03em;line-height:1.32;margin-top:9px}
.wd-meta{margin-top:12px;font-size:.84rem;line-height:1.85;color:var(--sub)}
.wd-meta span{display:block}
.wd-desc{margin-top:22px;padding-top:20px;border-top:1px solid var(--hair);
         font-size:.97rem;line-height:1.85;white-space:pre-line;color:var(--ink);
         word-break:keep-all}
.modal .close{display:inline-flex;align-items:center;justify-content:center;
              width:38px;height:38px;margin:-8px -8px 0 0;font-size:1rem;
              color:var(--sub);transition:color .2s}
.modal .close:hover{color:var(--ink)}
/* 도록 미리보기처럼 안이 긴(A4 쪽을 수십 장 쌓는) 모달은 맨 위까지 스크롤해야
   ✕ 버튼이 보였다 — 늘 보이게 붙박이로 띄운다. */
.cat-prev .close{position:sticky;top:-8px;display:flex;margin-left:auto;margin-right:-8px;
  background:var(--card,#fff);border-radius:50%;box-shadow:0 1px 6px rgba(0,0,0,.15);z-index:20}

/* ── 2. 휴대폰 ────────────────────────────────────────────────── */
@media(max-width:720px){

  /* 읽기 기본값을 한 단계 키운다 */
  body{font-size:16px;line-height:1.75}
  .wrap{padding-left:20px;padding-right:20px}
  .rmeta,.empty,.gb-secd{font-size:.86rem;line-height:1.75}

  /* 창을 화면 전체로. 인라인으로 박힌 max-width/max-height 를 덮어야 해서 !important 를 쓴다 */
  .modal-bg{padding:0;align-items:stretch;justify-content:stretch}
  .modal-bg>.modal{width:100%!important;max-width:100%!important;height:100%;
                   max-height:100%!important;overflow-y:auto;-webkit-overflow-scrolling:touch;
                   border-radius:0;padding:54px 20px 30px}
  .modal-bg>.modal>.close{position:fixed;top:9px;right:11px;z-index:10;
                          width:44px;height:44px;margin:0;background:#fff;
                          border:1px solid var(--hair);color:var(--ink);font-size:1.05rem;
                          float:none}
  /* 작품 사진은 화면 폭을 꽉 채운다 */
  /* 사진은 화면 폭을 꽉 채우고 높이 제한을 푼다.
     세로로 긴 작품이 좌우에 회색 띠를 두르고 작게 나오던 것을 없애기 위해서다. */
  #wkModal>.modal>img,#wkModal>.modal>div[style*="padding:70px"]{
    margin-left:-20px;margin-right:-20px;width:calc(100% + 40px)!important;max-width:none;
    max-height:none!important;height:auto}
  .wk-detail{margin-top:20px}
  .wd-title{font-size:1.32rem;line-height:1.35}
  .wd-meta{font-size:.85rem}
  .wd-desc{font-size:1rem;line-height:1.8;margin-top:20px;padding-top:18px}

  /* 창 안 버튼은 한 줄에 하나. 손가락으로 정확히 누를 수 있게 */
  .modal .mbtns{flex-direction:column;gap:9px;margin-top:24px}
  .modal .mbtn{flex:1 1 auto;width:100%;min-height:50px;padding:14px 16px;font-size:.92rem}
  .modal input,.modal textarea,.modal select{min-height:50px}

  /* 전시 상세: 지도·도록·공유 버튼이 세 글자씩 끊기던 것 → 두 개씩 나란히 */
  .act-btns{gap:8px;margin-top:20px}
  .act-btns a{flex:1 1 calc(50% - 4px);min-width:0;text-align:center;white-space:nowrap;
              padding:14px 8px;font-size:.74rem;letter-spacing:.08em}

  /* 전시 정보표: 좁은 폭에서 이름과 내용을 위아래로 */
  .info-tbl>div{display:block;padding:14px 2px}
  .info-tbl b{display:block;flex:none;margin-bottom:5px;font-size:.72rem;letter-spacing:.14em}

  /* 누르는 것은 최소 44px */
  .linkbtn,.filebtn2,.atab,.tabs button,.wk-tabs button,.book a.dl,.sns{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .book a.dl{padding:10px 0;justify-content:flex-start}
  .sec-head .more{padding:10px 2px;margin:-10px 0}
  .foot-nav a{padding:7px 0;display:inline-block}

  /* 도록: 표지 아래 정보가 붙어 보이지 않게 */
  .books{gap:32px 14px}
  .book .bb{padding-top:14px}
  .book .btt{font-size:.94rem;line-height:1.45}

  /* 작품 목록 안내문·본문 줄바꿈 */
  .ex-intro,.about,.w-desc,.artist-intro,.gav{word-break:keep-all}

  /* ── 방명록 ── */
  .gb-form{padding:20px 17px;margin-top:20px}
  .gb-form .gb-q{display:block;font-size:.96rem;font-weight:600;line-height:1.55;
                 margin-top:26px;word-break:keep-all}
  .gb-form .gb-q:first-child{margin-top:0}
  .gb-tag{display:inline-block;vertical-align:middle;margin-left:7px;border-radius:0;
          font-size:.63rem;letter-spacing:.12em;padding:3px 7px}
  .gb-form input,.gb-form textarea{margin-top:10px;padding:15px 14px;min-height:52px}
  .gb-form textarea{min-height:110px}
  .gb-sect{font-size:1.05rem;margin-top:34px;padding-top:24px}
  .gb-secd{margin-top:8px}
  .gb-scl{font-size:.78rem;margin-top:10px}

  /* 0~10 점수: 여섯 칸 격자 — 줄이 어긋나지 않고 칸이 넉넉해진다 */
  .gb-chips{margin-top:10px}
  .gb-chips-scale{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
  .gb-chips-scale .gb-chip{display:block}
  .gb-chips-scale .gb-chip span{width:100%;min-width:0;padding:14px 2px;font-size:.95rem}

  /* 5단계 응답: 한 줄에 하나 — 글자가 잘리지 않고 누르기 쉽다 */
  .gb-chips-likert{display:grid;grid-template-columns:1fr;gap:7px}
  .gb-chips-likert .gb-chip{display:block}
  .gb-chips-likert .gb-chip span{width:100%;min-width:0;justify-content:flex-start;
                                 padding:15px 16px;font-size:.94rem}
  .gb-chip input:checked + span{border-color:var(--ink);color:var(--ink);background:var(--paper)}

  .gb-form .mbtns{margin-top:26px}
  .gb-form .mbtn{width:100%;flex:1 1 auto;min-height:52px;padding:15px;font-size:.95rem}
  .gb-card{padding:18px 2px}
  .gb-card .gone{font-size:1rem;line-height:1.8}
  .gans{padding:13px 14px;margin-top:11px}
  .gav{font-size:.94rem}
  .gb-exbar{margin-top:24px}
  .gb-exbar select{min-height:48px;width:100%;max-width:none}

  /* 관리자 도구도 같은 규칙으로 */
  .cf-admin-bar,.dl-bar,.cat-bar{padding:16px}
  .cat-bar .linkbtn,.dl-bar .mbtn.dl-all{width:100%;justify-content:center}
}

/* 노치·홈바 여백 (세로 여백만 손대고 가로 규칙은 건드리지 않는다) */
@supports(padding:max(0px)){
  @media(max-width:720px){
    .wrap{padding-left:max(20px,env(safe-area-inset-left));
          padding-right:max(20px,env(safe-area-inset-right))}
    .modal-bg>.modal{padding-bottom:max(30px,calc(30px + env(safe-area-inset-bottom)))}
    footer{padding-bottom:max(34px,calc(34px + env(safe-area-inset-bottom)))}
  }
}

/* ══════════════════════════════════════════════════════════════════
   2026-08 개편 ⑮ 제3회 「이야기」 카드
   보내온 글이 주인공이라 사진 없이 활자만으로 세운다.
   카드는 상자가 아니라 얇은 선으로 구획하고, 첫 문장을 크게 띄운다.
   ══════════════════════════════════════════════════════════════════ */
.cs-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
        margin-top:26px;padding-top:22px;border-top:1px solid var(--ink)}
.cs-bar-t{font-size:.8rem;letter-spacing:.06em;color:var(--ink);font-weight:600;word-break:keep-all}
.cs-bar-n{margin:0;font-size:.82rem;line-height:1.7;color:var(--sub);word-break:keep-all;
          max-width:520px;text-align:right}
@media(max-width:720px){ .cs-bar-n{text-align:left;max-width:none} }
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
         gap:clamp(22px,2.6vw,34px);margin-top:clamp(28px,3.6vw,44px)}
.cs-card{display:flex;flex-direction:column;padding:26px 24px 22px;cursor:pointer;
         border:1px solid var(--hair);background:#fff;transition:border-color .3s,background .3s}
.cs-card:hover{border-color:var(--ink);background:var(--paper)}
.cs-pen{font-size:.7rem;letter-spacing:.2em;color:var(--sub)}
.cs-head{font-family:var(--f-g);font-size:1.06rem;font-weight:600;letter-spacing:-.03em;
         line-height:1.5;margin-top:12px;word-break:keep-all;
         display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cs-prev{margin-top:12px;font-size:.86rem;line-height:1.8;color:#5d5852;word-break:keep-all;
         display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cs-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
         margin-top:auto;padding-top:20px}
.cs-more{font-size:.68rem;letter-spacing:.2em;color:var(--ink);
         box-shadow:inset 0 -1px 0 var(--ink);padding-bottom:2px}

/* 이야기 전문 */
.cs-detail{margin-top:6px}
.cs-title{font-family:var(--f-g);font-size:clamp(1.3rem,3vw,1.65rem);font-weight:600;
          letter-spacing:-.035em;line-height:1.35;margin-top:12px}
.cs-body{margin-top:22px;padding-top:20px;border-top:1px solid var(--hair);
         font-size:1rem;line-height:2;white-space:pre-line;word-break:keep-all;color:var(--ink)}

/* 사연을 고르기 전 안내 */
.cs-guide{border-left:3px solid #C13B2F;background:rgba(193,59,47,.05);
          padding:14px 16px;margin:14px 0 4px;font-size:.86rem;line-height:1.75;
          word-break:keep-all;color:var(--ink)}
.cs-guide-h{font-weight:700;font-size:.9rem;letter-spacing:-.02em;margin-bottom:6px}
.cs-guide p{margin:0}
.cs-guide ul{margin:6px 0 0;padding-left:18px}
.cs-guide li{margin:5px 0}

/* 신청 화면에서 고르기 */
.cs-entry{border:1px solid var(--ink);padding:18px;margin:4px 0 22px;background:var(--paper)}
.cs-picked{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cs-picked .cs-pick-h{font-weight:600;font-size:1rem;letter-spacing:-.025em;margin-top:5px;
                      word-break:keep-all;line-height:1.5;
                      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cs-pick .cs-pick-h{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cs-picked-btns{display:flex;gap:8px;flex-wrap:wrap}
.cs-pick-list{margin-top:16px;display:flex;flex-direction:column;gap:0}
.cs-pick{display:block;width:100%;text-align:left;background:#fff;border:none;
         border-top:1px solid var(--hair);padding:16px 4px;cursor:pointer;font-family:inherit;
         transition:padding-left .3s cubic-bezier(.19,.6,.22,1)}
.cs-pick-item:last-child{border-bottom:1px solid var(--hair)}
.cs-pick:hover{padding-left:10px}
.cs-pick-item.on .cs-pick{padding-left:12px;box-shadow:inset 3px 0 0 var(--ink)}
/* 고르기 창에서 이야기 전문 펼쳐 읽기 */
.cs-pick-full{font-size:.88rem;line-height:1.95;white-space:pre-line;word-break:keep-all;
              color:var(--ink);max-height:46vh;overflow-y:auto;
              border-left:2px solid var(--hair);margin:0 0 4px 2px;padding:2px 4px 14px 12px}
.cs-pick-more{display:block;width:100%;text-align:left;background:transparent;border:none;
              cursor:pointer;font-family:inherit;font-size:.78rem;letter-spacing:.06em;
              color:var(--sub);padding:0 4px 14px}
.cs-pick-more:hover{color:var(--ink)}
.cs-used{display:block;font-size:.7rem;letter-spacing:.06em;color:#C13B2F;margin-bottom:4px}
.cs-pick .cs-pen{display:block}
.cs-pick-h{display:block;font-weight:600;font-size:.98rem;letter-spacing:-.025em;margin-top:6px;
           line-height:1.45;word-break:keep-all;color:var(--ink)}
.cs-pick-p{display:block;font-size:.82rem;line-height:1.7;color:var(--sub);margin-top:5px;
           word-break:keep-all}
.cs-adm-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
            flex-wrap:wrap;padding:16px 2px;border-top:1px solid var(--hair)}

@media(max-width:720px){
  /* 휴대폰에서도 이야기는 흰 카드로 보여준다.
     예전에는 배경이 투명해서 종이색 바탕과 구분이 안 됐고,
     이야기가 어디서 끝나고 어디서 시작하는지 알아보기 어려웠다. */
  .cs-grid{grid-template-columns:1fr;gap:14px;margin-top:22px}
  .cs-card{border:1px solid var(--hair);background:#fff;padding:22px 18px 20px}
  .cs-card:hover{background:#fff;border-color:var(--ink)}
  .cs-head{font-size:1.08rem;-webkit-line-clamp:4}
  .cs-prev{font-size:.9rem;-webkit-line-clamp:3}
  .cs-foot{padding-top:16px}
  .cs-body{font-size:1rem;line-height:1.95;margin-top:20px;padding-top:18px}
  .cs-bar{flex-direction:column;align-items:stretch;gap:12px}
  .cs-bar .apply{width:100%;text-align:center}
  .cs-entry{padding:16px}
  .cs-picked{flex-direction:column;align-items:stretch}
  .cs-picked-btns .linkbtn{flex:1}
  .cs-pick{padding:18px 4px}
  .cs-adm-row{flex-direction:column}
}

/* ══════════════════════════════════════════════════════════════════
   2026-08 개편 ⑯ 공모 신청 준비 상태
   "포트폴리오가 필요합니다" 하고 화면만 넘어가던 것을,
   무엇이 남았는지 보이고 그 자리에서 올릴 수 있는 카드로 바꾼다.
   ══════════════════════════════════════════════════════════════════ */
/* ── 기능색 ───────────────────────────────────────────────────────
   작품이 주인공인 화면은 그대로 무채색으로 두고,
   '반드시 해야 하는 것 / 끝난 것 / 남은 것'을 알리는 자리에만 색을 쓴다.
   ── */
:root{
  --c-req:#b5442c;   /* 필수 · 남은 것 */
  --c-req-bg:#fdf3f0;
  --c-ok:#2c6b4a;    /* 끝난 것 */
  --c-ok-bg:#eff6f1;
  --c-note:#2f4a7a;  /* 알아둘 것 */
  --c-note-bg:#f1f4f9;
}
.req{font-style:normal;color:var(--c-req);font-weight:700;margin-left:2px}

.pf-alert{border-radius:0;padding:14px 16px;font-size:.88rem;line-height:1.75;
          word-break:keep-all}
.pf-alert.warn{background:var(--c-req-bg);border:1px solid #e8cfc7;
               border-left:3px solid var(--c-req);color:#7d3421}
.pf-alert.warn b{color:var(--c-req)}
.pf-alert.ok{background:var(--c-ok-bg);border:1px solid #cadfd2;
             border-left:3px solid var(--c-ok);color:#2a5940}
.pf-alert.ok b{color:var(--c-ok)}
.rq-row.done .rq-mark{background:var(--c-ok);border-color:var(--c-ok)}
.dday.urgent{background:var(--c-req);border-color:var(--c-req)}
.dday{border-color:var(--c-req);color:var(--c-req)}
/* 「필독」 확인란 — 제출 직전에 한 번 더 묻는 자리 */
.ent-agree{display:flex;align-items:flex-start;gap:10px;margin:22px 0 0;padding:15px 16px;
           border:1px solid var(--c-req);background:var(--c-req-bg);line-height:1.65;
           font-size:.9rem;word-break:keep-all;cursor:pointer}
.ent-agree input{margin-top:3px;flex:none}
.ent-agree.on{border-color:var(--ink);background:#FBF9F4}

.rec-notice{border-color:var(--c-req);background:var(--c-req-bg);position:relative;
            padding:20px 22px 18px;margin:16px 0 0;font-size:.9rem;line-height:1.8}
.rec-notice .rn-badge{background:var(--c-req)}
.rec-notice .rn-body{white-space:pre-line}
.rec-notice.clip .rn-body{max-height:190px;overflow:hidden}
.rec-notice.clip::after{content:'';position:absolute;left:1px;right:1px;bottom:52px;height:70px;
  background:linear-gradient(rgba(253,243,240,0),var(--c-req-bg));pointer-events:none}
.rn-more{margin-top:14px;background:transparent;border:1px solid var(--c-req);color:var(--c-req);
  font-family:inherit;font-size:.8rem;letter-spacing:.06em;padding:9px 18px;cursor:pointer;
  position:relative;z-index:1}
.rn-more:hover{background:var(--c-req);color:#fff}
@media(max-width:720px){
  .rec-notice{padding:17px 16px 16px;font-size:.88rem;line-height:1.75}
  .rec-notice.clip .rn-body{max-height:150px}
  .rn-more{width:100%;min-height:44px}
}

/* ══════════════════════════════════════════════════════════════════
   2026-08 개편 ⑰ 출품 신청 화면
   좁은 상자가 왼쪽에 붙어 오른쪽 절반이 비어 있던 것을,
   본문(왼쪽) + 요약칸(오른쪽) 두 단으로 나눈다.
   ══════════════════════════════════════════════════════════════════ */
.ent-sub{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;
         font-size:.92rem;font-weight:600;letter-spacing:-.02em;word-break:keep-all}
.ent-sub .dday-inline .dday{margin-left:0}
.ent-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;
          gap:clamp(20px,2.6vw,36px);align-items:start;margin-top:26px}
.ent-main{min-width:0}
.ent-panel{max-width:none;margin-top:0;padding:clamp(24px,3vw,40px)}
.ent-legend{font-size:.83rem;color:var(--sub);padding-bottom:16px;
            border-bottom:1px solid var(--hair)}
.ent-sec{padding:26px 0;border-bottom:1px solid var(--hair)}
.ent-sec:last-of-type{border-bottom:none;padding-bottom:8px}
.ent-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
       font-family:var(--f-g);font-size:1.02rem;font-weight:600;letter-spacing:-.025em}
.ent-n{flex:none;width:24px;height:24px;display:inline-flex;align-items:center;
       justify-content:center;background:var(--ink);color:#fff;font-size:.74rem;
       font-weight:600;line-height:1}
.ent-hint{font-size:.74rem;letter-spacing:.04em;color:var(--sub);font-weight:400;
          border:1px solid var(--hair);padding:3px 8px}
.ent-sec>label{margin-top:16px}
.ent-sec .chkrow{margin-top:14px}
.ent-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.ent-2col>label{margin-top:16px}
.ent-sub-act{margin-top:8px}
.ent-note{margin-top:10px;font-size:.8rem;line-height:1.75;color:var(--sub);word-break:keep-all}
.ent-note a{color:var(--c-note);text-decoration:underline;cursor:pointer}
.ent-warn{margin-top:26px;padding:13px 15px;background:var(--c-req-bg);
          border-left:3px solid var(--c-req);font-size:.84rem;line-height:1.7;
          color:#7d3421;word-break:keep-all}
.ent-btns{display:flex;gap:10px;margin-top:16px}
.ent-btns .mbtn{min-height:50px}

/* 고르는 칸 — 손가락으로 누르기 쉽게, 고른 것은 눈에 띄게 */
.chkrow{gap:10px}
.chk{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:10px 16px;
     border:1px solid var(--hair);font-size:.9rem;line-height:1.4;transition:.18s;
     word-break:keep-all}
.chk:hover{border-color:var(--ink)}
.chk input{flex:none;width:17px;height:17px;margin:0;accent-color:var(--c-ok)}
.chk.on{border-color:var(--c-ok);background:var(--c-ok-bg);color:#22553a;font-weight:600}

/* 입력칸 — 지금 쓰고 있는 칸이 분명히 보이게 */
.ent-panel label{display:block;margin-top:16px;font-size:.85rem;font-weight:600;
                 color:#3d3833;letter-spacing:-.01em}
.ent-panel label.chk{display:inline-flex;margin-top:0;font-weight:400}
.ent-panel input[type=text],.ent-panel input[type=date],.ent-panel textarea{
  margin-top:7px;padding:13px 14px;border:1px solid var(--hair);background:#fff;
  transition:border-color .18s,box-shadow .18s}
.ent-panel input:focus,.ent-panel textarea:focus{outline:none;border-color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--ink)}
.ent-panel textarea{min-height:130px;line-height:1.8}

/* 오른쪽 요약칸 */
/* 화면에 붙어 따라오되, 요약칸이 화면보다 길면 그 안에서 넘겨볼 수 있게 한다.
   (그렇지 않으면 맨 아래 D-day 가 화면 밖에 갇힌다) */
.ent-side{position:sticky;top:92px;display:flex;flex-direction:column;gap:14px;
          max-height:calc(100vh - 112px);overflow-y:auto;scrollbar-width:thin}
.ent-side::-webkit-scrollbar{width:6px}
.ent-side::-webkit-scrollbar-thumb{background:var(--hair)}
.ent-box{border:1px solid var(--hair);background:#fff;padding:18px}
.ent-box-h{font-size:.7rem;letter-spacing:.2em;color:var(--sub);
           padding-bottom:12px;border-bottom:1px solid var(--hair)}
.ent-item{display:block;padding:14px 0 4px;border-left:3px solid transparent;padding-left:12px;
          margin-left:-12px}
.ent-item.ok{border-left-color:var(--c-ok)}
.ent-item.warn{border-left-color:var(--c-req)}
.ent-item-t{display:block;font-size:.86rem;font-weight:600;letter-spacing:-.02em;
            word-break:keep-all}
.ent-item.ok .ent-item-t{color:var(--c-ok)}
.ent-item.warn .ent-item-t{color:var(--c-req)}
.ent-item-v{display:block;margin-top:5px;font-size:.82rem;line-height:1.7;
            color:#4f4a45;word-break:break-all}
/* 오른쪽 칸 맨 아래 — 마감까지 남은 날 */
.ent-dday{padding:22px 18px;text-align:center;background:var(--c-req-bg);
          border:1px solid #e8cfc7}
.ed-l{display:block;font-size:.78rem;letter-spacing:.18em;color:#8a5343}
.ed-n{display:block;margin-top:8px;font-family:var(--f-g);font-size:2.5rem;font-weight:700;
      letter-spacing:-.04em;line-height:1;color:var(--c-req)}
.ed-d{display:block;margin-top:10px;font-size:.84rem;letter-spacing:.02em;color:#8a5343}
.ent-dday.urgent{background:var(--c-req);border-top-color:var(--c-req)}
.ent-dday.urgent .ed-l,.ent-dday.urgent .ed-d{color:rgba(255,255,255,.82)}
.ent-dday.urgent .ed-n{color:#fff}
.ent-dday.over{background:var(--paper);border-top-color:var(--hair)}
.ent-dday.over .ed-l,.ent-dday.over .ed-d{color:var(--sub)}
.ent-dday.over .ed-n{color:var(--sub);font-size:1.6rem}
@media(max-width:720px){
  .ent-dday{padding:20px 17px}
  .ed-n{font-size:2.2rem}
}

.ent-side-act{margin-top:12px;display:flex;gap:8px}
.ent-side-act .linkbtn{flex:1}
.ent-side .ent-btns{flex-direction:column;gap:8px}
.ent-side .ent-btns .mbtn{width:100%}
/* PC : 오른쪽 칸이 화면보다 길어서 안쪽으로 스크롤되는데, 「저장과 제출」이
   그 아래에 있어 화면 밖으로 밀려 있었다. 안쪽 스크롤은 잘 눈에 띄지 않아
   제출 버튼을 못 찾는다. 맨 위로 올려 늘 보이게 한다. */
.ent-side .submit-box{order:-1}

@media(max-width:1080px){
  .ent-grid{grid-template-columns:1fr;gap:20px}
  .ent-side{position:static;flex-direction:row;flex-wrap:wrap}
  .ent-box{flex:1 1 260px}
  /* 한 줄로 쌓이는 화면에서는 「고른 이야기」가 위아래로 두 번 나왔다.
     같은 버튼이 두 개라 서로 다른 것인가 싶게 만든다.
     본문의 「선택한 이야기」 칸 하나만 남긴다.
     (넓은 화면에서는 오른쪽에 붙어 요약 역할을 하므로 그대로 둔다) */
  .ent-side #etSideStory{display:none}
}
@media(max-width:720px){
  .ent-sub{margin-top:14px;font-size:.9rem}
  .ent-grid{margin-top:20px;gap:16px}
  .ent-panel{padding:20px 17px}
  .ent-sec{padding:22px 0}
  .ent-h{font-size:.98rem}
  .ent-2col{grid-template-columns:1fr}
  .ent-side{flex-direction:column}
  .ent-box{flex:1 1 auto;padding:17px}
  .ent-btns{flex-direction:column}
  .ent-btns .mbtn{width:100%;min-height:52px}
  /* 오른쪽 칸을 본문 위로 올린다 — 무엇이 남았는지 먼저 보이게 */
  .ent-grid{display:flex;flex-direction:column}
  .ent-side{order:-1}
  .ent-side .submit-box{display:none}   /* 아래에 같은 버튼이 또 있으니 중복은 숨긴다 */
}

.linkbtn.app-del{border-color:#e0c4bd;color:var(--c-req)}
.linkbtn.app-del:hover{background:var(--c-req);border-color:var(--c-req);color:#fff}

.rq-card{border:1px solid var(--ink);margin-top:22px;background:#fff}
.rq-card.all{border-color:var(--hair)}
.rq-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
         padding:16px 20px;border-bottom:1px solid var(--hair)}
.rq-head b{font-size:.95rem;letter-spacing:-.02em}
.rq-badge{font-size:.66rem;letter-spacing:.16em;padding:4px 10px 4px 12px;
          border:1px solid var(--ink);color:var(--ink)}
.rq-card.all .rq-badge{background:var(--ink);color:#fff}
.rq-list{display:flex;flex-direction:column}
.rq-row{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;
        border-bottom:1px solid var(--hair)}
.rq-row:last-child{border-bottom:none}
.rq-mark{flex:none;width:26px;height:26px;display:inline-flex;align-items:center;
         justify-content:center;border:1px solid var(--ink);font-size:.78rem;
         font-weight:600;line-height:1;margin-top:2px}
.rq-row.done .rq-mark{background:var(--ink);border-color:var(--ink);color:#fff}
.rq-bd{flex:1;min-width:0}
.rq-bd b{font-size:.95rem;letter-spacing:-.02em}
.rq-bd .rmeta{margin-top:5px;font-size:.83rem;line-height:1.7;word-break:keep-all}
.rq-act{flex:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rq-act .mbtn{padding:11px 20px;font-size:.82rem;white-space:nowrap}
.rq-foot{padding:14px 20px;border-top:1px solid var(--hair);background:var(--paper);
         font-size:.82rem;color:var(--sub);word-break:keep-all}
.rq-card.all .rq-foot{color:var(--ink)}
.modal .rq-list{border:1px solid var(--hair)}
.modal .rq-row{padding:16px}
.modal .rq-act{margin-top:12px;width:100%}
@media(max-width:720px){
  .rq-head{padding:14px 16px}
  .rq-row{flex-wrap:wrap;padding:16px}
  .rq-bd{flex:1 1 calc(100% - 40px)}
  .rq-act{width:100%;margin-top:12px;padding-left:40px}
  .rq-act .mbtn,.rq-act .linkbtn,.rq-act label{flex:1;justify-content:center;text-align:center}
  .rq-foot{padding:14px 16px}
  .modal .rq-act{padding-left:0}
}

/* ══════════════════════════════════════════════════════════════════
   2026-08 개편 ⑱ 읽기 편하게
   두 가지를 고친다.
     1) 창 안 여러 줄 입력칸이 폭 규칙을 못 받아 아주 작게 나오던 것
        (.modal input 에는 width:100% 가 있었지만 textarea·select 에는 없었다)
     2) 한글이 읽히지 않을 만큼 작아진 글씨들의 하한을 올린다
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. 창 안 입력칸 ── */
.modal textarea,.modal select{width:100%;box-sizing:border-box;margin-top:7px;
  padding:13px 14px;border:1px solid var(--hair);background:#fff;border-radius:0;
  font-family:inherit;font-size:.96rem;line-height:1.8;color:var(--ink);resize:vertical}
.modal textarea{min-height:150px}
.modal textarea.tall{min-height:min(58vh,520px)}
.modal textarea:focus,.modal select:focus,.modal input:focus{outline:none;
  border-color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.modal input{font-size:.96rem;padding:13px 14px;border-color:var(--hair)}
.modal label{font-size:.88rem;font-weight:600;color:#3d3833;margin-top:18px}
.modal .msg{font-size:.9rem;line-height:1.75}
.modal.wide{max-width:920px}
.modal h3{font-size:1.24rem}
/* 폼 화면 안 여러 줄 입력칸도 같은 높이 규칙 */
.form-panel textarea{min-height:130px;line-height:1.8}

/* ── 2. 글씨 하한 ──
   전부 키우는 게 아니라, 라벨류는 '작지만 읽히는' 선까지만 올린다. */
/* rem 은 16px 기준이다. 한글은 13px 아래로 내려가면 읽기 힘들어서 그 선을 하한으로 삼는다. */
.badge{font-size:.82rem;letter-spacing:.14em;padding:5px 12px 5px 14px}
.hero .tag{font-size:.84rem;letter-spacing:.22em}
.ptag,.stb{font-size:.8rem;letter-spacing:.08em}
.fp-label,.ent-box-h,.cs-more{font-size:.84rem;letter-spacing:.14em}
.cs-pen,.wd-artist,.wk-card .cap-a,.sec-head .more,.more{font-size:.84rem;letter-spacing:.12em}
nav.gnb>a,.gnb-t{font-size:.88rem;letter-spacing:.06em}
.gnb-d a{font-size:.88rem}
#authNav a{font-size:.84rem}
.cs-bar-t,.cs-bar-n{font-size:.88rem}
.info-tbl b{font-size:.84rem;letter-spacing:.1em}
.rq-badge{font-size:.78rem}
.ent-hint,.ent-legend{font-size:.86rem}
.gb-tag{font-size:.78rem}
.dday{font-size:.9rem}
.rn-more{font-size:.88rem}
.hero .btns a{font-size:.84rem;letter-spacing:.12em}
.poster .ph,.wk-card .im.ph,.ph{font-size:.86rem}
.soc-div{font-size:.84rem}
.badge{font-size:.84rem}
.ex-sub,.bmeta,.card-body .dt,.wk-card .ar,.artist-ex,.notice-row .nd,.blog-row .bdt,
.ex-row .rp,.stat .sl,.gb-card .gdt{font-size:.84rem;letter-spacing:.04em}
.rmeta,.empty,.entry-info,.foot-in,.gb-secd,.ent-note,.ent-item-v,.wk-card .cap-m,
.wk-card .cap-y,.rq-bd .rmeta,.gb-scl,.w-cap,.book .bmeta{font-size:.86rem;line-height:1.75}
.cs-prev,.cs-pick-p{font-size:.9rem}
.linkbtn{font-size:.86rem;padding:8px 14px}
.act-btns a{font-size:.84rem;letter-spacing:.1em}
.apply{font-size:.88rem;letter-spacing:.1em}
.tabs button,.wk-tabs button{font-size:.9rem}
.tbl{font-size:.92rem}
.tbl th{font-size:.86rem;letter-spacing:.04em}
.ph{font-size:.88rem;letter-spacing:.08em}
.foot-nav a{font-size:.86rem}
.chk{font-size:.9rem}
.filebtn2{font-size:.88rem}
.pf-file{font-size:.88rem}
.mbtn{font-size:.94rem}
.atab{font-size:.94rem}

@media(max-width:720px){
  .modal textarea{min-height:170px}
  .modal textarea.tall{min-height:52vh}
  .modal.wide{max-width:100%}
  .badge{font-size:.78rem}
  .tbl{font-size:.9rem}
  .rmeta,.empty,.entry-info,.ent-note{font-size:.88rem}
  .cs-pen,.wd-artist,.wk-card .cap-a{font-size:.76rem}
}

/* 아주 좁은 화면(320px) */
@media(max-width:360px){
  .wrap{padding-left:16px;padding-right:16px}
  .modal-bg>.modal{padding-left:16px;padding-right:16px}
  #wkModal>.modal>img{margin-left:-16px;margin-right:-16px;width:calc(100% + 32px)!important}
  .gb-chips-scale{grid-template-columns:repeat(4,1fr)}
  .wk-grid{grid-template-columns:1fr;gap:26px}
  .grid-cards,.books{grid-template-columns:1fr;gap:30px}
  .act-btns a{flex:1 1 100%}
}

/* ══════════════════════════════════════════════════════════════════════
   디자인 시안 반영 (2026-08-18)

   시안 11장을 그대로 옮긴 것이 아니라, 시안이 쓰고 있는 「규칙」을
   사이트 전체에 적용했다. 시안에만 있는 내용(협력 파트너 로고 · 뉴스레터
   · 예시 전화번호)은 사실이 아니라서 넣지 않았다.

   시안에서 읽어낸 규칙
     1. 바탕은 따뜻한 아이보리, 글자는 순검정보다 부드러운 먹
     2. 강조는 빨강 하나. 현재 전시 · 활성 메뉴 · 주요 버튼에만 쓴다
     3. 페이지 제목은 큰 명조. 본문은 고딕. 이 대비가 이 사이트의 인상이다
     4. 카드는 그림자 없이 얇은 선. 여백을 넉넉히
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#F7F5F0;          /* 시안의 아이보리 */
  --paper:#F0EDE6;
  --ink:#1A1A18;
  --sub:#8A857C;
  --line:#E2DED4;
  --hair:rgba(26,26,24,.12);
  --accent:#1A1A18;      /* 본문 강조는 먹 그대로 */
  --red:#C8382B;         /* 시안의 빨강 — 아껴 쓴다 */
  --now:#C8382B;
  --f-s:'Noto Serif KR',serif;
}
body{background:var(--bg)}
header{background:rgba(247,245,240,.92)}

/* ── 제목은 명조 ────────────────────────────────────────────────────
   앞서 「모든 제목을 고딕으로」 바꿔둔 규칙이 있어 되돌린다.
   시안의 인상은 큰 명조 제목과 고딕 본문의 대비에서 나온다. */
.sec-head :is(h1,h2),.ex-title,.hero h1,.artist-name,.cat-title{
  font-family:var(--f-s);
  font-weight:600;
  letter-spacing:-.02em;
}
.sec-head :is(h1,h2){font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.25}
.ex-title{font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.3;font-weight:600}
.hero h1{font-size:clamp(1.9rem,5vw,3.2rem);line-height:1.3;font-weight:600}

/* 페이지 머리 : 제목 아래 가는 선, 그 아래 내용 (시안 공통) */
.sec-head{border-bottom:1px solid var(--line);padding-bottom:20px}

/* ── 빨강은 여기에만 ──────────────────────────────────────────────── */
nav.gnb a.on{color:var(--red);box-shadow:inset 0 -2px 0 var(--red);font-weight:600}
.logo span{color:var(--red)}
.stb.st-now,.dday-line .dday{background:var(--red);color:#fff}
.rec-card .apply,a.apply,.mbtn.fill,.btn-primary{
  background:var(--red);border-color:var(--red);color:#fff}
.rec-card .apply:hover,a.apply:hover,.mbtn.fill:hover{
  background:#A82C21;border-color:#A82C21}
.sec-label,.eyebrow{color:var(--red);font-size:.72rem;letter-spacing:.14em;font-weight:700}

/* ── 카드 : 그림자 대신 얇은 선 ──────────────────────────────────── */
.rec-card,.book,.card,.press-card,.form-panel{
  box-shadow:none;border:1px solid var(--line);background:var(--paper)}

/* ── 표 : 시안의 공지 목록처럼 가로선만 ───────────────────────────── */
.tbl th{border-bottom:1px solid var(--ink);font-weight:600;background:transparent}
.tbl td{border-bottom:1px solid var(--line)}

@media(max-width:720px){
  .sec-head :is(h1,h2){font-size:1.7rem}
  .ex-title{font-size:1.5rem}
  .hero h1{font-size:1.75rem}
}

/* 이 파일이 잘 왔다는 표식 — 지우지 마세요 */
:root{--css-seo:1}
