/* ─────────────────────────────────────────────
   KiiKi X 공용 스타일
   모든 페이지(index-logged-in/out/login/signup/mypage/apply/education/notices)에서
   공통으로 사용하는 로그인 상태 표시(auth-slot)와 모달 스타일만 모아둔 파일입니다.
   각 페이지 고유의 레이아웃/색상 변수는 각 파일의 <style> 안에 그대로 유지되어 있습니다.
   ───────────────────────────────────────────── */

:root{
  --main-blue:#5279A8;
  --deep-blue:#324F73;
  --ink-navy:#12203A;   /* 히어로 이미지 제목과 같은 계열의 진한 남색 — 버튼 기본색 */
  --light-blue:#EAF2FA;
  --cream:#FAF7F0;
  --warm-beige:#EFE7D8;
  --background:#FCFCFA;
  --main-text:#27313D;
  --sub-text:#66717F;
  --border:#DCE3EA;
  --radius:12px;
  --max:1160px;
  --font-sans:"Pretendard Variable","Pretendard","Noto Sans KR",-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ── hidden 속성 최우선 처리 ──
   로그인 안내 / 역할 제한 안내 / 실제 콘텐츠처럼 같은 화면에서 반드시 하나만 보여야 하는
   영역들은 모두 [hidden] 속성으로 감춥니다. 페이지별 <style> 안에 있는 #id{display:flex} 나
   .class{display:block} 같은 규칙은 CSS 명시도(specificity) 상 브라우저 기본 [hidden] 규칙보다
   강해서 hidden 속성이 붙어도 요소가 계속 보이는 문제가 있었습니다. 아래 !important 규칙으로
   hidden 속성이 항상 다른 display 규칙보다 우선하도록 고정합니다. */
[hidden]{display:none !important;}

/* ── 전체 폰트 (Pretendard 우선, Noto Sans KR 대체 / 손글씨체 사용하지 않음) ── */
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:90px;}
body{margin:0;font-family:var(--font-sans);color:var(--main-text);background:var(--background);line-height:1.7;font-size:16px;}
button,input,select,textarea{font-family:inherit;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
section{padding:76px 0;}
h1,h2,h3{margin:0;letter-spacing:-0.01em;}

/* ── eyebrow / accent 라벨: 손글씨체 대신 산세리프 + 자간으로 포인트 ── */
.accent{font-family:var(--font-sans);color:var(--main-blue);font-weight:700;letter-spacing:0.04em;}
.eyebrow{display:block;font-size:13px;margin-bottom:12px;letter-spacing:0.08em;}
.section-title{font-size:26px;font-weight:700;color:var(--main-text);}
.section-desc{margin-top:14px;font-size:15.5px;color:var(--sub-text);max-width:640px;line-height:1.75;}
@media(max-width:640px){ .section-title{font-size:22px;} section{padding:52px 0;} }

/* ── 공용 버튼 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 26px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;border:none;transition:background .15s ease, color .15s ease;}
.btn-primary{background:var(--ink-navy);color:#fff;}
.btn-primary:hover{background:#25385C;}
.btn-secondary{background:transparent;color:var(--ink-navy);border:1.5px solid var(--ink-navy);}
.btn-secondary:hover{background:#F3F5F8;}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;}

/* ── 프로그램 페이지 상단 신청 CTA ──
   기존에 페이지 맨 아래에 있던 신청/문의 버튼을 제목 옆으로 올린 영역입니다. */
.page-hero-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 32px;flex-wrap:wrap;}
.page-hero-head h1{flex:1;min-width:280px;margin-top:10px;}
.page-hero-actions{display:flex;gap:10px;flex-wrap:wrap;flex:none;}
.page-hero-actions .btn{min-height:44px;padding:10px 20px;font-size:14.5px;}
@media(max-width:820px){
  .page-hero-head h1{min-width:100%;}
  .page-hero-actions{width:100%;}
  .page-hero-actions .btn{flex:1;}
}

/* ── 내용 준비중 자리표시 ── */
.tbd-box{margin-top:24px;border:1.5px dashed var(--border);border-radius:var(--radius);background:var(--background);padding:56px 24px;text-align:center;}
.tbd-box .tbd-title{font-size:15px;font-weight:700;color:var(--sub-text);}
.tbd-box .tbd-desc{margin-top:8px;font-size:13.5px;color:var(--sub-text);}

