/* ═══════════════════════════════════════════════════════════
   ckd101 — '만성콩팥병 바로 알기' 환자교실
   색·모양은 캠페인 포스터에서 그대로 가져온다.
     · 민트 #91E2DA 바탕 · 퍼플 #453D86 · 코랄 #E0505A
     · 퍼플 네모 라벨("투석 첫걸음!") → .sec-label
     · 회색 그림자가 오른쪽 아래로 밀린 버튼("사전등록 신청하기") → .btn-primary
   둥근 알약 모양·흐린 그림자·그라데이션은 쓰지 않는다 — 인쇄물처럼 평평하게.
   환자·보호자(중장년) 대상이라 글자를 크게, 누르는 곳을 넉넉하게 잡는다.
   ═══════════════════════════════════════════════════════════ */

/* 글꼴은 영문·숫자 + 완성형 한글 2,350자 + 사이트 문구만 남긴 서브셋 (한 벌 780KB → 180KB).
   목록에 없는 드문 글자(예: 이름의 희귀 한자음)는 시스템 글꼴로 대신 표시된다. */
@font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: url('../fonts/Pretendard-Regular.subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 600; font-display: swap; src: url('../fonts/Pretendard-SemiBold.subset.woff2') format('woff2'); }
@font-face { font-family: 'Pretendard'; font-weight: 700 900; font-display: swap; src: url('../fonts/Pretendard-Bold.subset.woff2') format('woff2'); }

:root {
    --purple:      #453D86;
    --purple-d:    #352E6E;
    --purple-soft: #EFEEF7;
    --mint:        #91E2DA;
    --mint-d:      #63CFC4;
    --mint-soft:   #EAF8F6;
    --teal-text:   #187268;     /* 흰 바탕 위 민트 계열 글자 (대비 확보) */
    --coral:       #E0505A;
    --coral-soft:  #FCEDEE;
    --ink:         #1C1E3A;
    --text:        #33364D;
    --sub:         #62667D;
    --line:        #DEE1E9;
    --line-d:      #C9CDD8;
    --bg:          #F4F6F8;
    --shade:       #D6D9E2;     /* 포스터 버튼의 회색 그림자 */

    --r:      8px;
    --r-s:    6px;
    --wrap:   1200px;
    --gnb-h:  84px;
}

/* 글자 크기: 기본 17px, [글자 크게] 를 누르면 19.5px — 모든 크기를 rem 으로 잡아 함께 커진다 */
html { font-size: 17px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.font-lg { font-size: 19.5px; }

*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; background: #fff; color: var(--text);
    font-family: 'Pretendard', -apple-system, 'Malgun Gothic', sans-serif;
    font-size: 1rem; line-height: 1.7; letter-spacing: -.01em; word-break: keep-all; overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--gnb-h) + 16px); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 940px; }
.center { text-align: center; }
.pc { display: inline; }
.mo { display: none; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--purple); color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { left: 10px; top: 10px; }

