@charset "utf-8";
/* ============================================================
   한빛문화예술회관 — 다크·프리미엄
   레퍼런스 구조: 예술의전당(www.sac.or.kr)
   토큰 고정: 스페이싱 4px 스케일 / 아이콘 16·20·24·40·48 / 버튼 38·44·52
   ============================================================ */

/* ---------- 1. 토큰 ---------- */
:root{
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  --gutter:40px;
  --maxw:1440px;
  --content:1280px;
  --header-h:100px;

  --sec-pt:96px; --sec-pb:96px; --sec-title-mb:48px;
  --box-pad:24px;
  --field-h:48px;
  --icon:24px;

  /* 색 토큰 — 기본(딥 차콜) 세트 */
  --bg:#0D0F14;
  --bg-elev:#171C26;
  --text:#F3F5F8;
  --text-sub:#B4BCC9;
  --line:#737B8B;
  --line-soft:#737B8B;
  --icon-color:#C8A24C;
  --accent:#C8A24C;
  --accent-2:#DDB863;
  --on-accent:#14161B;

  --radius:2px;
}
/* 소프트(한 단계 밝은 차콜) 섹션 — 배경과 함께 텍스트·선·아이콘 전부 재정의 */
.sec--soft{
  --bg:#151A23;
  --text:#F3F5F8;
  --text-sub:#B8C0CD;
  --line:#737B8B;
  --line-soft:#737B8B;
  --icon-color:#C8A24C;
  background:#151A23;
}
.sec--base{ background:var(--bg); }
/* 포인트 컬러 섹션 */
.sec--accent{
  --bg:#C8A24C;
  --text:#14161B;
  --text-sub:#2E2718;
  --line:#6B551F;
  --line-soft:#6B551F;
  --icon-color:#14161B;
  --accent:#14161B;
  --on-accent:#F3F5F8;
  background:#C8A24C;
}

/* ---------- 2. 리셋 ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0; background:#0D0F14; color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Malgun Gothic","맑은 고딕",sans-serif;
  font-size:16px; line-height:1.7;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img,video,iframe,svg,table{max-width:100%;}
img{height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4,h5,h6,p,figure,dl,dd{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
table{border-collapse:collapse;width:100%;}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;}
[hidden]{display:none !important;}
[id]{scroll-margin-top:calc(var(--header-h) + var(--s-4));}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--accent);color:var(--on-accent);padding:var(--s-3) var(--s-5);}
.skip:focus{left:0;}

/* ---------- 3. 레이아웃 ---------- */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
.container--narrow{max-width:calc(var(--content) + var(--gutter)*2);}
.sec{padding-top:var(--sec-pt);padding-bottom:var(--sec-pb);}
.sec__head{margin-bottom:var(--sec-title-mb);}
.sec__title{font-size:34px;line-height:1.35;font-weight:800;letter-spacing:-.02em;color:var(--text);}
.sec__title .dot{display:inline-block;width:8px;height:8px;background:var(--accent);vertical-align:.5em;margin-right:var(--s-3);}
.sec__desc{margin-top:var(--s-3);font-size:16px;line-height:1.8;color:var(--text-sub);max-width:56ch;}
.sec__head--left{text-align:left;}
.sec__head--left .sec__desc{margin-left:0;}
.sec__head--center{text-align:center;}
.sec__head--center .sec__desc{margin-left:auto;margin-right:auto;}
.grid{display:grid;gap:var(--s-6);}
.grid>*{min-width:0;}
.flex{display:flex;}
.flex>*{min-width:0;}

/* ---------- 4. 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  height:44px;padding:0 20px;font-size:15px;font-weight:700;line-height:1;
  white-space:nowrap;border:1px solid transparent;border-radius:var(--radius);
  background:var(--accent);color:var(--on-accent);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn--sm{height:38px;padding:0 16px;font-size:14px;}
.btn--lg{height:52px;padding:0 28px;font-size:16px;}
.btn--ghost{background:transparent;border-color:var(--accent);color:var(--accent);}
.btn--line{background:transparent;border-color:var(--line);color:var(--text);}
.btn--solidDark{background:#F3F5F8;color:#14161B;}
.btn--block{width:100%;}
.btn[disabled],.btn:disabled{background:#3A4150;color:#C3C9D4;border-color:#737B8B;cursor:not-allowed;}
@media (hover:hover){
  .btn:hover{background:var(--accent-2);color:var(--on-accent);}
  .btn--ghost:hover{background:var(--accent);color:var(--on-accent);}
  .btn--line:hover{background:#262C39;border-color:var(--text-sub);color:var(--text);}
  .btn--solidDark:hover{background:#FFFFFF;color:#14161B;}
}
.btn-group{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center;}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:transparent;color:var(--text);}
@media (hover:hover){.btn-icon:hover{background:#262C39;}}

/* 칩 / 배지 */
.chip{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  height:38px;padding:0 16px;font-size:14px;font-weight:600;line-height:1;
  border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text-sub);
  white-space:nowrap;
}
.chip[aria-pressed="true"],.chip.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
@media (hover:hover){.chip:hover{border-color:var(--accent);color:var(--accent);}.chip.is-on:hover{color:var(--on-accent);}}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:28px;padding:0 12px;font-size:13px;font-weight:700;line-height:1;
  border:1px solid var(--accent);color:var(--accent);background:transparent;border-radius:var(--radius);
  white-space:nowrap;
}
.badge--fill{background:var(--accent);color:var(--on-accent);}
.badge--mute{border-color:var(--line);color:var(--text-sub);}

