:root{--sr-paper:#f7f4ee;--sr-ink:#11100e;--sr-red:#d6281d;--sr-line:#d8d2c8;--sr-muted:#777168;--sr-serif:'Noto Serif KR','Batang',serif;--sr-sans:'Pretendard Variable',Pretendard,'Noto Sans KR',sans-serif}
html,body{background:var(--sr-paper);color:var(--sr-ink);font-family:var(--sr-sans)}
.wrap,.head-in{width:calc(100% - 96px);max-width:1440px;margin-inline:auto;padding-inline:0}
header{position:sticky;top:0;background:rgba(247,244,238,.96);border-bottom:1px solid var(--sr-line);backdrop-filter:blur(12px)}
.head-in{height:80px}.logo{font-size:1.12rem;letter-spacing:.075em;color:var(--sr-ink)}.logo span{color:inherit}
nav.gnb{gap:38px}nav.gnb>a,.gnb-t{padding:26px 0 23px;border-radius:0;font-size:.84rem;color:var(--sr-ink)}
nav.gnb>a.on,.gnb-t.on{color:var(--sr-red);box-shadow:inset 0 -2px var(--sr-red)}
nav.gnb .gnb-d a[data-r=books]{display:none}.site-search{border:0;background:transparent;font-size:1.25rem;line-height:1;cursor:pointer;padding:0 2px;color:var(--sr-ink)}#authNav{padding-left:14px;border-left:1px solid var(--sr-line)}#authNav a.hl{border-radius:0;background:transparent!important;color:var(--sr-ink)!important;padding-inline:4px;font-size:.74rem}
.sec{padding:34px 0 90px}.sec-head{min-height:126px;align-items:center;border-bottom:1px solid var(--sr-line)}
.sec-head h2{font:500 clamp(2.5rem,3.7vw,3.7rem)/1.1 var(--sr-serif);letter-spacing:-.06em}
.mock-page-intro{font-size:.82rem;color:var(--sr-muted);margin:28px 0}
.tabs,.wk-tabs{gap:34px;margin:0 0 30px;border-bottom:1px solid var(--sr-line)}
.tabs button,.wk-tabs button{padding:16px 0;border:0;border-bottom:2px solid transparent;background:transparent;border-radius:0;font-size:.78rem}
.tabs button.on,.wk-tabs button.on{color:var(--sr-red);border-color:var(--sr-red);background:transparent}
.badge{border-radius:0}.b-current{background:var(--sr-red)}.mock-kicker{display:block;color:var(--sr-red);font-size:.65rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}

/* Exhibition archive: one editorial lead, then the archive grid. */
.mock-ex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}
.mock-ex-card{position:relative;border-bottom:1px solid var(--sr-line);padding-bottom:24px;cursor:pointer;min-width:0}
/* 지난 전시 카드는 시안처럼 작은 사진 왼쪽 + 글 오른쪽 가로 배치.
   사진이 카드 폭을 다 쓰면 목록이 성기게 늘어져 시안의 촘촘한 느낌이 사라진다. */