/* ── 버튼 ─────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; padding: 0 24px; border-radius: var(--r-s); border: 2px solid transparent;
    font-weight: 700; font-size: 1rem; line-height: 1.25; text-align: center;
    transition: background .15s, color .15s, border-color .15s, transform .12s, box-shadow .12s;
}
.btn-sm { min-height: 42px; padding: 0 16px; font-size: .92rem; }
.btn-lg { min-height: 58px; padding: 0 28px; font-size: 1.06rem; }
.btn-xl { min-height: 66px; padding: 0 48px; font-size: 1.2rem; }
.btn-block { width: 100%; }
/* 포스터 버튼처럼 — 그림자가 오른쪽 아래로 밀려 있고, 누르면 그만큼 내려앉는다 */
.btn-primary { background: var(--purple); color: #fff; box-shadow: 4px 4px 0 var(--shade); }
.btn-primary:hover { background: var(--purple-d); }
.btn-primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--shade); }
.btn-sm.btn-primary { box-shadow: 3px 3px 0 var(--shade); }
.btn-line { background: #fff; color: var(--purple); border-color: var(--purple); }
.btn-line:hover { background: var(--purple-soft); }
.btn-white { background: #fff; color: var(--purple); box-shadow: 4px 4px 0 rgba(0, 0, 0, .22); }
.btn-white:hover { background: var(--mint-soft); }
.btn-white:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 rgba(0, 0, 0, .22); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

/* ── 상단 메뉴 ─────────────────────────────────────── */
.gnb { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.gnb-in { display: flex; align-items: center; gap: 24px; height: var(--gnb-h); }
.gnb-logo { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.gnb-logo img { width: 172px; }
.gnb-camp {
    padding-left: 14px; border-left: 1px solid var(--line-d);
    font-weight: 700; font-size: .92rem; color: var(--purple); white-space: nowrap;
}
.gnb-nav { display: flex; align-items: stretch; height: 100%; margin-left: auto; }
.gnb-nav a {
    position: relative; display: flex; align-items: center; padding: 0 20px;
    font-weight: 700; font-size: 1.04rem; color: var(--ink); white-space: nowrap; transition: color .15s;
}
.gnb-nav a:not(.is-cta)::after {
    content: ''; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 3px; background: var(--purple);
    transform: scaleX(0); transition: transform .2s;
}
.gnb-nav a:hover { color: var(--purple); }
.gnb-nav a:hover::after, .gnb-nav a.is-on::after { transform: scaleX(1); }
.gnb-nav a.is-on:not(.is-cta) { color: var(--purple); }
.gnb-nav a.is-cta {
    align-self: center; height: 48px; margin-left: 12px; padding: 0 22px; border-radius: var(--r-s);
    background: var(--purple); color: #fff; box-shadow: 3px 3px 0 var(--shade);
}
.gnb-nav a.is-cta:hover, .gnb-nav a.is-cta.is-on { background: var(--coral); color: #fff; }

.gnb-tools { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.font-btn {
    display: inline-flex; align-items: baseline; gap: 1px; height: 44px; padding: 0 12px;
    border: 1px solid var(--line-d); border-radius: var(--r-s); background: #fff; font-weight: 700; color: var(--sub);
}
.font-btn .fb-s { font-size: .78rem; }
.font-btn .fb-l { font-size: 1.12rem; }
.font-btn .fb-t { margin-left: 6px; font-size: .82rem; align-self: center; }
.font-btn:hover { border-color: var(--purple); color: var(--purple); }
.font-btn[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); color: #fff; }
.menu-btn { display: none; width: 46px; height: 46px; border: 0; border-radius: var(--r-s); background: var(--purple); padding: 14px 12px; }
.menu-btn span { display: block; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .25s, opacity .2s; }
.menu-btn span + span { margin-top: 5px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── 키비주얼 ───────────────────────────────────────── */
/* 배경 그림은 본문 폭(.wrap) 오른쪽에 붙이고, 그보다 넓은 화면의 양옆은 같은 민트색으로 채운다. */
.hero { background: #91E2DA; }
.hero-in {
    display: flex; align-items: center; height: 380px;
    background: url('../../img/hero_bg.png') no-repeat right center / auto 100%;
}
.hero-copy { position: relative; z-index: 1; width: 540px; max-width: 100%; }
.hero-title { margin: 0; }
.hero-sub { width: 430px; max-width: 100%; }
.hero-main { width: 520px; max-width: 100%; margin-top: 14px; }
.hero-btn { display: inline-block; margin-top: 26px; transition: transform .12s, filter .15s; }
.hero-btn img { width: 230px; }
.hero-btn:hover { filter: brightness(1.15); }
.hero-btn:active { transform: translate(2px, 2px); }

/* ── 섹션 머리 ───────────────────────────────────────── */
/* 포스터의 "투석 첫걸음!" 같은 퍼플 네모 라벨 + 큰 제목, 설명은 오른쪽 */
.sec-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    padding-bottom: 22px; margin-bottom: 36px; border-bottom: 1px solid var(--line-d);
}
.sec-label {
    display: inline-block; padding: 3px 12px; margin-bottom: 12px;
    background: var(--purple); color: #fff; font-weight: 700; font-size: .9rem; letter-spacing: 0;
}
.sec-title { font-size: 2rem; line-height: 1.35; font-weight: 700; color: var(--ink); letter-spacing: -.035em; }
.sec-desc { color: var(--sub); font-size: 1rem; text-align: right; }

/* ── 지도 + 일정 ─────────────────────────────────────── */
.sched { padding: 64px 0 96px; }
.sched-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 32px; align-items: start; }

.map-box {
    position: relative; overflow: hidden; border-radius: var(--r); background: var(--mint-soft);
    padding: 34px 24px 20px; display: flex; flex-direction: column; align-items: center;
}
.kmap { position: relative; width: 100%; max-width: 380px; height: auto; }
.kmap .prov { fill: #D9E0E6; stroke: var(--mint-soft); stroke-width: 1.4; stroke-linejoin: round; transition: fill .2s; }
.kmap .prov.is-event { fill: var(--mint); cursor: pointer; }
.kmap .prov.is-event:hover, .kmap .prov.is-hover { fill: var(--mint-d); }
.kmap .prov.is-on { fill: var(--purple) !important; }
.kmap .pin { cursor: pointer; outline: none; }
.kmap .pin-body { fill: var(--ink); stroke: #fff; stroke-width: 2.5; transition: fill .15s; }
.kmap .pin-dot { fill: #fff; }
.kmap .pin-label rect { fill: #fff; stroke: var(--ink); stroke-width: 2; transition: fill .15s; }
.kmap .pin-label text { font-family: 'Pretendard', sans-serif; font-size: 15px; font-weight: 700; fill: var(--ink); }
.kmap .pin-pulse { fill: var(--coral); opacity: 0; }
.kmap .pin:hover .pin-body, .kmap .pin:focus-visible .pin-body { fill: var(--coral); }
.kmap .pin:focus-visible .pin-label rect { stroke: var(--coral); stroke-width: 3; }
.kmap .pin.is-on .pin-body { fill: var(--coral); }
.kmap .pin.is-on .pin-label rect { fill: var(--coral); stroke: var(--coral); }
.kmap .pin.is-on .pin-label text { fill: #fff; }
.kmap .pin.is-on .pin-pulse { animation: pulse 1.8s ease-out infinite; transform-origin: 0 0; }
@keyframes pulse { 0% { opacity: .5; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.2); } }
.map-note { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .88rem; color: var(--sub); }
.map-note i { width: 14px; height: 14px; background: var(--mint); border: 1px solid var(--mint-d); }

.sched-panel { display: flex; flex-direction: column; gap: 18px; }
.region-tabs { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line-d); border-radius: var(--r-s); overflow: hidden; }
.region-tab {
    min-height: 56px; border: 0; border-left: 1px solid var(--line-d); background: #fff;
    font-size: 1.1rem; font-weight: 700; color: var(--ink); transition: background .15s, color .15s;
}
.region-tab:first-child { border-left: 0; }
.region-tab:hover { background: var(--mint-soft); }
.region-tab.is-on { background: var(--purple); color: #fff; }

/* 선택된 일정 카드 — 포스터 버튼과 같은 '밀린 그림자'를 민트로 */
.ev-card { background: #fff; border: 1px solid var(--line-d); border-radius: var(--r); box-shadow: 6px 6px 0 var(--mint-soft), 0 1px 0 var(--line); animation: rise .3s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ev-head { position: relative; padding: 26px 30px 22px; border-bottom: 1px solid var(--line); }
.ev-no { font-weight: 600; color: var(--teal-text); font-size: .92rem; }
.ev-region { font-size: 1.95rem; font-weight: 700; color: var(--ink); letter-spacing: -.035em; line-height: 1.3; }
.ev-dday {
    position: absolute; right: 26px; top: 28px; padding: 4px 12px;
    background: var(--coral); color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .02em;
}
.ev-info { padding: 8px 30px; }
.ev-info > div { display: flex; gap: 20px; padding: 14px 0; border-bottom: 1px dashed var(--line-d); }
.ev-info > div:last-child { border-bottom: 0; }
.ev-info dt { flex: 0 0 44px; font-weight: 700; color: var(--purple); }
.ev-info dd { font-size: 1.06rem; color: var(--text); }
.ev-info dd strong { color: var(--ink); font-size: 1.16rem; margin-right: 8px; }
.ev-info dd b { color: var(--coral); }
.ev-actions { display: grid; grid-template-columns: 1.45fr 1fr; gap: 12px; padding: 4px 30px 30px; }

.ev-all { border-top: 1px solid var(--line); padding-top: 14px; }
.ev-all-title { font-weight: 700; color: var(--sub); font-size: .9rem; margin-bottom: 4px; }
.ev-mini button {
    width: 100%; display: flex; align-items: center; gap: 16px; padding: 11px 8px; border: 0; border-bottom: 1px solid var(--line);
    background: transparent; text-align: left; transition: background .15s;
}
.ev-mini li:last-child button { border-bottom: 0; }
.ev-mini button:hover { background: var(--bg); }
.ev-mini button.is-on { background: var(--purple-soft); }
.ev-mini .m-region { flex: 0 0 44px; font-weight: 700; color: var(--purple); }
.ev-mini .m-date { flex: 1; color: var(--text); }
.ev-mini .m-dday { font-size: .85rem; font-weight: 700; color: var(--sub); }
.ev-mini button.is-on .m-dday { color: var(--coral); }

/* ── 행사 개요 ───────────────────────────────────────── */
.intro { background: var(--purple); color: #fff; position: relative; overflow: hidden; }
.intro::after {
    content: '?'; position: absolute; right: 4%; top: -40px; font-size: 15rem; font-weight: 700; line-height: 1;
    color: rgba(145, 226, 218, .12); transform: rotate(12deg); pointer-events: none;
}
.intro-in { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 48px; padding-top: 56px; padding-bottom: 56px; }
.intro-lead { font-size: 1.7rem; font-weight: 700; line-height: 1.4; margin-bottom: 12px; letter-spacing: -.035em; }
.intro-lead em { font-style: normal; color: var(--mint); }
.intro-text p:not(.intro-lead) { color: rgba(255, 255, 255, .85); max-width: 520px; }
.intro-facts { display: flex; border-top: 1px solid rgba(255, 255, 255, .3); border-bottom: 1px solid rgba(255, 255, 255, .3); }
.intro-facts > div { padding: 20px 30px; border-left: 1px solid rgba(255, 255, 255, .2); }
.intro-facts > div:first-child { border-left: 0; padding-left: 4px; }
.intro-facts dt { font-size: .86rem; color: rgba(255, 255, 255, .7); margin-bottom: 2px; }
.intro-facts dd { font-size: 1.06rem; font-weight: 600; white-space: nowrap; }
.intro-facts b { font-size: 1.5rem; color: var(--mint); font-weight: 700; }

/* ── 참여 대상 ───────────────────────────────────────── */
.target { padding: 96px 0 90px; }
.target-list { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.target-list li {
    position: relative; padding: 30px 26px 34px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
    min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
    transition: background .2s;
}
.target-list li:hover { background: var(--mint-soft); }
.t-no { font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--mint-d); letter-spacing: -.03em; }
.target-list p { font-size: 1.15rem; font-weight: 700; color: var(--ink); line-height: 1.5; }

/* ── 프로그램 미리보기 ───────────────────────────────── */
.preview { padding: 90px 0; background: var(--mint-soft); }
.preview-in { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: start; }
.preview-head .sec-title { font-size: 2rem; }
.preview-head .sec-desc { text-align: left; margin-top: 12px; }
.preview-head .btn { margin-top: 28px; }
.preview-list { border-top: 1px solid var(--line-d); }
.preview-list li {
    display: flex; align-items: baseline; gap: 20px; padding: 19px 4px; border-bottom: 1px solid var(--line-d);
    font-weight: 600; color: var(--ink); font-size: 1.08rem;
}
.preview-list span { flex-shrink: 0; width: 28px; font-weight: 700; color: var(--coral); font-size: 1rem; }

/* ── 신청 안내 띠 ────────────────────────────────────── */
.apply { background: var(--mint); color: var(--ink); }
.apply-in { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 56px; padding-bottom: 56px; }
.apply h2 { font-size: 1.85rem; font-weight: 700; letter-spacing: -.035em; margin-bottom: 4px; }
.apply p { color: var(--text); }
.apply strong { color: var(--coral); }
.apply-btns { display: flex; gap: 14px; flex-shrink: 0; }

/* ── 서브 머리띠 + 탭 ───────────────────────────────── */
/* 서브 머리띠: 돋보기만 잘라낸 그림(sub_visual)을 섹션 오른쪽 아래, 본문 폭 끝에 맞춰 — 잘리지 않게 */
.subhead {
    background: #91E2DA url('../../img/sub_visual.png') no-repeat;
    background-size: auto 250px;
    background-position: right max(24px, calc((100% - var(--wrap)) / 2 + 24px)) bottom;
}
.subhead > .wrap:first-child { position: relative; padding-top: 58px; padding-bottom: 40px; min-height: 200px; }
.subhead-eyebrow { font-weight: 700; color: var(--purple); font-size: .95rem; }
.subhead-title { font-size: 2.6rem; font-weight: 700; color: var(--ink); letter-spacing: -.045em; line-height: 1.25; margin-top: 6px; }
.subtabs { display: flex; padding: 0 24px; }
.subtabs a {
    position: relative; flex: 1; max-width: 210px; text-align: center; padding: 18px 10px;
    background: rgba(255, 255, 255, .6); font-weight: 700; color: var(--ink); font-size: 1.04rem;
    border-right: 1px solid rgba(69, 61, 134, .14); transition: background .15s;
}
.subtabs a:last-child { border-right: 0; }
.subtabs a:hover { background: #fff; }
.subtabs a.is-on { background: var(--purple); color: #fff; }
.subtabs a.is-on::after {
    content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
    border: 9px solid transparent; border-bottom: 0; border-top-color: var(--purple); z-index: 2;
}

.sub-sec { padding: 64px 0 96px; }
.sub-sec + .sub-sec { padding-top: 0; }

/* ── 인사말 ─────────────────────────────────────────── */
.greet { font-size: 1.1rem; line-height: 1.95; color: var(--text); }
.greet p + p { margin-top: 1.1em; }
.greet-visual {
    position: relative; overflow: hidden; padding: 38px 30px; margin-bottom: 48px; background: var(--mint-soft);
    border-radius: var(--r); display: flex; justify-content: center;
}
.greet-visual img { position: relative; width: 100%; max-width: 500px; }
.greet-hello { font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.greet-lead {
    font-size: 1.65rem !important; line-height: 1.45 !important; font-weight: 700; color: var(--purple); letter-spacing: -.035em;
    padding-left: 18px; border-left: 4px solid var(--coral); margin: 1.2em 0 1.4em !important;
}
.greet-lead em { font-style: normal; color: var(--coral); }
.greet strong { color: var(--ink); }
.greet-sign { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--line-d); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.greet-sign img { width: 150px; }
.greet-sign p { font-size: 1.1rem; }
.greet-sign strong { font-size: 1.45rem; margin-left: 8px; letter-spacing: .12em; }

/* ── 공지사항 ───────────────────────────────────────── */
.notice-box { padding: 0 0 44px; }
.notice-box + .notice-box { padding-top: 44px; border-top: 1px solid var(--line); }
.box-title { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-bottom: 14px; letter-spacing: -.03em; }
.bt-ico { display: inline-flex; width: 34px; height: 34px; background: var(--purple); color: #fff; font-size: .98rem; align-items: center; justify-content: center; }
.box-desc { color: var(--sub); margin-bottom: 18px; }
.box-desc mark { background: var(--coral-soft); color: var(--coral); font-weight: 700; padding: 2px 8px; }
.sched-table { border-top: 1px solid var(--line-d); }
.sched-table li { display: flex; align-items: center; gap: 18px; padding: 16px 8px; border-bottom: 1px solid var(--line); }
.st-no { width: 28px; flex-shrink: 0; color: var(--sub); font-weight: 700; font-size: .95rem; }
.st-region { flex: 0 0 60px; font-weight: 700; font-size: 1.2rem; color: var(--purple); }
.st-date { flex: 1; font-size: 1.08rem; color: var(--ink); }
.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check-list li { position: relative; padding: 16px 18px 16px 52px; font-size: 1.06rem; font-weight: 600; color: var(--ink); background: var(--mint-soft); border-radius: var(--r-s); }
.check-list li::before {
    content: ''; position: absolute; left: 16px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;
    background: var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") no-repeat center / 14px;
}
.notice-apply p { font-size: 1.08rem; }
.apply-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0 32px; }
.way { display: flex; flex-direction: column; gap: 2px; padding: 22px 24px; border: 1px solid var(--line-d); border-radius: var(--r); background: #fff; transition: box-shadow .15s, transform .15s; }
.way:hover { box-shadow: 5px 5px 0 var(--mint); transform: translate(-2px, -2px); }
.way-k { font-weight: 700; color: var(--teal-text); font-size: .92rem; }
.way-v { font-weight: 700; color: var(--ink); font-size: 1.25rem; }

/* ── 프로그램 ───────────────────────────────────────── */
.prog-hero { position: relative; overflow: hidden; padding: 44px 40px; margin-bottom: 40px; border-radius: var(--r); background: var(--purple); color: #fff; }
.prog-hero::after {
    content: '?'; position: absolute; right: 30px; top: -24px; font-size: 10rem; font-weight: 700; line-height: 1;
    color: rgba(145, 226, 218, .16); transform: rotate(12deg);
}
.prog-q { position: relative; font-size: 1.8rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.45; }
.prog-sub { position: relative; margin-top: 8px; color: rgba(255, 255, 255, .88); font-size: 1.1rem; }
.prog-sub strong { color: var(--mint); }
.prog-list { border-top: 1px solid var(--line-d); }
.prog-list li { display: flex; align-items: center; gap: 24px; padding: 22px 6px; border-bottom: 1px solid var(--line); }
.pl-no { flex-shrink: 0; width: 40px; font-weight: 700; font-size: 1.3rem; color: var(--coral); }
.pl-title { font-size: 1.18rem; font-weight: 700; color: var(--ink); line-height: 1.5; }
.pl-sub { color: var(--teal-text); font-weight: 600; margin-top: 2px; }
.vod-sec { padding-top: 0 !important; }
.vod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 24px; }
.vod { display: block; }
.vod-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--ink); }
.vod-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.vod:hover .vod-thumb img { transform: scale(1.04); }
.vod-play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: var(--coral); display: flex; align-items: center; justify-content: center; }
.vod-play svg { width: 26px; fill: #fff; margin-left: 3px; }
.vod-len { position: absolute; right: 10px; bottom: 10px; padding: 1px 8px; background: rgba(0, 0, 0, .78); color: #fff; font-size: .82rem; font-weight: 700; }
.vod-title { display: block; margin-top: 12px; font-weight: 700; color: var(--ink); font-size: 1.05rem; line-height: 1.5; }
.vod:hover .vod-title { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }

/* ── 사전등록 ───────────────────────────────────────── */
.reg-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line-d); margin-bottom: 36px; }
.reg-tabs a { position: relative; text-align: center; padding: 16px 0; font-weight: 700; font-size: 1.14rem; color: var(--sub); transition: color .15s; }
.reg-tabs a:hover { color: var(--ink); }
.reg-tabs a.is-on { color: var(--purple); }
.reg-tabs a.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 5px; background: var(--purple); }

.step { background: #fff; border: 1px solid var(--line-d); border-radius: var(--r); padding: 32px 34px 34px; margin-bottom: 20px; }
.step-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 1.32rem; font-weight: 700; color: var(--ink); padding: 0; margin-bottom: 6px; float: left; width: 100%; letter-spacing: -.03em; }
.step-head + * { clear: both; }
.step-no { padding: 3px 10px; background: var(--purple); color: #fff; font-size: .8rem; letter-spacing: .04em; }
.req-badge, .opt-badge { padding: 1px 8px; font-size: .8rem; font-weight: 700; border: 1px solid currentColor; }
.req-badge { color: var(--coral); }
.opt-badge { color: var(--sub); }
.step-desc { color: var(--sub); margin-bottom: 20px; clear: both; }
.step-desc strong { color: var(--coral); }

.region-pick { clear: both; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 4px; }
.rp { position: relative; cursor: pointer; }
.rp input { position: absolute; opacity: 0; pointer-events: none; }
.rp-box {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; height: 100%;
    padding: 24px 8px 18px; border: 2px solid var(--line-d); border-radius: var(--r); background: #fff; text-align: center;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.rp:hover .rp-box { border-color: var(--purple); }
.rp-check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-d); background: #fff; }
.rp-region { font-size: 1.45rem; font-weight: 700; color: var(--ink); }
.rp-date { font-weight: 700; color: var(--text); }
.rp-time { font-size: .9rem; color: var(--sub); }
.rp-dday { margin-top: 8px; padding: 1px 9px; background: var(--bg); color: var(--sub); font-size: .8rem; font-weight: 700; }
.rp input:checked + .rp-box { border-color: var(--purple); background: var(--purple-soft); box-shadow: 5px 5px 0 var(--mint); transform: translate(-2px, -2px); }
.rp input:checked + .rp-box .rp-region { color: var(--purple); }
.rp input:checked + .rp-box .rp-check {
    border-color: var(--purple);
    background: var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") no-repeat center / 13px;
}
.rp input:checked + .rp-box .rp-dday { background: var(--coral); color: #fff; }
.rp input:focus-visible + .rp-box { outline: 3px solid var(--coral); outline-offset: 3px; }

.picked { margin: 0 0 20px; padding: 20px 26px; border-radius: var(--r); background: var(--bg); border: 2px dashed var(--line-d); font-size: 1.1rem; }
.picked-empty { color: var(--sub); }
.picked-on strong { display: inline-block; padding: 0 10px; background: var(--purple); color: #fff; font-weight: 700; }
.picked-when { display: block; margin-top: 2px; color: var(--teal-text); font-weight: 700; }
.picked.is-set { background: var(--mint-soft); border: 2px solid var(--mint-d); }

.field { clear: both; margin-top: 24px; }
.field:first-of-type { margin-top: 14px; }
.f-label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 8px; font-size: 1.04rem; }
.req { font-style: normal; color: var(--coral); margin-left: 2px; }
.f-help { margin-top: 6px; font-size: .9rem; color: var(--sub); }
.inp {
    width: 100%; min-height: 58px; padding: 14px 18px; border: 1.5px solid var(--line-d); border-radius: var(--r-s);
    background: #fff; font: inherit; font-size: 1.08rem; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.inp::placeholder { color: #9EA2B5; }
.inp:hover { border-color: #AEB3C3; }
.inp:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(69, 61, 134, .15); }
.inp.is-err { border-color: var(--coral); background: #FFF8F8; }
textarea.inp { resize: vertical; line-height: 1.6; }
.inp-unit { position: relative; max-width: 260px; }
.inp-unit .inp { padding-right: 46px; }
.inp-unit span { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--sub); font-weight: 700; }
.inp-etc { margin-top: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
    display: inline-flex; align-items: center; justify-content: center; min-width: 76px; min-height: 52px; padding: 0 20px;
    border: 1.5px solid var(--line-d); border-radius: var(--r-s); background: #fff; font-weight: 700; color: var(--text); transition: all .15s;
}
.chips-lg .chip span { min-height: 58px; min-width: 120px; font-size: 1.08rem; }
.chip:hover span { border-color: var(--purple); color: var(--purple); }
.chip input:checked + span { background: var(--purple); border-color: var(--purple); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--coral); outline-offset: 2px; }
.chips.is-err .chip span { border-color: var(--coral); }

.consent {
    clear: both; max-height: 200px; overflow-y: auto; padding: 20px 22px; border-radius: var(--r-s); background: var(--bg);
    font-size: .95rem; line-height: 1.8; color: var(--sub); border: 1px solid var(--line);
}
.consent p + p { margin-top: .7em; }
.agree { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 18px 20px; border: 2px solid var(--line-d); border-radius: var(--r-s); cursor: pointer; font-size: 1.06rem; transition: border-color .15s, background .15s; }
.agree input { position: absolute; opacity: 0; }
.agree-box { flex-shrink: 0; width: 28px; height: 28px; border-radius: 4px; border: 2px solid #A9AEBF; background: #fff; transition: all .15s; }
.agree input:checked ~ .agree-box {
    border-color: var(--purple);
    background: var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") no-repeat center / 18px;
}
.agree:has(input:checked) { border-color: var(--purple); background: var(--purple-soft); }
.agree input:focus-visible ~ .agree-box { outline: 3px solid var(--coral); outline-offset: 2px; }
.agree.is-err { border-color: var(--coral); }

.form-error { margin: 0 0 16px; padding: 16px 20px; border-left: 4px solid var(--coral); background: var(--coral-soft); color: #B3303A; font-weight: 700; }
.submit-row { text-align: center; margin-top: 34px; }
.submit-row .btn { min-width: 340px; }
.submit-help { margin-top: 16px; color: var(--sub); }
.submit-help a { color: var(--purple); font-weight: 700; }

.done { text-align: center; background: #fff; border: 1px solid var(--line-d); border-radius: var(--r); padding: 56px 36px; box-shadow: 6px 6px 0 var(--mint-soft), 0 1px 0 var(--line); animation: rise .35s ease; }
.done-ico { width: 88px; height: 88px; margin: 0 auto 20px; border-radius: 50%; background: var(--mint); display: flex; align-items: center; justify-content: center; }
.done-ico svg { width: 50px; fill: none; stroke: var(--purple); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.done h2 { font-size: 1.9rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -.035em; }
.done > p { color: var(--sub); }
.done-sum { max-width: 460px; margin: 28px auto 20px; text-align: left; border-top: 1px solid var(--line-d); }
.done-sum > div { display: flex; gap: 16px; padding: 12px 6px; border-bottom: 1px solid var(--line); }
.done-sum dt { flex: 0 0 60px; color: var(--purple); font-weight: 700; }
.done-sum dd { font-weight: 700; color: var(--ink); }
.demo-note { font-size: .88rem; color: var(--coral); margin: 12px 0 22px; }

.check-form .step { max-width: 560px; margin: 0 auto; }
.check-form .step-head { float: none; }
.check-form .btn { margin-top: 28px; }
.check-result { max-width: 640px; margin: 40px auto 0; animation: rise .35s ease; }
.cr-title { font-size: 1.4rem; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.ticket { display: grid; grid-template-columns: 1.5fr 1fr; border: 1px solid var(--line-d); border-radius: var(--r); overflow: hidden; box-shadow: 6px 6px 0 var(--mint-soft), 0 1px 0 var(--line); }
.tk-left { background: var(--purple); color: #fff; padding: 28px 30px; position: relative; }
.tk-left::after { content: ''; position: absolute; right: -1px; top: 18px; bottom: 18px; border-right: 3px dashed rgba(255, 255, 255, .35); }
.tk-badge { display: inline-block; padding: 2px 10px; background: var(--mint); color: var(--purple); font-weight: 700; font-size: .85rem; }
.tk-region { margin-top: 12px; font-size: 1.6rem; font-weight: 700; }
.tk-when { font-weight: 700; color: var(--mint); }
.tk-venue { font-size: .92rem; color: rgba(255, 255, 255, .78); }
.tk-right { background: #fff; padding: 28px 26px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-content: center; }
.tk-right span { color: var(--sub); font-size: .9rem; }
.tk-right strong { color: var(--ink); }
.cr-help { margin-top: 18px; color: var(--sub); }
.cr-help a { color: var(--purple); font-weight: 700; }

/* ── 푸터 ───────────────────────────────────────────── */
.foot { background: #23253D; color: rgba(255, 255, 255, .7); padding: 44px 0 50px; font-size: .92rem; }
.foot-in { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; }
.foot-brand img { width: 146px; filter: brightness(0) invert(1); opacity: .9; margin-bottom: 10px; }
.foot-info { text-align: right; }
.foot-info strong { color: #fff; margin-right: 6px; }
.foot-info a { color: var(--mint); font-weight: 700; }
.foot-copy { margin-top: 10px; color: rgba(255, 255, 255, .45); font-size: .82rem; }

/* 모바일 전화 버튼 — 넓은 화면에선 숨긴다 */
.call-fab { display: none; }

/* ═══ 반응형 ═══════════════════════════════════════════ */
@media (max-width: 1140px) {
    .gnb-camp { display: none; }
    .gnb-nav a { padding: 0 14px; }
    .gnb-nav a:not(.is-cta)::after { left: 14px; right: 14px; }
    .font-btn .fb-t { display: none; }
}

@media (max-width: 960px) {
    :root { --gnb-h: 68px; }
    .gnb-logo img { width: 148px; }
    .menu-btn { display: block; }
    .gnb-tools { margin-left: auto; }
    .gnb-nav {
        position: fixed; left: 0; right: 0; top: var(--gnb-h); height: auto; margin: 0;
        flex-direction: column; align-items: stretch; padding: 8px 20px 24px;
        background: #fff; border-bottom: 1px solid var(--line-d); box-shadow: 0 24px 40px rgba(0, 0, 0, .12);
        transform: translateY(-10px); opacity: 0; visibility: hidden; transition: all .2s;
    }
    .gnb-nav.is-open { transform: none; opacity: 1; visibility: visible; }
    .gnb-nav a { padding: 18px 6px; border-bottom: 1px solid var(--line); font-size: 1.14rem; }
    .gnb-nav a:not(.is-cta)::after { display: none; }
    .gnb-nav a.is-on:not(.is-cta)::before { content: ''; width: 6px; height: 6px; background: var(--coral); margin-right: 10px; }
    .gnb-nav a.is-cta { align-self: stretch; justify-content: center; height: 58px; margin: 18px 0 0; border: 0; }

    .hero-in { height: 340px; background-size: auto 320px; background-position: right -60px center; }
    .hero-copy { width: 52%; }

    .sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .sec-desc { text-align: left; }

    .sched-grid { grid-template-columns: 1fr; }
    .kmap { max-width: 320px; }
    .intro-in { grid-template-columns: 1fr; gap: 28px; }
    .intro-facts > div { flex: 1; padding: 18px 16px; }
    .target-list { grid-template-columns: repeat(2, 1fr); }
    .preview-in { grid-template-columns: 1fr; gap: 32px; }
    .apply-in { flex-direction: column; align-items: flex-start; }
    .region-pick { grid-template-columns: repeat(3, 1fr); }
    .vod-grid { grid-template-columns: repeat(2, 1fr); }
    /* 탭이 화면 폭을 다 쓰므로 그림은 탭 줄 위로 올린다 */
    .subhead { background-size: auto 180px; background-position: right 24px bottom 66px; }
}

@media (max-width: 640px) {
    html { font-size: 16.5px; }
    html.font-lg { font-size: 19px; }
    .wrap { padding: 0 18px; }
    .pc { display: none; }
    .mo { display: inline; }

    /* 키비주얼: 글자 요소를 위에 쌓고, 돋보기 그림은 오른쪽 아래로 작게 */
    .hero-in { height: auto; display: block; padding-top: 28px; padding-bottom: 150px; background-position: right -30px bottom; background-size: auto 180px; }
    .hero-copy { width: 100%; }
    .hero-sub { width: 100%; max-width: 360px; }
    .hero-main { width: 100%; max-width: 420px; margin-top: 10px; }
    .hero-btn { margin-top: 18px; }
    .hero-btn img { width: 190px; }

    .btn-xl { min-height: 62px; padding: 0 24px; }
    .sec-title { font-size: 1.6rem; }
    .sec-head { margin-bottom: 26px; padding-bottom: 18px; }
    .sec-desc br { display: none; }

    .sched { padding: 44px 0 70px; }
    .map-box { padding: 26px 12px 16px; }
    .kmap { max-width: 280px; }
    .region-tab { min-height: 52px; font-size: 1rem; }
    .ev-card { box-shadow: 5px 5px 0 var(--mint); }
    .ev-head { padding: 22px 20px 18px; }
    .ev-dday { right: 18px; top: 22px; }
    .ev-region { font-size: 1.6rem; }
    .ev-info { padding: 4px 20px; }
    .ev-info > div { gap: 14px; }
    .ev-info dd strong { display: block; margin: 0; }
    .ev-actions { grid-template-columns: 1fr; padding: 4px 20px 22px; }
    .ev-mini .m-dday { display: none; }

    .intro-in { padding-top: 44px; padding-bottom: 44px; }
    .intro-lead { font-size: 1.4rem; }
    .intro-facts { flex-direction: column; border-bottom: 0; }
    .intro-facts > div { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 2px; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
    .intro-facts > div:first-child { padding-left: 2px; }
    .intro-facts b { font-size: 1.3rem; }
    .intro::after { font-size: 10rem; top: -20px; }

    .target, .preview { padding: 64px 0; }
    .target-list li { padding: 22px 16px 24px; min-height: 160px; gap: 16px; }
    .t-no { font-size: 2rem; }
    .target-list p { font-size: 1.02rem; }
    .preview-list li { gap: 14px; font-size: 1.02rem; padding: 16px 2px; }
    .apply-in { padding-top: 44px; padding-bottom: 44px; }
    .apply h2 { font-size: 1.5rem; }
    .apply-btns { flex-direction: column; width: 100%; }

    .subhead { background-size: auto 128px; background-position: right 10px top 18px; }
    .subhead > .wrap:first-child { padding-top: 34px; padding-bottom: 26px; min-height: 150px; }
    .subhead-eyebrow { font-size: .86rem; max-width: 70%; }
    .subhead-title { font-size: 1.95rem; max-width: 70%; }
    .subtabs { padding: 0; overflow-x: auto; scrollbar-width: none; }
    .subtabs::-webkit-scrollbar { display: none; }
    .subtabs a { flex: 1 0 auto; max-width: none; padding: 15px 16px; font-size: .95rem; }
    .subtabs a.is-on::after { display: none; }
    .sub-sec { padding: 40px 0 70px; }

    .greet { font-size: 1.04rem; }
    .greet-lead { font-size: 1.35rem !important; }
    .greet-visual { padding: 24px 18px; margin-bottom: 32px; }
    .greet-sign { flex-direction: column; align-items: flex-end; }

    .box-title { font-size: 1.28rem; }
    .sched-table li { flex-wrap: wrap; gap: 4px 12px; padding: 14px 4px; }
    .sched-table .st-no { display: none; }
    .sched-table .st-date { flex: 1 1 100%; order: 3; font-size: 1rem; }
    .sched-table .btn { margin-left: auto; }
    .check-list { grid-template-columns: 1fr; }
    .apply-ways { grid-template-columns: 1fr; }

    .prog-hero { padding: 32px 22px; }
    .prog-q { font-size: 1.35rem; }
    .prog-list li { padding: 18px 2px; gap: 14px; align-items: flex-start; }
    .pl-no { width: 30px; font-size: 1.1rem; line-height: 1.6; }
    .pl-title { font-size: 1.05rem; }
    .vod-grid { grid-template-columns: 1fr; }

    .reg-tabs a { font-size: 1.04rem; }
    .step { padding: 24px 18px 26px; }
    .step-head { font-size: 1.15rem; }
    .region-pick { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .region-pick .rp:last-child { grid-column: 1 / -1; }
    .rp-box { padding: 18px 8px 14px; }
    .grid3 { grid-template-columns: 1fr; }
    .chip span { min-width: 64px; padding: 0 16px; }
    .chips-lg .chip span { min-width: 0; padding: 0 18px; }
    .submit-row .btn { min-width: 0; width: 100%; }
    .done { padding: 40px 20px; box-shadow: 5px 5px 0 var(--mint); }
    .ticket { grid-template-columns: 1fr; box-shadow: 5px 5px 0 var(--mint); }
    .tk-left::after { display: none; }

    .foot-in { flex-direction: column; }
    .foot-info { text-align: left; }
    .foot { padding-bottom: 100px; }

    .call-fab {
        display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 16px; bottom: 16px; z-index: 40;
        padding: 13px 18px; border-radius: var(--r-s); background: var(--coral); color: #fff; font-weight: 700;
        box-shadow: 3px 3px 0 rgba(0, 0, 0, .2);
    }
    .call-fab svg { width: 20px; height: 20px; fill: #fff; }
}

@media (max-width: 360px) {
    .region-tab { font-size: .92rem; }
    .chip span { min-width: 56px; padding: 0 12px; }
}

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

/* ── 모바일 보정: 선택 버튼을 칸에 맞춰 고르게 (한 개만 다음 줄로 떨어지지 않게) ── */
@media (max-width: 640px) {
    .chips-c3, .chips-c4, .chips-c5 { display: grid; gap: 8px; }
    .chips-c3 { grid-template-columns: repeat(3, 1fr); }
    .chips-c4 { grid-template-columns: repeat(4, 1fr); }
    .chips-c5 { grid-template-columns: repeat(5, 1fr); }
    .chips-c3 .chip span, .chips-c4 .chip span, .chips-c5 .chip span { display: flex; width: 100%; min-width: 0; padding: 0 4px; }
    .chips-c5 .chip span { min-height: 50px; }

    .box-desc mark { display: inline-block; margin-top: 4px; white-space: nowrap; }
    .prog-hero::after { font-size: 7rem; right: 10px; }
}

/* 지역을 고르지 않고 신청하면 선택 안내 상자를 빨갛게 */
.picked.is-err { border-color: var(--coral); background: var(--coral-soft); }
.picked.is-err .picked-empty { color: #B3303A; font-weight: 700; }