/* 레이어 서울 아트페어 — 공통 스타일 (레퍼런스: Kiaf SEOUL 구조) */
: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;--hdr-h:80px;--sec-pad:96px;--title-gap:48px;
  --c-bg:#ffffff;--c-text:#111318;--c-sub:#555860;--c-muted:#8a8d94;--c-line:#e6e6e6;--c-grey:#f6f6f4;
  --c-primary:#111318;--c-primary-ink:#ffffff;--c-accent:#E4572E;--c-accent-soft:#fdeee8;
  --icon:24px;--radius:2px;--radius-lg:8px;
  --font:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.6;color:var(--c-text);background:var(--c-bg);word-break:keep-all;overflow-wrap:break-word;padding-top:var(--hdr-h)}
img,video,iframe,svg,table{max-width:100%}
img{height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.icon{width:var(--icon);height:var(--icon);flex:0 0 auto;display:block}
.icon-16{--icon:16px}.icon-20{--icon:20px}.icon-24{--icon:24px}.icon-40{--icon:40px}.icon-48{--icon:48px}
.with-icon{display:inline-flex;align-items:center;gap:var(--s-2)}
.with-icon.top{align-items:flex-start}
.with-icon.top .icon{margin-top:calc((1lh - var(--icon)) / 2)}

/* 컨테이너 */
.container{width:100%;max-width:1440px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* 헤더 — 명세: 로고 좌 · GNB 우측 · CTA 우측 끝 · 상단바 없음 · 80 sticky */
.hdr{position:fixed;top:0;left:0;width:100%;height:var(--hdr-h);background:var(--c-bg);z-index:100;border-bottom:1px solid transparent;transition:border-color .2s}
.hdr.is-scrolled{border-bottom-color:var(--c-line)}
.hdr-inner{display:flex;align-items:center;height:var(--hdr-h)}
.logo{display:block;flex:0 0 auto}
.logo img{height:40px;width:auto}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:var(--s-4);min-width:0}
.gnb{display:flex;align-items:center;gap:var(--s-6)}
.gnb a{display:inline-flex;align-items:center;height:40px;font-size:18px;font-weight:500;color:var(--c-text);white-space:nowrap;border-bottom:2px solid transparent}
.gnb a.is-active{border-bottom-color:var(--c-text)}
.hdr-cta{margin-left:var(--s-2)}
.hamburger{display:none;width:44px;height:44px;place-items:center;--icon:24px}
.hamburger .icon{--icon:24px}

/* 모바일 메뉴 — 명세: 풀스크린 화이트 오버레이, 좌측 정렬 세로 메뉴 */
.mnav{position:fixed;inset:0;background:var(--c-bg);z-index:200;display:none;flex-direction:column;overflow-y:auto}
.mnav.is-open{display:flex}
body.nav-open{overflow:hidden}
.mnav-top{display:flex;align-items:center;height:var(--hdr-h);flex:0 0 auto}
.mnav-close{margin-left:auto;width:44px;height:44px;display:grid;place-items:center}
.mnav-close .icon{--icon:24px}
.mnav-list{padding-top:var(--s-4);padding-bottom:var(--s-4)}
.mnav-list a{display:flex;align-items:center;min-height:52px;font-size:20px;font-weight:600;border-bottom:1px solid var(--c-line)}
.mnav-list a.is-active{color:var(--c-accent)}
.mnav-foot{margin-top:auto;padding-top:var(--s-5);padding-bottom:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);line-height:1;white-space:nowrap;border:1px solid transparent;border-radius:var(--radius);font-weight:500;cursor:pointer;text-align:center;transition:background-color .2s,color .2s,border-color .2s}
.btn-sm{height:38px;padding:0 var(--s-4);font-size:14px}
.btn-md{height:44px;padding:0 var(--s-5);font-size:15px}
.btn-lg{height:52px;padding:0 28px;font-size:16px}
.btn-primary{background:var(--c-primary);color:var(--c-primary-ink);border-color:var(--c-primary)}
.btn-accent{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}
.btn-outline{background:transparent;color:var(--c-text);border-color:var(--c-text)}
.btn-ghost{background:transparent;color:var(--c-text);border-color:var(--c-line)}
.btn-white{background:#fff;color:var(--c-text);border-color:#fff}
.btn .icon{--icon:20px}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn-group{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}
.btn-icon{width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--c-line);border-radius:var(--radius);background:#fff}
.btn-icon .icon{--icon:20px}
.btn-block{width:100%}
@media (hover:hover){
  .btn-primary:hover{background:#2a2d36;border-color:#2a2d36}
  .btn-accent:hover{background:#c9461f;border-color:#c9461f}
  .btn-outline:hover{background:var(--c-text);color:#fff}
  .btn-ghost:hover{border-color:var(--c-text)}
  .btn-white:hover{background:#eee;border-color:#eee}
  .gnb a:hover{border-bottom-color:var(--c-line)}
}

/* 섹션 공통 */
.section{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad)}
.section.grey{background:var(--c-grey)}
.section.no-top{padding-top:0}
.section.no-bottom{padding-bottom:0}
.sec-head{display:flex;align-items:flex-end;margin-bottom:var(--title-gap);gap:var(--s-4)}
.sec-head .more{margin-left:auto}
.sec-title{font-size:28px;font-weight:600;line-height:1.3;letter-spacing:-.01em;text-align:left}
.sec-title a{display:inline-flex;align-items:center;gap:var(--s-2)}
.sec-title .icon{--icon:20px}
.sec-desc{margin-top:var(--s-3);color:var(--c-sub);font-size:16px;text-align:left}
.eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent);margin-bottom:var(--s-2)}

/* 히어로 — 명세: 풀폭 이미지 슬라이더 504, 중앙 백색 카피 2줄, 버튼 없음 */
.hero{position:relative;height:560px;background:#111;overflow:clip;color:#fff}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.hero-slide.is-active{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-slide::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.32)}
.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gutter);z-index:2}
.hero-copy h1{font-size:clamp(32px,5vw,64px);font-weight:700;line-height:1.15;letter-spacing:-.02em}
.hero-copy .hero-sub{margin-top:var(--s-4);font-size:clamp(15px,1.3vw,20px);font-weight:400;letter-spacing:.04em}
.hero-dots{position:absolute;left:0;right:0;bottom:var(--s-5);display:flex;justify-content:center;gap:var(--s-2);z-index:3}
.hero-dots button{width:44px;height:44px;display:grid;place-items:center}
.hero-dots button span{display:block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5)}
.hero-dots button.is-active span{background:#fff}

/* 배너 (명세: 컨테이너 폭 이미지 배너 ~158px) */
.banner{display:flex;align-items:center;min-height:160px;padding:var(--s-6) var(--s-7);background:var(--c-accent);color:#fff;border-radius:var(--radius);position:relative;overflow:clip;gap:var(--s-5)}
.banner.dark{background:var(--c-primary)}
.banner.light{background:var(--c-accent-soft);color:var(--c-text)}
.banner-text{min-width:0;flex:1 1 auto;position:relative;z-index:1}
.banner-text .eyebrow{color:inherit;opacity:.8}
.banner-text h3{font-size:24px;font-weight:700;line-height:1.3}
.banner-text p{margin-top:var(--s-2);font-size:15px;opacity:.9}
.banner-cta{margin-left:auto;flex:0 0 auto;position:relative;z-index:1}
.banner-img{position:absolute;right:0;top:0;height:100%;width:38%;object-fit:cover;opacity:.35;z-index:0}

/* 카드 (명세: 이미지 3:2 → 날짜 14 → 제목 18 → 카테고리 13) */
.grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid>*{min-width:0}
.card{display:flex;flex-direction:column;height:100%;text-align:left;min-width:0}
.card-img{aspect-ratio:3/2;overflow:clip;background:var(--c-grey);position:relative}
.card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card-img.ratio-16-9{aspect-ratio:16/9}
.card-img.ratio-1-1{aspect-ratio:1/1}
.card-body{flex:1;padding-top:var(--s-4);display:flex;flex-direction:column}
.card-meta{font-size:14px;color:var(--c-sub);font-weight:400}
.card-title{margin-top:var(--s-1);font-size:18px;font-weight:500;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2lh}
.card-desc{margin-top:var(--s-2);font-size:14px;color:var(--c-sub);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-tag{margin-top:var(--s-2);font-size:13px;color:var(--c-sub)}
.card-foot{margin-top:auto;padding-top:var(--s-4);display:flex;align-items:center;gap:var(--s-3)}
.card-foot .price{font-weight:600}
.card-foot .btn{margin-left:auto}
.badge{display:inline-flex;align-items:center;height:22px;padding:0 var(--s-2);font-size:12px;font-weight:600;border-radius:var(--radius);background:var(--c-text);color:#fff;white-space:nowrap}
.badge.accent{background:var(--c-accent)}
.badge.soft{background:var(--c-accent-soft);color:var(--c-accent)}
.badge.line{background:transparent;border:1px solid var(--c-line);color:var(--c-sub)}
.card-img .badge{position:absolute;left:var(--s-3);top:var(--s-3)}
.play{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center;color:#fff}
.play .icon{--icon:24px}
@media (hover:hover){.card:hover .card-img img{transform:scale(1.04)} .card:hover .card-title{text-decoration:underline;text-underline-offset:3px}}

/* 아카이브 (명세: 타이틀 + 설명 max700 + 텍스트 링크 세로) */
.archive-text{max-width:720px;color:var(--c-sub)}
.link-list{margin-top:var(--s-6);display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start}
.link-list a{font-size:18px;text-decoration:underline;text-underline-offset:4px;color:var(--c-sub);display:inline-flex;align-items:center;gap:var(--s-2)}
.link-list a .icon{--icon:16px}
@media (hover:hover){.link-list a:hover{color:var(--c-text)}}

/* 푸터 (명세: 검정 · 링크 3컬럼 + 파트너 컬럼 · 하단 copyright) */
.ftr{background:var(--c-primary);color:#fff;padding-top:var(--s-7);padding-bottom:var(--s-7)}
.ftr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6)}
.ftr-grid>*{min-width:0}
.ftr-col h4{font-size:14px;font-weight:500;color:rgba(255,255,255,.6);margin-bottom:var(--s-3)}
.ftr-col ul{display:flex;flex-direction:column;gap:var(--s-2)}
.ftr-col a{font-size:18px;font-weight:400;display:inline-flex;align-items:center;min-height:32px}
.ftr-info{display:flex;flex-direction:column;gap:var(--s-2);font-size:14px;color:rgba(255,255,255,.75)}
.ftr-info li{display:inline-flex;align-items:flex-start;gap:var(--s-2)}
.ftr-info .icon{--icon:16px;margin-top:calc((1lh - var(--icon)) / 2);color:rgba(255,255,255,.6)}
.ftr-logo img{height:32px;width:auto}
.ftr-bottom{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.15);display:flex;align-items:center;gap:var(--s-4);font-size:13px;color:rgba(255,255,255,.6);flex-wrap:wrap}
.ftr-bottom .ftr-links{margin-left:auto;display:flex;gap:var(--s-4);flex-wrap:wrap}
.ftr-bottom .ftr-links a{display:inline-flex;align-items:center;min-height:24px}
.ftr-license{font-size:12px;color:rgba(255,255,255,.45);margin-top:var(--s-3);overflow-wrap:anywhere;width:100%}
@media (hover:hover){.ftr a:hover{text-decoration:underline;text-underline-offset:3px}}

/* 서브 페이지 공통 (명세: 서브 히어로 없음 → 서브 탭바 + 타이틀 28) */
.subbar{border-bottom:1px solid var(--c-line)}
.subbar-inner{display:flex;align-items:center;min-height:56px;gap:var(--s-5);overflow-x:auto;-webkit-overflow-scrolling:touch}
.subbar-inner::-webkit-scrollbar{display:none}
.crumb{display:inline-flex;align-items:center;gap:var(--s-2);font-size:14px;color:var(--c-muted);white-space:nowrap;flex:0 0 auto}
.crumb .icon{--icon:16px}
.crumb a{color:var(--c-muted)}
.crumb .cur{color:var(--c-text);font-weight:500}
.subtabs{display:flex;gap:var(--s-5);margin-left:auto;flex:0 0 auto}
.subtabs a{display:inline-flex;align-items:center;height:56px;font-size:15px;color:var(--c-muted);white-space:nowrap;border-bottom:2px solid transparent}
.subtabs a.is-active{color:var(--c-text);font-weight:500;border-bottom-color:var(--c-text)}
.page-head{padding-top:var(--s-8);padding-bottom:var(--title-gap)}
.page-title{font-size:36px;font-weight:700;line-height:1.25;letter-spacing:-.02em;text-align:left}
.page-lead{margin-top:var(--s-3);font-size:16px;color:var(--c-sub);max-width:720px}
.two-col{display:grid;grid-template-columns:2fr 1fr;gap:var(--s-7)}
.two-col>*{min-width:0}
.info-list{display:flex;flex-direction:column;gap:var(--s-3);font-size:15px}
.info-list li{display:flex;gap:var(--s-3)}
.info-list li b{flex:0 0 72px;font-weight:600}
.prose p{margin-bottom:var(--s-4);color:var(--c-sub)}
.prose h3{font-size:20px;font-weight:600;margin:var(--s-6) 0 var(--s-3)}
.prose h3:first-child{margin-top:0}
.prose ul{padding-left:var(--s-4);list-style:disc;color:var(--c-sub);margin-bottom:var(--s-4)}
.prose li{margin-bottom:var(--s-1)}
.sub-title{font-size:20px;font-weight:600;line-height:1.3;margin-bottom:var(--s-4);text-align:left}
.block{margin-bottom:var(--s-8)}
.block:last-child{margin-bottom:0}

/* 탭·필터 */
.tabs{display:flex;gap:var(--s-2);flex-wrap:wrap}
.tab{display:inline-flex;align-items:center;height:38px;padding:0 var(--s-4);font-size:14px;font-weight:500;border:1px solid var(--c-line);border-radius:999px;color:var(--c-sub);white-space:nowrap;background:#fff}
.tab.is-active{background:var(--c-text);color:#fff;border-color:var(--c-text)}
@media (hover:hover){.tab:hover{border-color:var(--c-text);color:var(--c-text)} .tab.is-active:hover{color:#fff}}
.toolbar{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-6);flex-wrap:wrap}
.toolbar .right{margin-left:auto;display:flex;align-items:center;gap:var(--s-3)}
.search{display:flex;gap:var(--s-2);width:100%;max-width:100%}
.search input{flex:1 1 auto;min-width:0}
.field-inline{display:flex;align-items:center;gap:var(--s-2);font-size:14px;color:var(--c-sub)}
.count{font-size:14px;color:var(--c-sub)}
.count b{color:var(--c-text)}
.empty{padding:var(--s-8) 0;text-align:center;color:var(--c-muted);border:1px dashed var(--c-line)}

/* 인덱스 목록 (Kiaf Exhibitors) */
.index-sec{padding:var(--s-6) 0;border-top:1px solid var(--c-line)}
.index-letter{font-size:20px;font-weight:700;margin-bottom:var(--s-4)}
.index-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4) var(--s-5)}
.index-grid>*{min-width:0}
.index-item{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-2) 0}
.index-item .name{font-size:16px;font-weight:500}
.index-item .city{font-size:13px;color:var(--c-muted)}
@media (hover:hover){.index-item:hover .name{text-decoration:underline;text-underline-offset:3px}}

/* 세션 리스트 (Kiaf Program) */
.session{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:var(--s-5);align-items:center;padding:var(--s-6) 0;border-bottom:1px solid var(--c-line)}
.session>*{min-width:0}
.session:first-child{border-top:1px solid var(--c-line)}
.session .when{font-size:14px;color:var(--c-sub);display:flex;flex-direction:column;gap:var(--s-1)}
.session .what h3{font-size:18px;font-weight:500;line-height:1.5}
.session .what p{margin-top:var(--s-1);font-size:14px;color:var(--c-sub)}
.session .act{display:flex;align-items:center;gap:var(--s-2)}

/* 표 */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}
.table-hint{display:none;font-size:12px;color:var(--c-muted);margin-bottom:var(--s-2)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.tbl th,.tbl td{border:1px solid var(--c-line);padding:var(--s-3) var(--s-4);text-align:center;vertical-align:middle}
.tbl th{background:var(--c-grey);font-weight:600;font-size:13px}
.tbl td.left,.tbl th.left{text-align:left}
.tbl .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c-accent)}
.tbl-compact{min-width:0}

/* 정보 카드 (리빙디자인페어 관람 카드) */
.info-card{border:1px solid var(--c-text);padding:var(--s-6);background:#fff;display:flex;flex-direction:column;height:100%}
.info-card h3{font-size:20px;font-weight:600;padding-bottom:var(--s-3);border-bottom:1px solid var(--c-text);margin-bottom:var(--s-4)}
.kv{display:flex;flex-direction:column;gap:var(--s-3)}
.kv li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-4);font-size:15px}
.kv li b{font-weight:600}
.info-card .card-foot{margin-top:auto;padding-top:var(--s-5)}
.steps-inline{display:flex;flex-direction:column;gap:var(--s-2);font-size:15px}
.steps-inline li{display:flex;align-items:flex-start;gap:var(--s-2)}
.steps-inline .icon{--icon:16px;margin-top:calc((1lh - var(--icon)) / 2);color:var(--c-accent)}