/* ── Header / 데스크톱 메가메뉴 ── */
header{position:sticky;top:0;z-index:50;background:rgba(252,252,250,0.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);}
.header-inner{max-width:var(--max);margin:0 auto;padding:0 20px;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.logo-wrap{display:flex;align-items:center;gap:10px;}
.logo-img{height:30px;width:auto;display:block;flex-shrink:0;}
.logo-tagline{display:block;font-size:11px;font-weight:400;color:var(--sub-text);white-space:nowrap;}
.nav-primary{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;}
.nav-link{padding:10px 13px;border-radius:8px;font-size:14px;font-weight:500;color:var(--main-text);white-space:nowrap;}
.nav-link:hover{color:var(--main-blue);background:var(--light-blue);}
.nav-link.active{color:var(--main-blue);background:var(--light-blue);}
.nav-item{position:relative;}
.nav-item > summary{list-style:none;cursor:pointer;padding:10px 13px;border-radius:8px;font-size:14px;font-weight:500;color:var(--main-text);display:flex;align-items:center;gap:3px;white-space:nowrap;}
.nav-item > summary::-webkit-details-marker{display:none;}
.nav-item > summary::after{content:"▾";font-size:9px;color:var(--sub-text);}
.nav-item > summary:hover{color:var(--main-blue);background:var(--light-blue);}
.nav-item[open] > summary{color:var(--main-blue);background:var(--light-blue);}
.nav-item.active > summary{color:var(--main-blue);background:var(--light-blue);}
.mega-panel{position:absolute;top:calc(100% + 8px);left:0;background:var(--background);border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 34px rgba(50,79,115,0.16);padding:18px;z-index:80;}
.mega-panel.list{min-width:200px;display:flex;flex-direction:column;gap:2px;}
.mega-panel.list a{display:block;padding:9px 10px;border-radius:8px;font-size:14px;color:var(--main-text);white-space:nowrap;}
.mega-panel.list a:hover{background:var(--light-blue);color:var(--main-blue);}
.mega-programs{width:560px;max-width:92vw;}
.mega-row-main{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.mega-row-main a{display:block;padding:12px 4px;border-radius:8px;text-align:center;font-size:13px;font-weight:600;color:var(--main-text);}
.mega-row-main a:hover{background:var(--light-blue);color:var(--main-blue);}
.mega-row-main .sub{display:block;font-size:10.5px;font-weight:400;color:var(--sub-text);margin-top:2px;}
.nested-dropdown{position:relative;}
.nested-trigger{display:flex;align-items:stretch;border-radius:8px;overflow:hidden;}
.nested-link{flex:1;padding:12px 2px;text-align:center;font-size:13px;font-weight:600;color:var(--main-text);}
.nested-link:hover{background:var(--light-blue);color:var(--main-blue);}
.nested-toggle{border:none;background:none;padding:12px 8px;cursor:pointer;font-size:10px;color:var(--sub-text);font-family:inherit;}
.nested-toggle:hover{background:var(--light-blue);color:var(--main-blue);}
.nested-dropdown.open .nested-link,.nested-dropdown.open .nested-toggle{background:var(--light-blue);color:var(--main-blue);}
.nested-panel{top:calc(100% + 6px);left:50%;transform:translateX(-50%);min-width:190px;}
.mega-panel.list[hidden]{display:none;}
.mobile-nav .nested-dropdown{border-bottom:1px solid var(--border);}
.mobile-nav .nested-trigger-row{display:flex;align-items:center;justify-content:space-between;}
.mobile-nav .nested-trigger-row a{flex:1;display:block;min-height:48px;line-height:48px;font-size:16px;font-weight:500;color:var(--main-text);}
.mobile-nav .nested-toggle-mobile{background:none;border:none;padding:0 14px;min-height:48px;cursor:pointer;font-size:12px;color:var(--sub-text);font-family:inherit;}
.mobile-nav .nested-toggle-mobile::after{content:"▾";}
.mobile-nav .nested-dropdown.open .nested-toggle-mobile::after{content:"▴";}
.mobile-nav .nested-panel-mobile{display:flex;flex-direction:column;}
.mobile-nav .nested-panel-mobile[hidden]{display:none;}
.mobile-nav .nested-panel-mobile a{display:block;min-height:44px;line-height:44px;padding-left:14px;font-size:14.5px;color:var(--sub-text);}
.footer-disclaimer{margin-top:40px;border-top:1px solid var(--border);padding-top:20px;font-size:12px;color:var(--sub-text);line-height:1.7;max-width:820px;}
.auth-area{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-shrink:0;}
@media(max-width:1140px){ .nav-primary, .auth-area{display:none;} .hamburger{display:flex;} }
@media(max-width:480px){ .logo-tagline{display:none;} }

/* ── 모바일 메뉴 ── */
#mobile-menu{position:fixed;inset:0;background:var(--background);z-index:60;display:none;flex-direction:column;}
#mobile-menu.open{display:flex;}
.mobile-menu-top{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);}
.mobile-menu-close{background:none;border:none;font-size:26px;cursor:pointer;padding:6px;}
.mobile-nav{flex:1;overflow-y:auto;padding:12px 20px;}
.mobile-nav > a{display:block;min-height:48px;line-height:48px;font-size:16px;font-weight:500;border-bottom:1px solid var(--border);}
.mobile-nav > a.active{color:var(--main-blue);}
.mobile-nav details{border-bottom:1px solid var(--border);}
.mobile-nav details summary{min-height:48px;line-height:48px;font-size:16px;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.mobile-nav details summary::-webkit-details-marker{display:none;}
.mobile-nav details summary::after{content:"▾";font-size:12px;color:var(--sub-text);}
.mobile-nav details[open] summary::after{content:"▴";}
.mobile-nav details.active summary{color:var(--main-blue);}
.mobile-nav details a{display:block;min-height:44px;line-height:44px;padding-left:14px;font-size:14.5px;color:var(--sub-text);}
.mobile-nav .cta-wrap{margin-top:20px;}

/* ── Footer ── */
footer{background:var(--cream);border-top:1px solid var(--border);padding:56px 0 30px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px;}
.footer-grid h4{font-size:14px;margin-bottom:14px;}
.footer-grid p,.footer-grid a,.footer-grid span{font-size:13.5px;color:var(--sub-text);}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.footer-links a:hover{color:var(--main-blue);}
/* 아직 연결하지 않은 항목: 링크가 아닌 텍스트로 표시합니다 */
.footer-links span{font-size:13.5px;color:var(--sub-text);}
.sns-row{display:flex;gap:10px;margin-top:14px;}
.sns-row a{width:40px;height:40px;border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--sub-text);}
.sns-row a:hover{border-color:var(--main-blue);color:var(--main-blue);}
.footer-bottom{margin-top:14px;font-size:12px;color:var(--sub-text);}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}