.mock-ex-card:not(.is-featured){display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;align-items:start;padding-bottom:20px}
.mock-ex-card:not(.is-featured) .mock-ex-image{width:104px}
.mock-ex-card:not(.is-featured) .mock-ex-image .poster{aspect-ratio:1/1}
.mock-ex-card:not(.is-featured) .mock-ex-copy{padding-top:0}
.mock-ex-card:not(.is-featured) .mock-ex-copy h3{font-size:1.06rem;margin:8px 0 8px}
.mock-ex-card:not(.is-featured) .mock-index{display:none}
.mock-ex-card.is-featured{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,46%) 1fr;gap:54px;align-items:center;padding-bottom:34px}
.mock-ex-image .poster{width:100%;aspect-ratio:16/9;object-fit:cover;background:#e5dfd4}.mock-ex-card:not(.is-featured) .mock-ex-image .poster{aspect-ratio:1/1}
.mock-ex-copy{position:relative;padding-top:15px}.mock-ex-copy h3{font:500 1.35rem/1.45 var(--sr-serif);letter-spacing:-.035em;margin:10px 0 12px}.is-featured .mock-ex-copy h3{font-size:clamp(1.8rem,3vw,3.1rem);max-width:20ch}
.mock-ex-copy p{font-size:.75rem;color:var(--sr-muted);margin-top:4px}.mock-ex-intro{font-size:.85rem;line-height:1.85;color:#4a4640;margin:22px 0;max-width:62ch;white-space:pre-line}
.mock-index{position:absolute;right:0;top:12px;color:var(--sr-red);font-size:.68rem;letter-spacing:.12em}.mock-arrow{display:inline-block;margin-top:18px;font-size:.72rem;font-weight:700;letter-spacing:.08em}
.mock-admin-edit{grid-column:1/-1;text-align:right}

/* Exhibition detail */
#app[data-page=ex] .back{display:inline-block;margin:28px 0 12px;font-size:.72rem;color:var(--sr-muted)}
#app[data-page=ex] .ex-head{display:grid;grid-template-columns:minmax(0,48%) 1fr;gap:7%;align-items:start;padding:0 0 40px;border-bottom:1px solid var(--sr-line)}
#app[data-page=ex] .ex-head .poster{width:100%;aspect-ratio:1/1.02;object-fit:cover;background:#e4ded4}
#app[data-page=ex] .ex-title{font:500 clamp(2.5rem,4.5vw,4.7rem)/1.16 var(--sr-serif);letter-spacing:-.065em;margin:12px 0 18px}
#app[data-page=ex] .ex-sub{color:var(--sr-red);font-size:.7rem;letter-spacing:.12em}.info-tbl{border-top:1px solid var(--sr-ink)}.info-tbl>div{border-bottom:1px solid var(--sr-line);padding:12px 0}

/* Catalogue */
#app[data-page=books] .sec-head:after{content:'EXHIBITION CATALOGUE';align-self:flex-end;margin:0 0 20px auto;color:var(--sr-muted);font-size:.62rem;letter-spacing:.14em}
#app[data-page=books] .books{display:grid;grid-template-columns:1.25fr .75fr;gap:1px;background:var(--sr-line);border:1px solid var(--sr-line)}
#app[data-page=books] .book{display:grid;grid-template-columns:42% 1fr;align-items:center;min-height:270px;padding:26px;background:var(--sr-paper);border:0}
#app[data-page=books] .book:first-child{grid-row:span 2;min-height:541px;grid-template-columns:52% 1fr}#app[data-page=books] .book:first-child .bb:before{content:'LATEST';display:block;color:var(--sr-red);font-size:.62rem;font-weight:800;letter-spacing:.14em;margin-bottom:16px}.book .btt{font:500 1.1rem/1.5 var(--sr-serif)}#app[data-page=books] .book:first-child .btt{font-size:clamp(2rem,3vw,3rem)}.book .dl{display:inline-block;margin-top:22px;border:1px solid var(--sr-red);color:var(--sr-red);padding:8px 14px;font-size:.7rem}

/* Works */
.mock-works-tools{display:grid;grid-template-columns:1fr minmax(340px,440px);gap:60px;align-items:end;padding:26px 0 8px}.mock-works-tools .rmeta{margin:0!important;max-width:620px}.mock-work-search input{width:100%;padding:13px 34px 13px 2px;border:0;border-bottom:1px solid var(--sr-ink);border-radius:0;background:transparent;font-family:inherit;font-size:.86rem}
.mock-work-kinds{display:flex;justify-content:flex-end;gap:28px;border-bottom:1px solid var(--sr-line);margin:0 0 26px}.mock-work-kinds button{border:0;border-bottom:2px solid transparent;background:transparent;padding:12px 0;font:600 .7rem var(--sr-sans);color:var(--sr-muted);cursor:pointer}.mock-work-kinds button.on{color:var(--sr-red);border-bottom-color:var(--sr-red)}
#app[data-page=works] .wk-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:46px 22px}#app[data-page=works] .wk-card,#app[data-page=works] .wk-card:first-child{grid-column:auto;grid-row:auto;min-width:0;border:0;background:transparent}#app[data-page=works] .wk-card .im{aspect-ratio:1/1;object-fit:cover}#app[data-page=works] .wk-card .bd{padding:12px 0}#app[data-page=works] .wk-card .tt{font:500 1rem var(--sr-serif)}

/* Open call */
#app[data-page=recruit] .rec-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,43%);grid-template-rows:1fr auto;gap:18px 48px;border:1px solid var(--sr-line);border-radius:0;background:transparent;padding:34px 34px 34px 86px;margin-top:26px}
#app[data-page=recruit] .rec-card>.poster{grid-column:2;grid-row:1/3;width:100%;max-height:500px;object-fit:contain;background:#fff}#app[data-page=recruit] .rec-main{grid-column:1;grid-row:1}#app[data-page=recruit] .rec-act{grid-column:1;grid-row:2;justify-self:start}#app[data-page=recruit] .rec-top{position:absolute;left:0;top:0;bottom:0;width:58px;border-right:1px solid var(--sr-line);display:flex;flex-direction:column;align-items:center;padding-top:22px;gap:12px}#app[data-page=recruit] .rec-top .badge{writing-mode:vertical-rl;background:transparent;color:var(--sr-red);font-size:.7rem;letter-spacing:.18em}#app[data-page=recruit] .rec-dday{font-size:.68rem;color:var(--sr-red);white-space:nowrap}#app[data-page=recruit] .rec-card .rtt{font:600 1.35rem/1.5 var(--sr-serif)}#app[data-page=recruit] .apply{border-radius:0;background:var(--sr-red);border-color:var(--sr-red)}

/* News */
#app[data-page=blog] #blogList{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}#app[data-page=blog] .blog-row{display:block;border:0;border-bottom:1px solid var(--sr-line);padding:0 0 18px;min-width:0}#app[data-page=blog] .blog-row img{width:100%!important;height:auto!important;aspect-ratio:4/3;object-fit:cover}#app[data-page=blog] .blog-row:first-child{grid-column:span 2;grid-row:span 2;display:grid;grid-template-columns:1.15fr .85fr;border:1px solid var(--sr-line);padding:0}#app[data-page=blog] .blog-row:first-child>div:last-child{padding:24px}#app[data-page=blog] .blog-row:first-child .bt{font:500 clamp(1.5rem,2vw,2.3rem)/1.45 var(--sr-serif)}#app[data-page=blog] .blog-row .bt{font-family:var(--sr-serif)}

/* Notices */
.mock-notice-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,.8fr);gap:52px;align-items:start}
.mock-notice-table{border-top:1px solid var(--sr-ink)}.mock-notice-tr{display:grid;grid-template-columns:48px 64px 1fr 100px;gap:12px;align-items:center;padding:16px 6px;border-bottom:1px solid var(--sr-line);font-size:.78rem}.mock-notice-th{color:var(--sr-muted);font-size:.7rem}.mock-notice-tag{border:1px solid var(--sr-line);padding:2px 5px;text-align:center}.mock-notice-body{grid-column:3/-1;line-height:1.8;color:var(--sr-muted)}
.mock-notice-aside{min-height:520px;border:1px solid var(--sr-line);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}.mock-notice-aside strong{font:500 1.15rem var(--sr-serif)}.mock-notice-aside small{color:var(--sr-muted)}.mock-bell{font-size:1.6rem}