/* ---------- 5. 아이콘 ---------- */
.icon{width:var(--icon);height:var(--icon);flex:0 0 auto;display:block;stroke-width:1.75;}
.icon--16{--icon:16px;}
.icon--20{--icon:20px;}
.icon--24{--icon:24px;}
.icon--40{--icon:40px;}
.icon--48{--icon:48px;}
.ico-txt{display:inline-flex;align-items:center;gap:var(--s-2);}
.ico-txt--top{align-items:flex-start;}
.ico-txt--top .icon{margin-top:calc((1lh - var(--icon)) / 2);}
.icon-circle{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1px solid var(--line);color:var(--icon-color);}

/* ---------- 6. 헤더 ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:900;background:transparent;transition:background .25s ease,box-shadow .25s ease;}
.hdr.is-solid,.hdr--solid{background:#0D0F14;box-shadow:0 1px 12px rgba(0,0,0,.10);}
.hdr-inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:var(--header-h);width:100%;max-width:var(--maxw);margin:0 auto;
  padding-left:var(--gutter);padding-right:var(--gutter);
}
.logo{justify-self:start;display:inline-flex;align-items:center;flex:0 0 auto;}
.logo svg{display:block;height:44px;width:auto;flex:0 0 auto;}
.logo-full,.logo-compact{display:block;}
.logo-compact{display:none;}
.gnb{justify-self:center;}
.gnb>ul{display:flex;align-items:center;gap:48px;}
.gnb a{display:inline-flex;align-items:center;height:40px;font-size:17px;font-weight:700;color:#F3F5F8;letter-spacing:-.01em;}
.gnb a[aria-current="page"]{color:var(--accent-2);box-shadow:inset 0 -2px 0 var(--accent-2);}
@media (hover:hover){.gnb a:hover{color:var(--accent-2);}}
.hdr-right{justify-self:end;display:flex;align-items:center;gap:var(--s-3);}
.hdr-right .btn-icon{border-color:#737B8B;color:#F3F5F8;}
.hamb{display:none;}
.hdr-spacer{height:var(--header-h);}

/* 모바일 메뉴(드로어) */
.mmenu{position:fixed;inset:0;z-index:1000;}
.mmenu__dim{position:absolute;inset:0;background:rgba(0,0,0,.6);}
.mmenu__panel{
  position:absolute;top:0;bottom:0;left:0;width:min(320px,86%);
  background:#111620;border-right:1px solid #737B8B;
  display:flex;flex-direction:column;overflow-y:auto;
}
.mmenu__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);height:80px;padding:0 var(--s-5);border-bottom:1px solid #737B8B;flex:0 0 auto;}
.mmenu__top svg.logo-mark{height:32px;width:auto;display:block;}
.mmenu__body{padding:var(--s-4) 0 0;}
.mmenu__body a:not(.btn):not(.chip):not(.badge){display:block;padding:var(--s-4) var(--s-5);min-height:52px;font-size:17px;font-weight:700;color:#F3F5F8;border-bottom:1px solid #737B8B;}
.mmenu__body a:not(.btn):not(.chip):not(.badge)[aria-current="page"]{color:var(--accent-2);}
.mmenu__sub{margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid #737B8B;}
.mmenu__subtitle{padding:0 var(--s-5) var(--s-3);font-size:13px;font-weight:700;letter-spacing:.08em;color:#B4BCC9;}
.mmenu__sub a:not(.btn){min-height:44px;font-size:15px;font-weight:500;color:#D6DCE6;}
.mmenu__foot{margin-top:auto;padding:var(--s-5);border-top:1px solid #737B8B;display:flex;flex-direction:column;gap:var(--s-3);}
.mmenu__foot a.btn{width:100%;height:48px;padding:0 var(--s-5);font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);border-bottom:1px solid transparent;}
.mmenu__foot a.btn.btn--ghost{border:1px solid var(--accent);}
.mmenu__hours{font-size:13px;line-height:1.7;color:#B4BCC9;}
body.is-locked{overflow:hidden;}

/* ---------- 7. 히어로 ---------- */
.hero{position:relative;width:100%;aspect-ratio:16/10;overflow:clip;background:#0D0F14;}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;}
.hero__slide.is-on{opacity:1;}
.hero__slide img{width:100%;height:100%;object-fit:cover;}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,12,.80) 0%,rgba(6,8,12,.42) 24%,rgba(6,8,12,.74) 52%,rgba(6,8,12,.93) 100%);}
.hero__copy{position:absolute;left:0;right:0;bottom:120px;text-align:center;padding-left:var(--gutter);padding-right:var(--gutter);}
.hero__eyebrow{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 12px;font-size:13px;font-weight:700;letter-spacing:.06em;color:#14161B;background:var(--accent);}
.hero__title{margin-top:var(--s-5);font-size:48px;line-height:1.25;font-weight:800;letter-spacing:-.03em;color:#FFFFFF;}
.hero__sub{margin-top:var(--s-4);font-size:17px;line-height:1.7;color:#E2E7EE;}
.hero__btns{margin-top:var(--s-7);display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center;justify-content:center;}
.hero__btns a.btn--line{background:rgba(9,11,15,.82);border-color:#E2E7EE;color:#FFFFFF;}
@media (hover:hover){.hero__btns a.btn--line:hover{background:rgba(9,11,15,.94);border-color:var(--accent-2);color:var(--accent-2);}}
.hero__dots{position:absolute;left:0;right:0;bottom:56px;display:flex;align-items:center;justify-content:center;gap:var(--s-3);}
.hero__dots button:not(.hero__pause){width:12px;height:12px;border-radius:50%;background:transparent;border:1px solid #E2E7EE;padding:0;}
.hero__dots button[aria-current="true"]{background:var(--accent);border-color:var(--accent);}
.hero__pause{width:40px;height:40px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:1px solid #E2E7EE;border-radius:50%;color:#FFFFFF;}

/* ---------- 8. 서브 히어로 / breadcrumb ---------- */
.subhero{position:relative;width:100%;height:245px;overflow:clip;background:#0D0F14;}
.subhero img{width:100%;height:100%;object-fit:cover;}
.subhero__scrim{position:absolute;inset:0;background:rgba(8,10,14,.74);}
.subhero__inner{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding-left:var(--gutter);padding-right:var(--gutter);}
.subhero__title{font-size:40px;line-height:1.3;font-weight:800;letter-spacing:-.02em;color:#FFFFFF;}
.crumb{border-bottom:1px solid var(--line);background:var(--bg);}
.crumb__inner{display:flex;align-items:center;gap:var(--s-4);height:78px;flex-wrap:wrap;}
.crumb__home{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--radius);color:var(--text);}
.crumb__item{display:inline-flex;align-items:center;height:44px;padding:0 16px;border:1px solid var(--line);border-radius:var(--radius);font-size:14px;color:var(--text-sub);}
.crumb__item--cur{color:var(--text);font-weight:700;}
.crumb__tools{margin-left:auto;display:flex;align-items:center;gap:var(--s-2);}

/* ---------- 9. 카드 (비박스형 = 레퍼런스와 동일) ---------- */
.card{display:flex;flex-direction:column;height:100%;background:transparent;}
.card__thumb{position:relative;width:100%;aspect-ratio:4/5;overflow:clip;background:#1B212C;}
.card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
@media (hover:hover){.card:hover .card__thumb img{transform:scale(1.04);}}
.card__thumb--wide{aspect-ratio:16/9;}
.card__badges{position:absolute;left:12px;top:12px;display:flex;gap:var(--s-2);flex-wrap:wrap;z-index:2;}
.card__body{flex:1;display:flex;flex-direction:column;padding-top:var(--s-4);text-align:left;}
.card__meta{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--accent);}
.card__title{margin-top:var(--s-3);font-size:18px;line-height:1.5;font-weight:700;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2lh;}
.card__desc{margin-top:var(--s-3);font-size:15px;line-height:1.7;color:var(--text-sub);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.card__foot{margin-top:auto;padding-top:var(--s-5);display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;}
.card__date{font-size:14px;color:var(--text-sub);font-variant-numeric:tabular-nums;}

/* 박스형 카드 (섹션 배경과 카드 배경이 다른 경우에만) */
.card--boxed{background:var(--bg-elev);border:1px solid var(--line);}
.card--boxed .card__body{padding:var(--box-pad);}
.sec--soft .card--boxed{background:#1E2532;}

/* 패널(박스) */
.panel{background:var(--bg-elev);border:1px solid var(--line);padding:var(--box-pad);}
.sec--soft .panel{background:#1E2532;}
.panel--plain{background:transparent;}

/* ---------- 10. 목록 / 테이블 / 페이지네이션 ---------- */
.listrow{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-5) 0;border-bottom:1px solid var(--line);}
.listrow__thumb{flex:0 0 auto;width:180px;aspect-ratio:16/10;overflow:clip;background:#1B212C;}
.listrow__thumb img{width:100%;height:100%;object-fit:cover;}
.listrow__body{flex:1;min-width:0;}
.listrow__title{font-size:18px;font-weight:700;line-height:1.5;color:var(--text);}
.listrow__meta{margin-top:var(--s-3);font-size:14px;line-height:1.7;color:var(--text-sub);}
.listrow__side{flex:0 0 auto;display:flex;align-items:center;gap:var(--s-4);}

.tbl-wrap{width:100%;overflow-x:auto;}
.tbl{width:100%;font-size:15px;min-width:560px;}
.tbl th,.tbl td{padding:var(--s-4);border-bottom:1px solid var(--line);text-align:left;line-height:1.7;}
.tbl th{font-weight:700;color:var(--text);background:var(--bg-elev);white-space:nowrap;}
.tbl td{color:var(--text-sub);font-variant-numeric:tabular-nums;}
.tbl td strong{color:var(--text);}
.tbl-hint{margin-top:var(--s-3);font-size:13px;color:var(--text-sub);}
.sec--soft .tbl th{background:#1E2532;}

.dl-table{display:grid;grid-template-columns:120px 1fr;gap:var(--s-3) var(--s-5);font-size:15px;}
.dl-table dt{color:var(--text-sub);}
.dl-table dd{color:var(--text);}

.pager{display:flex;align-items:center;justify-content:center;gap:var(--s-2);margin-top:var(--s-7);flex-wrap:wrap;}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 var(--s-3);border:1px solid var(--line);border-radius:var(--radius);font-size:15px;color:var(--text-sub);font-variant-numeric:tabular-nums;}
.pager .is-cur{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700;}

/* ---------- 11. 탭 / 아코디언 ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:var(--s-2);}
.tabs .chip{min-width:96px;}
.acc{border-top:1px solid var(--line);}
.acc__item{border-bottom:1px solid var(--line);}
.acc__btn{display:flex;align-items:center;gap:var(--s-4);width:100%;padding:var(--s-5) 0;text-align:left;font-size:17px;font-weight:700;line-height:1.5;color:var(--text);}
.acc__btn .badge{flex:0 0 auto;}
.acc__q{flex:1;min-width:0;}
.acc__btn .icon{transition:transform .25s ease;color:var(--icon-color);}
.acc__btn[aria-expanded="true"] .icon{transform:rotate(45deg);}
.acc__panel{padding:0 0 var(--s-5);font-size:15px;line-height:1.8;color:var(--text-sub);max-width:80ch;}

/* ---------- 12. 폼 / 스텝 ---------- */
.form-row{margin-bottom:var(--s-4);}
.form-row label.lbl{display:block;margin-bottom:var(--s-2);font-size:14px;font-weight:700;color:var(--text);}
.form-row .req{color:var(--accent);}
.inp,.sel,.txa{
  width:100%;height:var(--field-h);padding:0 var(--s-4);
  background:#11151D;border:1px solid var(--line);border-radius:var(--radius);color:var(--text);
}
.sec--soft .inp,.sec--soft .sel,.sec--soft .txa{background:#10141C;}
.txa{height:auto;min-height:140px;padding:var(--s-3) var(--s-4);line-height:1.7;resize:vertical;}
.inp::placeholder,.txa::placeholder{color:#98A1B0;}
.err{display:block;margin-top:var(--s-1);font-size:12px;line-height:1.6;color:#FF9E9E;}
.form-row .check{display:flex;align-items:center;gap:var(--s-2);}
.form-row .check input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--accent);}
.form-row .check label{font-size:15px;color:var(--text-sub);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-5);}
.form-grid>*{min-width:0;}
.form-grid .full{grid-column:1 / -1;}

.steps{display:flex;gap:var(--s-2);margin-bottom:var(--s-7);}
.steps li{flex:1 1 0;display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;border-top:2px solid var(--line);color:var(--text-sub);font-size:14px;font-weight:700;min-width:0;}
.steps li .num{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);font-size:14px;}
.steps li.is-on{border-top-color:var(--accent);color:var(--accent);}
.steps li.is-on .num{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.steps li.is-done{border-top-color:var(--accent-2);color:var(--text);}
.steps .lbl-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* 달력 */
.cal{width:100%;}
.cal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4);}
.cal__month{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text);}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s-1);}
.cal__dow{display:grid;place-items:center;height:36px;font-size:13px;font-weight:700;color:var(--text-sub);}
.cal__grid button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:44px;border:1px solid var(--line);border-radius:var(--radius);font-size:15px;font-variant-numeric:tabular-nums;color:var(--text);background:transparent;}
.cal__grid button[disabled]{color:#98A1B0;border-color:#737B8B;background:#11151D;cursor:not-allowed;}
.cal__grid button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:800;}
.cal__grid .blank{min-height:44px;}
.cal__mark{width:6px;height:6px;border-radius:50%;background:var(--accent-2);}
.cal__grid button[aria-pressed="true"] .cal__mark{background:var(--on-accent);}
.slots{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3);}
.slots button{min-height:44px;border:1px solid var(--line);border-radius:var(--radius);font-size:15px;font-weight:600;color:var(--text);background:transparent;display:flex;align-items:center;justify-content:center;gap:var(--s-2);}
.slots button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.slots button[disabled]{color:#98A1B0;border-color:#737B8B;background:#11151D;cursor:not-allowed;}

/* 수량 스테퍼 */
.qty{display:inline-flex;align-items:center;gap:var(--s-3);}
.qty button{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius);color:var(--text);}
.qty output{min-width:40px;text-align:center;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;}

/* 진행률 */
.prog{margin-top:var(--s-3);}
.prog__bar{display:block;height:8px;background:#2A3140;border-radius:999px;overflow:clip;}
.prog__fill{display:block;height:100%;background:var(--accent);}
.prog__txt{margin-top:var(--s-2);font-size:13px;color:var(--text-sub);font-variant-numeric:tabular-nums;}

/* 완료 화면 */
.done{text-align:center;}
.done__icon{margin:0 auto var(--s-5);width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--on-accent);}
.done__title{font-size:30px;font-weight:800;line-height:1.4;color:var(--text);}
.done__desc{margin-top:var(--s-4);font-size:16px;line-height:1.8;color:var(--text-sub);}

/* 라이트박스 */
.lb{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;background:rgba(5,6,9,.92);padding:var(--s-5);}
.lb>div{width:100%;max-width:1100px;min-width:0;}
.lb__img{max-width:100%;max-height:70vh;width:auto;}
.lb__cap{margin-top:var(--s-4);text-align:center;font-size:15px;color:#E2E7EE;}
.lb__close{position:absolute;top:var(--s-5);right:var(--s-5);width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #98A1B0;border-radius:50%;color:#FFFFFF;}

/* 맨 위로 */
.totop{position:fixed;right:24px;bottom:24px;z-index:800;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:#171C26;color:#F3F5F8;opacity:0;visibility:hidden;transition:opacity .25s ease;}
.totop.is-on{opacity:1;visibility:visible;}

/* ---------- 13. 메인 전용 ---------- */
.quick__lead{text-align:center;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--text);}
.quicks{margin-top:var(--s-7);display:flex;flex-wrap:wrap;gap:var(--s-7);align-items:flex-start;justify-content:center;}
.quicks a{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);width:104px;text-align:center;font-size:15px;font-weight:600;color:var(--text);}
@media (hover:hover){.quicks a:hover .icon-circle{border-color:var(--accent);background:#1B212C;}}
.prog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6);}
.news{display:grid;grid-template-columns:260px 1fr;gap:var(--s-7);}
.news__list{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.news__item{padding:0 var(--s-5);border-left:1px solid var(--line);}
.news__item:first-child{padding-left:0;border-left:0;}
.news__date{font-size:14px;color:var(--text-sub);font-variant-numeric:tabular-nums;}
.news__title{margin-top:var(--s-3);font-size:16px;line-height:1.6;font-weight:600;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.fac-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6);}

/* ---------- 14. 푸터 ---------- */
.ftr{background:#08090D;border-top:1px solid #737B8B;padding-top:var(--s-8);padding-bottom:var(--s-9);}
.ftr__top{display:flex;flex-wrap:wrap;gap:var(--s-5);align-items:center;padding-bottom:var(--s-5);border-bottom:1px solid #737B8B;}
.ftr__top a:not(.btn){font-size:14px;font-weight:600;color:#E2E7EE;}
.ftr__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--s-7);padding-top:var(--s-7);}
.ftr h3{font-size:15px;font-weight:700;color:#F3F5F8;margin-bottom:var(--s-4);}
.ftr li+li{margin-top:var(--s-3);}
.ftr a:not(.btn),.ftr p,.ftr li{font-size:14px;line-height:1.7;color:#B4BCC9;}
.ftr .ftr__info li{display:flex;align-items:flex-start;gap:var(--s-2);}
.ftr .ftr__info .icon{margin-top:calc((1lh - var(--icon)) / 2);color:#B4BCC9;}
.ftr__bot{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid #737B8B;display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;justify-content:space-between;}
.ftr__copy{font-size:13px;color:#B4BCC9;}
.ftr__lic{font-size:12px;color:#B4BCC9;}
@media (hover:hover){.ftr a:not(.btn):hover{color:#F3F5F8;}}

/* ---------- 15. 반응형 ---------- */
@media (max-width:1200px){
  .prog-grid{grid-template-columns:repeat(3,1fr);}
  .fac-grid{grid-template-columns:repeat(2,1fr);}
  .gnb>ul{gap:36px;}
  .gnb a{font-size:16px;}
  .hero__title{font-size:40px;}
}
@media (max-width:1023px){
  :root{--gutter:28px;--header-h:80px;--sec-pt:72px;--sec-pb:72px;--sec-title-mb:32px;}
  .logo-full{display:none;}
  .logo-compact{display:block;}
  .logo svg{height:32px;}
  .gnb{display:none;}
  .hamb{display:inline-flex;}
  .hdr-inner{grid-template-columns:auto 1fr;}
  .hdr-right{grid-column:2;}
  .hero{aspect-ratio:3/2;min-height:520px;}
  .hero__title{font-size:34px;}
  .hero__copy{bottom:104px;}
  .sec__title{font-size:28px;}
  .subhero{height:200px;}
  .subhero__title{font-size:32px;}
  .news{grid-template-columns:1fr;gap:var(--s-6);}
  .news__list{grid-template-columns:repeat(3,1fr);}
  .listrow__thumb{width:150px;}
  .slots{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:767px){
  :root{--gutter:20px;--sec-pt:56px;--sec-pb:56px;--sec-title-mb:24px;--box-pad:16px;--field-h:44px;}
  .hdr-opt--cal{display:none;}
  .hero{aspect-ratio:4/5;min-height:600px;}
  .hero__title{font-size:28px;}
  .hero__sub{font-size:15px;}
  .hero__copy{bottom:96px;}
  .hero__btns{margin-top:var(--s-6);}
  .hero__btns .btn{width:100%;}
  .sec__title{font-size:24px;}
  .subhero{height:180px;}
  .subhero__title{font-size:26px;}
  .prog-grid{grid-template-columns:repeat(2,1fr);}
  .fac-grid{grid-template-columns:repeat(2,1fr);}
  .news__list{grid-template-columns:1fr;}
  .news__item{padding:var(--s-5) 0;border-left:0;border-top:1px solid var(--line);}
  .news__item:first-child{padding-top:0;border-top:0;}
  .ftr__cols{grid-template-columns:1fr 1fr;gap:var(--s-6);}
  .form-grid{grid-template-columns:1fr;}
  .listrow{flex-wrap:wrap;}
  .listrow__thumb{width:120px;}
  .listrow__side{width:100%;}
  .slots{grid-template-columns:repeat(2,1fr);}
  .steps .lbl-txt{display:none;}
  .steps li{justify-content:center;}
  .crumb__inner{height:auto;padding-top:var(--s-3);padding-bottom:var(--s-3);}
  .dl-table{grid-template-columns:96px 1fr;}
  .done__title{font-size:24px;}
}
@media (max-width:479px){
  :root{--gutter:16px;--header-h:72px;--sec-pt:40px;--sec-pb:40px;}
  .hdr-opt--search{display:none;}
  .logo svg{height:28px;}
  .hdr-right{gap:var(--s-2);}
  .hdr-right a.btn{padding-left:12px;padding-right:12px;}
  .hero{min-height:620px;}
  .hero__title{font-size:24px;}
  .hero__copy{bottom:88px;}
  .sec__title{font-size:22px;}
  .subhero{height:160px;}
  .subhero__title{font-size:22px;}
  .prog-grid{grid-template-columns:1fr;}
  .fac-grid{grid-template-columns:1fr;}
  .ftr__cols{grid-template-columns:1fr;}
  .quicks{gap:var(--s-5);}
  .quicks a{width:88px;font-size:14px;}
  .cal__grid{gap:2px;}
  .cal__grid button{min-height:40px;font-size:14px;}
}

/* ============================================================
   16. 페이지 컴포넌트
   ============================================================ */
.hdr-right .btn-icon{width:40px;height:40px;}
.panel__title{font-size:20px;line-height:1.5;font-weight:800;color:var(--text);margin-bottom:var(--s-4);}
.panel__note{font-size:15px;line-height:1.8;color:var(--text-sub);max-width:80ch;}
.sub-h{font-size:17px;font-weight:700;color:var(--text);margin-bottom:var(--s-4);}
.lead{font-size:20px;line-height:1.7;font-weight:700;color:var(--text);max-width:56ch;}
.body-p{margin-top:var(--s-4);font-size:16px;line-height:1.9;color:var(--text-sub);max-width:80ch;}
.bullets li{position:relative;padding-left:var(--s-4);font-size:15px;line-height:1.8;color:var(--text-sub);}
.bullets li+li{margin-top:var(--s-3);}
.bullets li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--accent);}
.bullets a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.empty{margin-top:var(--s-7);padding:var(--s-7) var(--s-5);text-align:center;font-size:16px;color:var(--text-sub);border:1px dashed var(--line);}
.ico-flip{transform:rotate(180deg);}
.btn-group--end{margin-top:var(--s-6);justify-content:flex-end;}
.sel--auto{width:auto;min-width:160px;}

/* 목록 상단 바 */
.list-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin:var(--s-7) 0 var(--s-5);padding-bottom:var(--s-4);border-bottom:1px solid var(--line);}
.list-bar__cnt{font-size:16px;color:var(--text-sub);font-variant-numeric:tabular-nums;}
.list-bar__cnt strong{color:var(--accent);}
.list-bar__tools{display:flex;align-items:center;gap:var(--s-3);}
.list-bar__tools .lbl{font-size:14px;font-weight:700;color:var(--text);margin:0;}

/* 공연 검색 + 캘린더 */
.prog-search{display:grid;grid-template-columns:1fr 400px;gap:var(--s-6);align-items:start;}

/* 선택 리스트 (공연/시설 고르기) */
.pick-list{display:grid;gap:var(--s-4);}
.pick{display:flex;align-items:stretch;gap:0;background:#10141C;border:1px solid var(--line);cursor:pointer;}
.pick:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);}
.pick input{position:absolute;opacity:0;width:1px;height:1px;}
.pick__thumb{flex:0 0 auto;width:112px;overflow:clip;background:#1B212C;}
.pick__thumb img{width:100%;height:100%;object-fit:cover;}
.pick__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--box-pad);}
.pick__meta{font-size:13px;font-weight:700;color:var(--accent);}
.pick__title{font-size:17px;font-weight:700;line-height:1.5;color:var(--text);}
.pick__date{font-size:14px;color:var(--text-sub);font-variant-numeric:tabular-nums;}
@media (hover:hover){.pick:hover{border-color:var(--accent);}}

/* 좌석 등급 */
.seat-list{display:grid;gap:var(--s-4);}
.seat-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;padding:var(--box-pad);background:#10141C;border:1px solid var(--line);}
.seat-list .seat__name{font-size:17px;font-weight:700;color:var(--text);}
.seat-list .seat__price{margin-top:var(--s-2);font-size:15px;color:var(--text-sub);font-variant-numeric:tabular-nums;}

/* 금액 요약 */
.sumbox{margin-top:var(--s-5);padding:var(--box-pad);background:#10141C;border:1px solid var(--line);}
.sumbox__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding:var(--s-3) 0;font-size:15px;color:var(--text-sub);}
.sumbox__row+.sumbox__row{border-top:1px solid var(--line);}
.sumbox__row strong{color:var(--text);font-variant-numeric:tabular-nums;font-size:16px;}
.sumbox__row--total strong{font-size:22px;color:var(--accent);font-weight:800;}

.bk-2col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);align-items:start;}

/* 대관 절차 */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-4);}
.flow li{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--box-pad);background:var(--bg-elev);border:1px solid var(--line);}
.sec--soft .flow li{background:#1E2532;}
.flow__num{font-size:14px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;}
.flow__txt{font-size:16px;font-weight:700;line-height:1.6;color:var(--text);}

/* 갤러리 */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6);}
.gal-item{margin:0;}
.gal-item>a{display:block;aspect-ratio:4/3;overflow:clip;background:#1B212C;}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
@media (hover:hover){.gal-item:hover img{transform:scale(1.05);}}
.gal-cap{margin-top:var(--s-3);font-size:15px;line-height:1.6;color:var(--text-sub);}

/* 공지 목록 */
.nt-list{border-top:1px solid var(--line);}
.nt-row{border-bottom:1px solid var(--line);}
.nt-row>a{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-5) 0;min-height:44px;}
.nt-row__cat{flex:0 0 auto;width:72px;}
.nt-row__title{flex:1;min-width:0;font-size:17px;line-height:1.6;font-weight:600;color:var(--text);}
.nt-row__date{flex:0 0 auto;font-size:14px;color:var(--text-sub);font-variant-numeric:tabular-nums;}
@media (hover:hover){.nt-row>a:hover .nt-row__title{color:var(--accent-2);}}

/* 게시물 */
.post{border-top:2px solid var(--accent);padding-top:var(--s-6);}
.post__title{margin-top:var(--s-4);font-size:30px;line-height:1.45;font-weight:800;color:var(--text);}
.post__date{margin-top:var(--s-3);font-size:14px;color:var(--text-sub);font-variant-numeric:tabular-nums;}
.post__body{margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--line);}
.post__body p{font-size:16px;line-height:1.9;color:var(--text-sub);max-width:80ch;}
.post__body p+p,.post__body ul{margin-top:var(--s-5);}
.post__body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-7);}
.post-nav__item{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--box-pad);background:var(--bg-elev);border:1px solid var(--line);}
.post-nav__lbl{font-size:13px;font-weight:700;color:var(--accent);}
.post-nav__t{font-size:16px;line-height:1.6;color:var(--text);}

/* 본문 문서 */
.prose{margin-top:var(--s-7);}
.prose__h{font-size:20px;line-height:1.5;font-weight:800;color:var(--text);margin-top:var(--s-7);}
.prose__h:first-child{margin-top:0;}
.prose__p{margin-top:var(--s-4);font-size:16px;line-height:1.9;color:var(--text-sub);max-width:80ch;}

/* 지도 자리 */
.map-ph{background:var(--bg-elev);border:1px solid var(--line);aspect-ratio:21/9;display:grid;place-items:center;overflow:clip;}
.map-ph__inner{padding:var(--box-pad);text-align:center;color:var(--icon-color);display:flex;flex-direction:column;align-items:center;gap:var(--s-3);}
.map-ph__t{font-size:22px;font-weight:800;color:var(--text);}
.map-ph__d{font-size:16px;color:var(--text-sub);}
.map-ph__note{font-size:14px;color:var(--text-sub);}
.loc-grid{grid-template-columns:repeat(3,1fr);}

/* 소개 */
.about-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s-8);align-items:center;}
.about-hero__img img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6);margin-top:var(--s-9);padding-top:var(--s-7);border-top:1px solid var(--line);}
.stat{display:flex;flex-direction:column;gap:var(--s-2);}
.stat__n{font-size:34px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.3;}
.stat__l{font-size:15px;color:var(--text-sub);}
.timeline{border-top:1px solid var(--line);}
.timeline li{display:flex;gap:var(--s-6);padding:var(--s-5) 0;border-bottom:1px solid var(--line);}
.timeline__y{flex:0 0 auto;width:88px;font-size:20px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.5;}
.timeline__t{flex:1;min-width:0;font-size:16px;line-height:1.8;color:var(--text-sub);}