/* 포커스 표시: 키보드 이용자를 위해 항상 보이도록 처리 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:2.5px solid var(--main-blue);
  outline-offset:2px;
}

/* ── 로그인 상태 표시 영역 (auth-slot) ──
   data-auth-slot="full"   : index.html 데스크톱 헤더의 auth-area
   data-auth-slot="mobile"  : index.html 모바일 메뉴 내부
   data-auth-slot="mini"    : login/signup/apply/education/notices/mypage 의 단순 헤더
*/
.hi-auth-mini{display:flex;align-items:center;gap:10px;}
.hi-auth-mini a, .hi-auth-mini button{
  font-size:13.5px;font-weight:600;color:var(--main-blue);background:none;border:none;
  font-family:inherit;cursor:pointer;padding:6px 4px;
}
.hi-auth-mini a:hover, .hi-auth-mini button:hover{color:var(--deep-blue);text-decoration:underline;}
.hi-auth-mini .hi-user-name{font-weight:700;color:var(--main-text);}

.hi-auth-full{display:flex;align-items:center;gap:8px;}
.hi-auth-full .hi-login-btn{font-size:13.5px;font-weight:500;color:var(--sub-text);padding:8px 10px;border-radius:8px;}
.hi-auth-full .hi-login-btn:hover{color:var(--main-blue);}
.hi-auth-full .hi-signup-btn{font-size:13.5px;font-weight:600;color:#fff;background:var(--ink-navy);padding:9px 16px;border-radius:8px;}
.hi-auth-full .hi-signup-btn:hover{background:#25385C;}
.hi-auth-full .hi-user-name{font-size:13.5px;font-weight:700;color:var(--main-text);padding:8px 6px;}
.hi-auth-full .hi-mypage-btn{font-size:13.5px;font-weight:600;color:var(--ink-navy);padding:8px 10px;border-radius:8px;}
.hi-auth-full .hi-mypage-btn:hover{background:var(--light-blue);}
.hi-auth-full .hi-schedule-btn{font-size:13.5px;font-weight:600;color:var(--deep-blue);padding:8px 10px;border-radius:8px;}
.hi-auth-full .hi-schedule-btn:hover{background:var(--light-blue);}
.hi-auth-full .hi-logout-btn{font-size:13.5px;font-weight:500;color:var(--sub-text);background:none;border:none;font-family:inherit;cursor:pointer;padding:8px 10px;border-radius:8px;}
.hi-auth-full .hi-logout-btn:hover{color:var(--main-blue);background:var(--light-blue);}

.hi-auth-mini .hi-schedule-btn, .hi-auth-mobile-row .hi-schedule-btn{font-weight:600;color:var(--deep-blue);}

.hi-auth-mobile-row{display:flex;flex-direction:column;gap:2px;}
.hi-auth-mobile-row a, .hi-auth-mobile-row button{
  display:block;min-height:44px;line-height:44px;font-size:15px;font-weight:500;
  color:var(--main-text);background:none;border:none;font-family:inherit;text-align:left;cursor:pointer;
}
.hi-auth-mobile-row .hi-user-name{font-weight:700;color:var(--main-blue);}

/* ── 공용 모달 (준비중 안내 / 영수증 보기 등) ── */
.hi-modal-overlay{
  position:fixed;inset:0;background:rgba(39,49,61,0.45);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:200;
}
.hi-modal-overlay.open{display:flex;}
.hi-modal{
  background:var(--background);border-radius:16px;max-width:420px;width:100%;
  max-height:90vh;overflow-y:auto;padding:28px 26px;box-shadow:0 20px 50px rgba(39,49,61,0.25);
}
.hi-modal h3{margin:0;font-size:18px;color:var(--main-text);}
.hi-modal p{margin-top:10px;font-size:14px;color:var(--sub-text);line-height:1.7;}
.hi-modal .hi-modal-close{
  margin-top:22px;min-height:44px;width:100%;border:none;border-radius:10px;
  background:var(--main-blue);color:#fff;font-size:14.5px;font-weight:700;cursor:pointer;
}
.hi-modal .hi-modal-close:hover{background:var(--deep-blue);}
.hi-modal-receipt dl{margin:16px 0 0;display:grid;grid-template-columns:96px 1fr;gap:8px 10px;}
.hi-modal-receipt dt{font-size:13px;color:var(--sub-text);}
.hi-modal-receipt dd{margin:0;font-size:13.5px;color:var(--main-text);font-weight:600;}

/* ── 폼 오류 메시지 (색상만으로 구분하지 않도록 아이콘/텍스트 병행) ── */
.hi-field-error{
  margin-top:6px;font-size:12.5px;color:#B3261E;display:none;align-items:center;gap:4px;
}
.hi-field-error.show{display:flex;}
.hi-field-error::before{content:"⚠";}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important;}
}