/* Inquiry */
.mock-inquiry-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;padding-top:38px}.mock-contact-copy h3{font:500 2rem var(--sr-serif);margin:12px 0 30px}.mock-contact-copy p,.mock-contact-copy dl{font-size:.84rem;line-height:1.9}.mock-contact-copy dl{display:grid;grid-template-columns:70px 1fr;border-top:1px solid var(--sr-ink);margin-top:32px;padding-top:18px}.mock-contact-copy dt{font-weight:700}.mock-login-card{min-height:470px;border:1px solid var(--sr-line);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:50px}.mock-login-card strong{font:500 1.35rem/1.65 var(--sr-serif);margin:14px 0 24px}.mock-login-card label{display:block;width:100%;text-align:left;color:var(--sr-muted);font-size:.68rem;margin-top:10px}.mock-login-card label input{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid var(--sr-line);border-radius:0;background:transparent;font-family:inherit}.mock-login-card .mbtn{width:100%;margin-top:14px;border-radius:0;background:var(--sr-ink);border-color:var(--sr-ink)}.mock-login-links{display:flex;gap:20px;margin-top:14px;font-size:.7rem;color:var(--sr-muted)}.mock-login-links a{cursor:pointer}

/* About */
.mock-about-top{display:grid;grid-template-columns:22% 1fr;border-bottom:1px solid var(--sr-line);margin-bottom:28px}.mock-about-top .sec-head{min-height:130px;border:0;border-right:1px solid var(--sr-line);align-items:flex-start;padding-top:26px}.mock-about{max-width:none}.mock-about-manifesto{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:start;padding:28px 36px}.mock-about-manifesto h3{font:500 clamp(1.9rem,2.9vw,3rem)/1.32 var(--sr-serif);letter-spacing:-.055em}.mock-about-image{height:190px;overflow:hidden;margin:0 0 28px}.mock-about-image img{width:100%;height:100%;object-fit:cover;object-position:center 43%;filter:none;transform:none}.mock-about-copy{display:grid;grid-template-columns:1fr 1fr;gap:24px 64px}.mock-about-copy p{font-size:.84rem;line-height:1.9;color:#4d4942}.mock-about-copy .lead{font:500 1.1rem/1.9 var(--sr-serif);color:var(--sr-ink)}.mock-about-values{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;border-top:1px solid var(--sr-line);border-bottom:1px solid var(--sr-line)}.mock-about-values article{padding:20px;border-right:1px solid var(--sr-line)}.mock-about-values article:last-child{border:0}.mock-about-values b,.mock-about-values span{display:block}.mock-about-values span{font-size:.76rem;color:var(--sr-muted);margin-top:8px}
.mock-raw-editor{display:none}.mock-raw-editor.editing{display:block;margin-top:24px;padding:24px;border:1px dashed var(--sr-red);background:#fff}

/* Support */
.mock-support-lead{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:start;padding:10px 0 34px}.mock-support-lead h3{font:500 clamp(2.5rem,4.4vw,4.4rem)/1.25 var(--sr-serif);letter-spacing:-.06em;margin-top:12px}.mock-support-lead .about{font-size:.84rem;line-height:1.95;white-space:pre-line}.mock-support-image{width:66%;height:310px;overflow:hidden;margin-bottom:32px}.mock-support-image img{width:100%;height:100%;object-fit:cover;object-position:left 48%}.mock-support-cards{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--sr-line)}.mock-support-cards .form-panel{max-width:none;margin:0;border:0;border-right:1px solid var(--sr-line);background:transparent;border-radius:0}.mock-support-cards .form-panel:last-child{border-right:0}.mock-support-contact{margin-top:30px;padding:0;font-size:.82rem}.mock-support-contact .mbtn{display:inline-block;margin-top:18px;border-radius:0;background:var(--sr-red);border-color:var(--sr-red)}

/* Citizen stories: one large paper letter beside a compact archive. */
#app[data-page=stories] .cs-grid{display:grid;grid-template-columns:1.25fr repeat(3,minmax(0,.75fr));gap:18px;align-items:stretch}
#app[data-page=stories] .cs-card{border:1px solid var(--sr-line);border-radius:0;background:#fbf8f2;box-shadow:none;padding:24px;min-width:0}
#app[data-page=stories] .cs-card:first-child{grid-row:span 2;min-height:430px;padding:38px;background:#fffdf8;transform:rotate(-.35deg);box-shadow:0 12px 25px rgba(46,38,26,.07)}
#app[data-page=stories] .cs-title{font-family:var(--sr-serif);font-weight:500}#app[data-page=stories] .cs-guide{border-radius:0;border-left:2px solid var(--sr-red);background:#f6eae3;padding:14px 18px;margin-bottom:24px;font-size:.72rem;line-height:1.55}#app[data-page=stories] .cs-guide p{margin:0!important}

footer{background:var(--sr-paper);color:var(--sr-ink);border-top:1px solid var(--sr-line);margin-top:40px;padding:42px 0 28px}.foot-top{flex-direction:row;gap:30px;border-bottom:1px solid var(--sr-line);padding-bottom:26px;margin-bottom:26px}.foot-mark{font-size:.95rem;color:var(--sr-ink);letter-spacing:.16em}.foot-nav a,footer a,.foot-in b,.foot-in #footOrg{color:var(--sr-ink)!important}.foot-nav a{font-size:.78rem}.foot-in{color:var(--sr-muted)}footer .plogos{background:transparent;padding:0}footer .plogos img{filter:grayscale(1);opacity:.7}

@media(max-width:900px){html,body{overflow-x:hidden}.wrap,.head-in{width:calc(100% - 36px)}.head-in{height:64px}.logo{font-size:.9rem}.site-search{display:none}nav.gnb{gap:12px}.sec-head{min-height:100px}.mock-ex-grid{grid-template-columns:1fr}.mock-ex-card:not(.is-featured){grid-template-columns:88px minmax(0,1fr);gap:14px}.mock-ex-card:not(.is-featured) .mock-ex-image{width:88px}.mock-ex-card.is-featured,#app[data-page=ex] .ex-head{grid-template-columns:1fr;gap:20px}#app[data-page=books] .books{grid-template-columns:1fr}#app[data-page=books] .book,#app[data-page=books] .book:first-child{grid-template-columns:36% minmax(0,1fr);min-height:0}.mock-works-tools{grid-template-columns:1fr;gap:12px;min-width:0}#app[data-page=works] .wk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px}#app[data-page=works] .wk-card .tt,#app[data-page=works] .wk-card .cap-m{overflow-wrap:anywhere}#app[data-page=recruit] .rec-card{display:flex;flex-direction:column;width:100%;max-width:100%;padding:18px;gap:20px;min-width:0}#app[data-page=recruit] .rec-card>*{max-width:100%;min-width:0}#app[data-page=recruit] .rec-card>.poster{order:2;width:100%;max-height:none}#app[data-page=recruit] .rec-main{order:3;min-width:0}#app[data-page=recruit] .rec-act{order:4}#app[data-page=recruit] .rec-top{order:1;position:static;width:100%;height:auto;border:0;border-bottom:1px solid var(--sr-line);padding:0 0 12px;flex-direction:row;justify-content:space-between}#app[data-page=recruit] .rec-top .badge{writing-mode:horizontal-tb}#app[data-page=recruit] .rec-dday,#app[data-page=recruit] .dday{max-width:150px;margin-left:0}#app[data-page=recruit] .rtt,#app[data-page=recruit] .rmeta{overflow-wrap:anywhere;word-break:break-word}#app[data-page=blog] #blogList{grid-template-columns:repeat(2,minmax(0,1fr))}#app[data-page=blog] .blog-row:first-child{grid-column:span 2;display:block}.mock-notice-layout,.mock-inquiry-layout,.mock-about-copy,.mock-support-lead,.mock-support-cards{grid-template-columns:1fr;min-width:0}.mock-login-card{width:100%;max-width:100%;min-width:0;padding:32px 22px}.mock-login-card strong{display:block;width:100%;font-size:1.08rem;overflow-wrap:anywhere;word-break:break-word}.mock-notice-aside{min-height:280px}.mock-about-top{grid-template-columns:1fr}.mock-about-top .sec-head{border-right:0;border-bottom:1px solid var(--sr-line)}.mock-about-manifesto{grid-template-columns:1fr;gap:12px;padding-inline:0}.mock-about-values{grid-template-columns:1fr}.mock-about-values article{border-right:0;border-bottom:1px solid var(--sr-line)}.mock-about,.mock-about-copy,.mock-about-values,.mock-support{min-width:0}.mock-about p,.mock-about span,.mock-support p,.mock-support div{overflow-wrap:anywhere}.mock-support-image{width:100%;height:240px}.mock-support-cards .form-panel{border-right:0;border-bottom:1px solid var(--sr-line)}#app[data-page=stories] .cs-grid{grid-template-columns:1fr}#app[data-page=stories] .cs-card:first-child{min-height:0}.foot-top{flex-direction:column}}
@media(max-width:900px){#app[data-page=recruit] .rec-card>.poster{width:100%!important;max-width:100%!important;overflow:hidden}#app[data-page=recruit] .rec-card>.poster img{display:block;width:100%!important;max-width:100%!important;height:auto!important;object-fit:contain}}

/* ── 지원 절차 (시안 5번 하단) ─────────────────────────────────────────
   01 공고 확인 → 02 신청서 제출 → 03 결과 발표.
   번호를 크게 두고 화살표로 이어, 순서가 있다는 것이 한눈에 보이게 한다. */
.mock-steps{margin-top:64px;padding-top:34px;border-top:1px solid var(--sr-line)}
.mock-steps-tt{font:600 1.05rem/1.4 var(--sr-serif);letter-spacing:-.02em;margin:0 0 22px}
.mock-steps-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.mock-steps-list li{display:flex;align-items:flex-start;gap:16px;padding:4px 30px 4px 0;position:relative;min-width:0}
.mock-steps-list li+li{padding-left:30px;border-left:1px solid var(--sr-line)}
.mock-step-no{font:400 1.9rem/1 var(--sr-serif);color:var(--sr-muted);flex:none;letter-spacing:.02em}
.mock-steps-list b{display:block;font-size:.98rem;font-weight:600;margin-bottom:7px}
.mock-steps-list p{margin:0;font-size:.83rem;line-height:1.8;color:var(--sr-muted)}
@media(max-width:900px){
  .mock-steps{margin-top:44px}
  .mock-steps-list{grid-template-columns:1fr;gap:0}
  .mock-steps-list li{padding:16px 0;border-top:1px solid var(--sr-line)}
  .mock-steps-list li+li{padding-left:0;border-left:0}
}

/* ── 신청 작가 표 : 요약해서 보여준다 ─────────────────────────────────
   작가가 쓴 글을 표 안에 통째로 펼치면 한 사람이 화면 몇 판을 차지한다.
   긴 글은 2줄만 보이고 「더 보기」로 펼친다. 폭도 고정해 열이 밀리지 않게. */
.tbl td.adm-intro{width:200px;max-width:200px;min-width:150px;vertical-align:top}
.tbl td.adm-intro .ae-long,.tbl td.adm-intro .ae-lt{max-width:200px}
.tbl td .entry-info.ae{max-width:300px}
.ae-lt.clip{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;max-height:3.4em}
.ae-more{color:var(--sr-red,#C8382B)}
/* 표 안의 모든 칸은 위 정렬 — 한 칸이 길어져도 다른 칸이 가운데로 뜨지 않게 */
.tbl td{vertical-align:top}

/* ── 공연 예매 ────────────────────────────────────────────────────────
   공연 소개는 길게, 회차는 짧게. 예매하러 온 사람이 「언제」를 먼저
   찾을 수 있게 회차 줄을 눈에 띄게 떼어놓는다. */
.bk-perf{border-top:1px solid var(--sr-ink);padding:34px 0 8px}
.bk-perf:first-child{border-top:0;padding-top:8px}
.bk-head{margin-bottom:16px}
.bk-kind{display:inline-block;font-size:.7rem;letter-spacing:.14em;color:var(--sr-red,#C8382B);font-weight:700;margin-bottom:8px}
.bk-head h3{font:600 clamp(1.4rem,2.6vw,2rem)/1.35 var(--sr-serif);letter-spacing:-.03em;margin:0}
.bk-place{font-size:.8rem;color:var(--sr-muted);margin-top:8px}
.bk-desc{font-size:.9rem;line-height:2;color:#3f3b36;white-space:pre-line;
  word-break:keep-all;max-width:70ch;margin-bottom:22px}
.bk-shows{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--sr-line)}
.bk-show{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;align-items:center;
  padding:16px 4px;border-bottom:1px solid var(--sr-line)}
.bk-when{font-size:1rem;font-weight:600;letter-spacing:-.02em}
.bk-meta{font-size:.8rem;color:var(--sr-muted);white-space:nowrap}
.bk-btn{flex:none;padding:9px 22px;font-size:.86rem}
.bk-show.off{opacity:.45}
.bk-show.off .bk-when{font-weight:500}
/* 예매 완료 창의 예매번호 — 크게 보여주고 그대로 부를 수 있게 */
.bk-code{margin:18px auto 12px;padding:14px 18px;border:1px dashed var(--sr-line);
  font-size:1.15rem;font-weight:700;letter-spacing:.08em;text-align:center;background:#fff}
@media(max-width:640px){
  .bk-show{grid-template-columns:1fr;gap:8px;align-items:flex-start}
  .bk-btn{width:100%;margin-top:4px}
  .bk-desc{font-size:.86rem;line-height:1.9}
}

/* ── 홈의 공연 예매 띠 ────────────────────────────────────────────────
   예매를 「전시」 메뉴 안쪽에 두었더니 찾지를 못했다. 공연은 날짜가
   지나면 끝이라, 첫 화면에서 바로 보이고 바로 누를 수 있어야 한다. */
.home-bk-list{margin-top:16px;border-top:1px solid var(--sr-line)}
.home-bk-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;
  align-items:center;padding:16px 4px;border-bottom:1px solid var(--sr-line)}
.home-bk-when{font-size:.92rem;font-weight:700;letter-spacing:-.02em;white-space:nowrap;
  color:var(--sr-red,#C8382B)}
.home-bk-tt{font-size:1rem;font-weight:600;letter-spacing:-.02em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-bk-tt span{margin-left:8px;font-size:.76rem;font-weight:400;color:var(--sr-muted)}
.home-bk-btn{flex:none;padding:9px 20px;font-size:.84rem}
@media(max-width:640px){
  .home-bk-row{grid-template-columns:1fr;gap:6px;align-items:flex-start}
  .home-bk-tt{white-space:normal}
  .home-bk-btn{width:100%;margin-top:6px}
}

/* ══════════════════════════════════════════════════════════════════════
   손가락으로 누를 수 있는 크기 · 키보드 포커스 (2026-08-23)

   왜 고치나
     390px 휴대폰에서 재보니 햄버거 40px, 예매 버튼 37px, 「회원가입 ·
     비밀번호 찾기」 링크 20px, 푸터 링크 대부분 40px 아래였다. 작품
     필터는 글자 폭만 눌렸다. 손끝이 닿는 넓이는 대략 9mm — 화면으로
     44px 쯤이다. 그보다 작으면 옆 것이 눌린다.

   어떻게
     글자 크기와 생김새는 그대로 두고, 눌리는 넓이만 넓힌다.
     눈에 보이는 여백이 늘어나면 안 되는 곳은 음수 margin 으로 되돌린다.
   ══════════════════════════════════════════════════════════════════════ */

/* 키보드로 옮겨 다닐 때 지금 어디에 있는지 항상 보이게 한다.
   마우스로 누를 때는 나오지 않는다(:focus-visible). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--sr-red,#C8382B);
  outline-offset:2px;
  border-radius:2px;
}

@media(max-width:768px){
  /* 햄버거 — 40px → 44px */
  .hamb{min-width:44px;min-height:44px;align-items:center;justify-content:center}

  /* 예매 버튼 · 일반 버튼 */
  .bk-btn,.home-bk-btn,.mbtn{min-height:44px}
  .linkbtn{min-height:44px;padding-top:11px;padding-bottom:11px}

  /* 로고 — 첫 화면으로 돌아가는 링크다. 글자 높이 그대로면 30px 였다 */
  a.logo{display:inline-flex;align-items:center;min-height:44px}

  /* 「전체 보기 →」 · 「아카이브 →」 — 41px 였다 */
  a.as-link.more{min-height:44px;display:inline-flex;align-items:center}

  /* 푸터 차림표 — 「전시」처럼 두 글자짜리는 폭이 21px 밖에 안 됐다.
     세로는 넉넉했지만 가로로 옆 항목과 붙어 있어 잘못 눌리기 쉽다. */
  .foot-nav a{min-width:44px;text-align:center;padding-inline:6px}

  /* 「회원가입 · 비밀번호 찾기」 — 글자만 눌리던 것을 위아래로 넓힌다.
     보이는 간격이 벌어지지 않게 음수 margin 으로 되돌린다. */
  .mock-login-links{gap:8px;margin-top:6px}
  .mock-login-links a{
    display:inline-flex;align-items:center;
    min-height:44px;padding:0 12px;margin:0 -4px;
  }

  /* 작품 필터 — 글자 폭만 눌리던 것을 칸 전체로 */
  .mock-work-kinds{gap:0;justify-content:space-between}
  .mock-work-kinds button{
    flex:1 1 0;min-height:44px;padding:12px 6px;text-align:center;
  }

  /* 푸터 링크 */
  footer a{display:inline-block;min-height:44px;line-height:44px;padding:0 2px;margin:0 -2px}

  /* 화면 아래 고정 버튼이 마지막 글과 푸터를 가리지 않게 한다.
     아이폰의 홈 막대 자리(safe-area)까지 함께 비운다. */
  body{padding-bottom:env(safe-area-inset-bottom)}
  main{padding-bottom:24px}
}

/* 320px 처럼 아주 좁은 화면에서 화면 전체가 가로로 밀리지 않게 한다.
   넓은 표는 표 자기 안에서만 옆으로 넘어가게 한다. 화면 전체가 밀리면
   글을 읽을 때마다 좌우로 흔들려서 읽기가 어렵다. */
html,body{overflow-x:hidden}
@media(max-width:768px){
  table{display:block;max-width:100%;overflow-x:auto}
}

/* ══════════════════════════════════════════════════════════════════════
   클릭되던 상자를 진짜 링크로 바꾼 자리 (2026-08-23)

   왜 고쳤나
     로고 · 전시 카드 · 작품 카드 · 「전체 보기」가 onclick 만 달린 div ·
     span 이었다. 눌리기는 하지만 링크가 아니라서
       · Tab 키로 닿지 않는다 (키보드만 쓰는 사람은 못 쓴다)
       · 「링크 주소 복사」와 「새 탭에서 열기」가 안 나온다
       · 화면을 읽어주는 프로그램이 「링크」라고 말해주지 않는다
     이제 <a href="#/..."> 라서 위 세 가지가 모두 된다.

   무엇을 맞추나
     <a> 는 원래 글자 안에 흐르는(inline) 요소라 그대로 두면 상자
     모양이 무너진다. 원래 div 였던 자리는 block 으로 되돌리고,
     기본 밑줄과 파란 글자색을 끈다. 생김새는 바뀌지 않는다.
   ══════════════════════════════════════════════════════════════════════ */
.as-link{color:inherit;text-decoration:none;cursor:pointer}
.as-link:hover{color:inherit}

/* 원래 div · article 이던 것 — 다시 상자로.
   :where() 로 감싸 우선순위를 0 으로 만든다. 이렇게 하지 않으면
   .ex-row{display:grid} 같은 원래 규칙을 이 줄이 눌러버려서
   가로로 놓이던 칸이 세로로 쌓인다(실제로 그렇게 깨졌다). */
a:where(.as-link){display:block}

/* 원래 span 이던 것(「전체 보기 →」 · 「← 뒤로」)은 그대로 글자 흐름 안에 */
a:where(.as-link.more),
a:where(.as-link.back){display:inline-block}

/* 키보드로 옮겨 다닐 때 카드 전체가 눈에 띄게 */
.as-link:focus-visible{outline:2px solid var(--sr-red,#C8382B);outline-offset:3px}

/* 시민 이야기 아래의 도움 연락처.
   목록 맨 위의 안내는 글을 다 읽고 나면 화면 밖으로 사라져 있다.
   마음이 힘들어지는 것은 대개 다 읽은 뒤라 그때 눈앞에 있어야 한다. */
.cs-help{margin-top:26px;padding:16px 18px;border:1px solid var(--sr-line);
  background:#fff;font-size:.86rem;line-height:1.9;color:var(--sr-ink)}
.cs-help b{color:var(--sr-red,#C8382B)}
.cs-help span{display:inline-block;margin-top:4px;font-size:.8rem;color:var(--sr-muted)}

/* 모집 카드 제목을 div 에서 h3 로 올렸다(제목 계층). 여백은 그대로 둔다. */
h3.rtt{margin:0}