/* 절차 카드 (COPHEX 등록절차) */
.proc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.proc>*{min-width:0}
.proc-card{background:#fff;border:1px solid var(--c-line);display:flex;flex-direction:column;height:100%}
.proc-card .step{background:var(--c-text);color:#fff;font-size:13px;font-weight:600;letter-spacing:.08em;padding:var(--s-2) var(--s-4)}
.proc-card .step.accent{background:var(--c-accent)}
.proc-card .body{padding:var(--s-5);flex:1}
.proc-card h4{font-size:18px;font-weight:600}
.proc-card p{margin-top:var(--s-2);font-size:14px;color:var(--c-sub)}

/* 카운터 밴드 (리빙디자인페어 years/visitors/brands) */
.counter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.counter>*{min-width:0}
.counter li{border:1px solid var(--c-text);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-2);text-align:left}
.counter b{font-size:40px;font-weight:700;line-height:1;letter-spacing:-.02em}
.counter span{font-size:14px;color:var(--c-sub)}

/* CTA 밴드 (COPHEX 온라인사전등록 밴드) */
.cta-band{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-6) var(--s-7);background:var(--c-grey);flex-wrap:wrap}
.cta-band h3{font-size:22px;font-weight:600}
.cta-band .btn-group{margin-left:auto}