/* ── 진행 절차 (아이콘 기반) 공용 컴포넌트 ──
   assessment.html / hi-everyday.html / in-person.html의 "진행 절차" 섹션과
   education.html의 "신청 절차" 섹션에서 공통으로 사용합니다.
   각 단계 카드 사이에는 순서를 보여주는 화살표(.ps-arrow)를, 4개+3개처럼 줄이 바뀌는
   지점에는 살짝 다른 형태의 줄바꿈 연결 표시(.ps-row-connector)를 둡니다. 화살표는 모두
   장식용(aria-hidden)이며, 단계 제목과 순서는 HTML에 적힌 순서 그대로 화면낭독기에 전달됩니다. */
.progress-steps{margin-top:28px;display:flex;flex-direction:column;gap:6px;}
.ps-row{display:flex;align-items:stretch;justify-content:center;gap:2px;flex-wrap:nowrap;}
.progress-step{
  border:1px solid var(--border);border-radius:var(--radius);background:var(--background);
  padding:22px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  flex:1 1 0;min-width:0;
}
.progress-step .ps-icon{width:48px;height:48px;object-fit:contain;flex-shrink:0;}
.progress-step .ps-num{font-size:12px;font-weight:700;color:var(--main-blue);letter-spacing:0.04em;}
.progress-step .ps-title{font-size:14.5px;font-weight:700;color:var(--main-text);line-height:1.4;margin:0;}
.progress-step .ps-desc{font-size:12.5px;color:var(--sub-text);line-height:1.6;margin:0;}

.ps-arrow{flex:0 0 28px;display:flex;align-items:center;justify-content:center;color:var(--main-blue);}
.ps-arrow svg{display:block;}
.ps-arrow .arrow-v{display:none;}

.ps-row-connector{display:flex;align-items:center;justify-content:center;gap:6px;padding:2px 0;color:var(--main-blue);}
.ps-row-connector svg{display:block;flex-shrink:0;}
.ps-row-connector .connector-label{font-size:11.5px;font-weight:700;letter-spacing:0.02em;}

@media(max-width:900px){
  .ps-row{flex-wrap:wrap;}
  .progress-step{flex:1 1 30%;min-width:150px;}
}
@media(max-width:640px){
  .progress-steps{gap:0;}
  .ps-row{flex-direction:column;gap:0;}
  .progress-step{flex:1 1 auto;min-width:0;padding:18px 16px;}
  .ps-arrow{flex:0 0 auto;width:100%;padding:8px 0;}
  .ps-arrow .arrow-h{display:none;}
  .ps-arrow .arrow-v{display:block;}
  .ps-row-connector{padding:8px 0;}
}

@media (prefers-reduced-motion: reduce){
  .ps-arrow, .ps-row-connector{transition:none;animation:none;}
}