/* 시설 */
.hall{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center;padding:var(--s-8) 0;border-bottom:1px solid var(--line);}
.hall:first-of-type{padding-top:0;}
.hall:nth-of-type(even) .hall__img{order:2;}
.hall__img img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.hall__title{font-size:28px;font-weight:800;line-height:1.4;color:var(--text);}
.hall__body .dl-table{margin-top:var(--s-5);}

/* 공연 상세 히어로 */
.pv-hero{position:relative;padding-top:calc(var(--header-h) + 48px);padding-bottom:var(--s-8);overflow:clip;background:#0B0D12;}
.pv-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;}
.pv-hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,14,.86) 0%,rgba(8,10,14,.78) 60%,rgba(8,10,14,.92) 100%);}
.pv-hero .container{position:relative;}
.pv-hero__inner{display:grid;grid-template-columns:1fr 320px;gap:var(--s-8);align-items:start;}
.pv-hero__title{font-size:40px;line-height:1.3;font-weight:800;letter-spacing:-.02em;color:#FFFFFF;}
.pv-hero__sub{margin-top:var(--s-3);font-size:17px;line-height:1.7;color:#D6DCE6;}
.pv-tags{margin-top:var(--s-5);font-size:14px;line-height:1.8;color:#B4BCC9;}
.pv-hero__poster img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.pv-hero__poster .btn{margin-top:var(--s-4);}
.pv-hero .dl-table dt{color:#B4BCC9;}
.pv-hero .dl-table dd{color:#F3F5F8;}
.pv-hero .dl-table a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px;}

/* 교육 목록 */
.edu-list>li:first-child{border-top:1px solid var(--line);}

@media (max-width:1200px){
  .gnb>ul{gap:24px;}
  .gnb a{font-size:16px;}
  .logo-full svg{height:36px;}
  .prog-search{grid-template-columns:1fr 340px;}
  .gal-grid{grid-template-columns:repeat(3,1fr);}
  .flow{grid-template-columns:repeat(3,1fr);}
  .pv-hero__title{font-size:34px;}
}
@media (max-width:1023px){
  .prog-search{grid-template-columns:1fr;}
  .loc-grid{grid-template-columns:1fr;}
  .about-hero{grid-template-columns:1fr;gap:var(--s-6);}
  .about-hero__img{order:-1;}
  .hall{grid-template-columns:1fr;gap:var(--s-6);}
  .hall:nth-of-type(even) .hall__img{order:0;}
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .pv-hero__inner{grid-template-columns:1fr;gap:var(--s-6);}
  .pv-hero__poster{max-width:320px;}
  .gal-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:767px){
  .bk-2col{grid-template-columns:1fr;}
  .flow{grid-template-columns:1fr;}
  .post-nav{grid-template-columns:1fr;}
  .map-ph{aspect-ratio:4/3;}
  .nt-row>a{flex-wrap:wrap;gap:var(--s-3);}
  .nt-row__title{flex:1 1 100%;order:2;}
  .nt-row__date{order:3;}
  .post__title{font-size:24px;}
  .pv-hero__title{font-size:26px;}
  .pick__thumb{width:88px;}
  .list-bar{margin-top:var(--s-6);}
}
@media (max-width:479px){
  .gal-grid{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:1fr;}
  .seat-list li{flex-direction:column;align-items:flex-start;}
  .btn-group--end{justify-content:stretch;}
  .btn-group--end .btn{flex:1 1 100%;}
}