/* 폼 */
.form{display:flex;flex-direction:column;gap:var(--s-4)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.form-row>*{min-width:0}
.field{display:flex;flex-direction:column;min-width:0}
.field label{font-size:14px;font-weight:500;margin-bottom:var(--s-2);display:flex;align-items:center;gap:var(--s-1)}
.field label .req{color:var(--c-accent)}
.field input,.field select,.field textarea{width:100%;height:48px;padding:0 var(--s-4);border:1px solid var(--c-line);border-radius:var(--radius);background:#fff;outline:none}
.field textarea{height:auto;min-height:144px;padding:var(--s-3) var(--s-4);resize:vertical;line-height:1.6}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111318' stroke-width='1.75'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:20px 20px;padding-right:44px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--c-text)}
.field.is-error input,.field.is-error select,.field.is-error textarea{border-color:var(--c-accent)}
.field .err{display:none;font-size:12px;color:var(--c-accent);margin-top:var(--s-1)}
.field.is-error .err{display:block}
.field .help{font-size:12px;color:var(--c-muted);margin-top:var(--s-1)}
.check{display:inline-flex;align-items:center;gap:var(--s-2);font-size:15px;cursor:pointer;min-height:24px}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:20px;height:20px;border:1px solid var(--c-line);border-radius:var(--radius);display:grid;place-items:center;flex:0 0 auto;background:#fff}
.check .box .icon{--icon:16px;display:none;color:#fff}
.check input:checked+.box{background:var(--c-text);border-color:var(--c-text)}
.check input:checked+.box .icon{display:block}
.check.radio .box{border-radius:50%}
.check.radio .box .icon{display:none}
.check.radio input:checked+.box{background:#fff}
.check.radio input:checked+.box::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--c-text)}
.check-group{display:flex;flex-direction:column;gap:var(--s-3)}
.check-group.row{flex-direction:row;flex-wrap:wrap;gap:var(--s-4)}
.agree-box{border:1px solid var(--c-line);border-radius:var(--radius-lg);padding:var(--s-4);height:160px;overflow-y:auto;font-size:13px;color:var(--c-sub);line-height:1.7}
.agree-item{padding:var(--s-5) 0;border-bottom:1px solid var(--c-line)}
.agree-item:last-of-type{border-bottom:0}
.agree-head{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.agree-head h4{font-size:17px;font-weight:600;display:inline-flex;align-items:center;gap:var(--s-2)}
.agree-head .tag{font-size:13px;color:var(--c-accent);font-weight:600}
.agree-head .tag.opt{color:var(--c-muted)}
.agree-head .check{margin-left:auto}
.agree-desc{margin:var(--s-3) 0;font-size:14px;color:var(--c-sub);padding-left:var(--s-4);list-style:disc}
.form-actions{display:flex;gap:var(--s-3);justify-content:center;margin-top:var(--s-6);flex-wrap:wrap}
.form-msg{display:none;padding:var(--s-6);border:1px solid var(--c-text);text-align:center}
.form-msg.is-show{display:block}
.all-agree{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);background:var(--c-grey);font-weight:600}

/* 스텝 인디케이터 (COPHEX) */
.stepper{display:flex;align-items:flex-start;margin-bottom:var(--s-7);counter-reset:step}
.stepper li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--s-2);position:relative;text-align:center}
.stepper li::before{content:"";position:absolute;top:16px;left:50%;width:100%;height:1px;background:var(--c-line);z-index:0}
.stepper li:last-child::before{display:none}
.stepper .num{width:32px;height:32px;border-radius:50%;border:1px solid var(--c-line);background:#fff;display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--c-muted);position:relative;z-index:1}
.stepper .lbl{font-size:13px;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.stepper li.is-active .num{background:var(--c-text);color:#fff;border-color:var(--c-text)}
.stepper li.is-active .lbl{color:var(--c-text);font-weight:600}
.stepper li.is-done .num{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}
.stepper li.is-done::before{background:var(--c-accent)}
.step-panel{display:none}
.step-panel.is-active{display:block}
.step-title{font-size:20px;font-weight:600;padding-bottom:var(--s-3);border-bottom:1px solid var(--c-text);margin-bottom:var(--s-5)}
.narrow{max-width:800px;margin:0 auto}

/* 달력 + 시간 슬롯 */
.cal-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-7)}
.cal-wrap>*{min-width:0}
.cal-head{display:flex;align-items:center;margin-bottom:var(--s-4)}
.cal-head h4{font-size:18px;font-weight:600}
.cal-nav{margin-left:auto;display:flex;gap:var(--s-2)}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s-1)}
.cal-grid>*{min-width:0}
.cal-dow{font-size:12px;color:var(--c-muted);text-align:center;padding:var(--s-2) 0}
.cal-day{height:44px;display:flex;align-items:center;justify-content:center;font-size:14px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer}
.cal-day.is-empty{cursor:default}
.cal-day.is-disabled{color:#c4c6cc;cursor:not-allowed;text-decoration:line-through}
.cal-day.is-fair{border-color:var(--c-line);font-weight:500}
.cal-day.is-selected{background:var(--c-text);color:#fff;border-color:var(--c-text)}
.cal-legend{display:flex;gap:var(--s-4);margin-top:var(--s-3);font-size:12px;color:var(--c-muted);flex-wrap:wrap}
.cal-legend span{display:inline-flex;align-items:center;gap:var(--s-1)}
.cal-legend i{width:12px;height:12px;border:1px solid var(--c-line);display:inline-block}
.cal-legend i.sel{background:var(--c-text);border-color:var(--c-text)}
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
.slots>*{min-width:0}
.slot{height:44px;border:1px solid var(--c-line);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;gap:var(--s-2);font-size:14px;background:#fff;cursor:pointer}
.slot small{font-size:12px;color:var(--c-muted)}
.slot.is-full{color:#c4c6cc;background:var(--c-grey);cursor:not-allowed;text-decoration:line-through}
.slot.is-selected{background:var(--c-text);color:#fff;border-color:var(--c-text)}
.slot.is-selected small{color:rgba(255,255,255,.7)}
.slot-hint{font-size:14px;color:var(--c-muted);padding:var(--s-4) 0}
@media (hover:hover){.cal-day.is-fair:hover{border-color:var(--c-text)} .slot:not(.is-full):hover{border-color:var(--c-text)}}

/* 요약/완료 */
.summary{border:1px solid var(--c-line);padding:var(--s-5)}
.summary li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s-4);padding:var(--s-2) 0;font-size:15px;border-bottom:1px solid var(--c-line)}
.summary li:last-child{border-bottom:0}
.summary li b{font-weight:500;color:var(--c-sub)}
.summary li .total{font-size:20px;font-weight:700}
.done{text-align:center;padding:var(--s-7) 0}
.done .icon-wrap{width:64px;height:64px;border-radius:50%;background:var(--c-accent);color:#fff;display:grid;place-items:center;margin:0 auto var(--s-5)}
.done .icon-wrap .icon{--icon:24px}
.done h3{font-size:28px;font-weight:700}
.done p{margin-top:var(--s-3);color:var(--c-sub)}
.done .summary{text-align:left;margin-top:var(--s-6)}
.qr{width:160px;height:160px;margin:var(--s-6) auto 0;border:1px solid var(--c-text);display:grid;place-items:center;font-size:12px;color:var(--c-muted);background:repeating-linear-gradient(90deg,#111 0 8px,transparent 8px 16px) 0 0/100% 16px no-repeat,repeating-linear-gradient(0deg,#111 0 8px,transparent 8px 16px) 0 24px/16px 100% no-repeat,#fff}
.qr span{background:#fff;padding:var(--s-1) var(--s-2)}

/* 아코디언 (FAQ) */
.acc{border-top:1px solid var(--c-text)}
.acc-item{border-bottom:1px solid var(--c-line)}
.acc-btn{width:100%;display:flex;align-items:center;gap:var(--s-4);padding:var(--s-5) 0;text-align:left;font-size:17px;font-weight:500}
.acc-btn .q{flex:0 0 auto;color:var(--c-accent);font-weight:700;width:24px}
.acc-btn .icon{--icon:20px;margin-left:auto;transition:transform .2s}
.acc-item.is-open .acc-btn .icon{transform:rotate(180deg)}
.acc-body{display:none;padding:0 0 var(--s-5) 40px;color:var(--c-sub);font-size:15px}
.acc-item.is-open .acc-body{display:block}

/* 페이지네이션 */
.pager{display:flex;justify-content:center;gap:var(--s-2);margin-top:var(--s-7)}
.pager button{width:44px;height:44px;border:1px solid var(--c-line);border-radius:var(--radius);display:grid;place-items:center;font-size:14px;background:#fff}
.pager button.is-active{background:var(--c-text);color:#fff;border-color:var(--c-text)}
.pager button[disabled]{opacity:.35;cursor:not-allowed}
.pager button .icon{--icon:20px}

/* 갤러리 + 라이트박스 */
.masonry{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.masonry>*{min-width:0}
.gitem{display:flex;flex-direction:column;height:100%;cursor:zoom-in;text-align:left}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:300;display:none;flex-direction:column;align-items:center;justify-content:center;padding:var(--s-4)}
.lightbox.is-open{display:flex}
body.lb-open{overflow:hidden}
.lightbox img{max-width:100%;max-height:calc(100% - 96px);object-fit:contain;width:auto;height:auto}
.lightbox .cap{color:#fff;margin-top:var(--s-4);font-size:14px;text-align:center}
.lb-close{position:absolute;top:var(--s-4);right:var(--s-4);width:44px;height:44px;color:#fff;display:grid;place-items:center}
.lb-close .icon{--icon:24px}
.lb-nav{position:absolute;top:50%;margin-top:-22px;width:44px;height:44px;color:#fff;display:grid;place-items:center;background:rgba(255,255,255,.12);border-radius:50%}
.lb-nav .icon{--icon:20px}
.lb-prev{left:var(--s-4)}.lb-next{right:var(--s-4)}

/* 공지 목록 */
.notice-list{border-top:1px solid var(--c-text)}
.notice-row{display:grid;grid-template-columns:96px minmax(0,1fr) 120px;gap:var(--s-5);align-items:center;padding:var(--s-5) 0;border-bottom:1px solid var(--c-line)}
.notice-row>*{min-width:0}
.notice-row .cat{font-size:13px;font-weight:600;color:var(--c-accent)}
.notice-row .ttl{font-size:17px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice-row .date{font-size:14px;color:var(--c-muted);text-align:right}
@media (hover:hover){.notice-row:hover .ttl{text-decoration:underline;text-underline-offset:3px}}
.article-head{padding-bottom:var(--s-5);border-bottom:1px solid var(--c-text);margin-bottom:var(--s-6)}
.article-head .meta{display:flex;gap:var(--s-4);font-size:14px;color:var(--c-muted);margin-top:var(--s-3);flex-wrap:wrap}
.article-body{max-width:800px}
.article-body img{margin:var(--s-5) 0}
.article-nav{margin-top:var(--s-8);border-top:1px solid var(--c-text)}
.article-nav a{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid var(--c-line);font-size:15px;align-items:center}
.article-nav a span:first-child{color:var(--c-muted);display:inline-flex;align-items:center;gap:var(--s-1)}
.article-nav a .icon{--icon:16px}
.article-nav a span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 지도 자리 */
.map-box{aspect-ratio:21/9;background:var(--c-grey);border:1px solid var(--c-line);display:grid;place-items:center;text-align:center;color:var(--c-muted);font-size:14px;padding:var(--s-5)}
.map-box .icon{--icon:40px;margin:0 auto var(--s-3);color:var(--c-accent)}

/* 타임라인 */
.timeline{border-left:1px solid var(--c-line);padding-left:var(--s-5);display:flex;flex-direction:column;gap:var(--s-5)}
.timeline li{position:relative}
.timeline li::before{content:"";position:absolute;left:calc(-1 * var(--s-5) - 5px);top:8px;width:9px;height:9px;border-radius:50%;background:var(--c-accent)}
.timeline b{display:block;font-size:14px;color:var(--c-accent);font-weight:600}
.timeline p{font-size:15px;color:var(--c-sub);margin-top:var(--s-1)}

/* 팀 카드 / 아이콘 피처 */
.feature{display:flex;flex-direction:column;gap:var(--s-3);text-align:left;height:100%}
.feature .ico{width:56px;height:56px;border-radius:50%;background:var(--c-accent-soft);color:var(--c-accent);display:grid;place-items:center}
.feature .ico .icon{--icon:24px}
.feature h4{font-size:18px;font-weight:600}
.feature p{font-size:14px;color:var(--c-sub)}

/* 요금표 카드 */
.plan{border:1px solid var(--c-line);padding:var(--s-6);display:flex;flex-direction:column;height:100%;text-align:left}
.plan.is-hot{border-color:var(--c-text)}
.plan h4{font-size:18px;font-weight:600}
.plan .price{margin-top:var(--s-3);font-size:28px;font-weight:700;letter-spacing:-.02em}
.plan .price small{font-size:14px;font-weight:400;color:var(--c-sub)}
.plan ul{margin-top:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);font-size:14px;color:var(--c-sub);flex:1}
.plan ul li{display:flex;align-items:flex-start;gap:var(--s-2)}
.plan ul .icon{--icon:16px;margin-top:calc((1lh - var(--icon)) / 2);color:var(--c-accent)}
.plan .card-foot{padding-top:var(--s-5)}

/* 스크롤 탑 (Kiaf 우하단) */
.totop{position:fixed;right:var(--s-5);bottom:var(--s-5);width:44px;height:44px;border-radius:50%;background:var(--c-text);color:#fff;display:none;place-items:center;z-index:90}
.totop.is-show{display:grid}
.totop .icon{--icon:20px}

/* 스크롤 등장 (JS가 .js 클래스 부여 후 hidden) */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} .hero-slide{transition:none}}

/* ===== 반응형 ===== */
@media (max-width:1200px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .index-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gnb{gap:var(--s-4)}
  .gnb a{font-size:15px}
  .logo img{height:32px}
}
@media (max-width:1023px){
  :root{--gutter:28px;--hdr-h:64px;--sec-pad:72px;--title-gap:32px}
  .gnb,.hdr-cta{display:none}
  .hamburger{display:grid}
  .logo img{height:32px}
  .hero{height:480px}
  .two-col{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cal-wrap{grid-template-columns:1fr}
  .masonry{grid-template-columns:repeat(2,minmax(0,1fr))}
  .session{grid-template-columns:160px minmax(0,1fr)}
  .session .act{grid-column:2}
  .banner-img{display:none}
}
@media (max-width:767px){
  :root{--gutter:20px;--sec-pad:56px;--title-gap:24px}
  .grid,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{height:420px}
  .banner{flex-direction:column;align-items:flex-start;padding:var(--s-5)}
  .banner-cta{margin-left:0}
  .proc,.counter{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .field input,.field select{height:44px}
  .session{grid-template-columns:1fr;gap:var(--s-3)}
  .session .act{grid-column:1}
  .notice-row{grid-template-columns:72px minmax(0,1fr)}
  .notice-row .date{grid-column:2;text-align:left}
  .table-hint{display:block}
  .table-wrap::after{content:"";position:absolute;right:0;top:0;bottom:0;width:24px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9));pointer-events:none}
  .page-title{font-size:28px}
  .sec-title{font-size:24px}
  .cta-band{padding:var(--s-5)}
  .cta-band .btn-group{margin-left:0;width:100%}
  .cta-band .btn{flex:1 1 auto}
  .stepper .num{width:28px;height:28px}
  .stepper li::before{top:14px}
  .form-actions .btn{flex:1 1 auto}
  .subtabs{margin-left:0}
  .kv li{grid-template-columns:80px minmax(0,1fr)}
  .summary li{grid-template-columns:96px minmax(0,1fr)}
  .agree-head .check{margin-left:0;width:100%}
  .acc-body{padding-left:40px}
  .two-col .info-list{margin-top:0}
  .ftr-bottom .ftr-links{margin-left:0;width:100%}
  .hero-copy h1{font-size:clamp(28px,8vw,40px)}
}
@media (max-width:479px){
  :root{--gutter:16px;--hdr-h:56px;--sec-pad:40px;--title-gap:24px}
  .grid,.grid-3,.grid-2,.index-grid,.masonry{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .logo img{height:28px}
  .hero{height:360px}
  .hero-copy h1{font-size:28px}
  .hero-copy .hero-sub{font-size:14px}
  .page-title{font-size:24px}
  .sec-title{font-size:22px}
  .banner-text h3{font-size:20px}
  .btn-group .btn,.banner-cta .btn{width:100%}
  .stepper .lbl{display:none}
  .counter b{font-size:32px}
  .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .done h3{font-size:22px}
  .acc-btn{font-size:15px}
  .info-card{padding:var(--s-5)}
  .kv li{grid-template-columns:1fr;gap:var(--s-1)}
  .summary li{grid-template-columns:1fr;gap:var(--s-1)}
  .table-hint{display:block}
}
@media (min-width:480px) and (max-width:767px){.slots{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px){.slots{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1024px){.slots{grid-template-columns:repeat(3,minmax(0,1fr))}}