/* ========== DEVHIVE · 데브하이브 공통 스타일 (매거진형) ========== */
/* 레퍼런스: 요즘IT(yozm.wishket.com/magazine) 구조 1:1, 컬러/폰트만 교체 */

/* --- 토큰 --- */
:root{
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --gutter:40px;
  --container:1208px;
  --hdr-util:36px; --hdr-main:68px; --hdr-cat:48px; --header-h:152px;
  --sec-pad:96px; --sec-title-gap:48px;
  --box-pad:24px;
  --icon:24px;
  --r-1:6px; --r-2:10px; --r-3:14px; --r-4:20px;

  /* 색 토큰 · 기본(밝은 배경) 세트 */
  --brand:#2440D9; --brand-dark:#1A2FA6; --brand-soft:#EEF1FE;
  --accent:#E11D48; --accent-soft:#FFE9EE;
  --bg:#FFFFFF; --bg-soft:#F4F6FA; --bg-dark:#101322;
  --text:#14171F; --text-sub:#5A6172; --text-mute:#5A6172;
  --line:#E3E7EF;          /* 장식용 카드 테두리 */
  --line-strong:#808799;   /* 의미 있는 구분선 · 입력 테두리 (대비 3:1+) */
  --icon-color:#14171F;
  --link:#1A2FA6;
  --focus:#14171F;
  --shadow:0 1px 2px rgba(16,19,34,.06), 0 8px 24px rgba(16,19,34,.06);
  --font:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (max-width:1023px){ :root{ --gutter:28px; --sec-pad:72px; --sec-title-gap:32px; --hdr-main:60px; --hdr-cat:44px; --header-h:140px; } }
@media (max-width:767px){ :root{ --gutter:20px; --sec-pad:56px; --sec-title-gap:24px; --box-pad:16px; } }
@media (max-width:479px){ :root{ --gutter:16px; --sec-pad:40px; --hdr-util:32px; --hdr-main:56px; --hdr-cat:42px; --header-h:130px; } }

/* --- 리셋 --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.7;color:var(--text);background:var(--bg);
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img,video,iframe,svg,table{max-width:100%}
img{height:auto;display:block}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.5;font-weight:700;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none !important}
.num{font-variant-numeric:tabular-nums}

/* --- 레이아웃 --- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sec{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad)}
.sec--soft{background:var(--bg-soft)}
.sec--dark{background:var(--bg-dark);
  --text:#FFFFFF; --text-sub:#C6CCDC; --text-mute:#C6CCDC; --line:#39405A; --line-strong:#9AA3BC;
  --icon-color:#FFFFFF; --link:#AFC0FF; --focus:#FFFFFF; --brand-soft:#232846;
  color:#FFFFFF}
.sec--accent{background:var(--brand);
  --text:#FFFFFF; --text-sub:#DCE2FF; --text-mute:#DCE2FF; --line:#5C72E6; --line-strong:#A3B4FF;
  --icon-color:#FFFFFF; --link:#FFFFFF; --focus:#FFFFFF;
  color:#FFFFFF}
.sec--tint{background:var(--brand-soft)}
.grid{display:grid;gap:var(--s-5)}
.grid>*{min-width:0}
.flex{display:flex}
.flex>*{min-width:0}

/* --- 섹션 타이틀 --- */
.sec-head{margin-bottom:var(--sec-title-gap);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.sec-head__tt{font-size:30px;line-height:1.5;text-align:left}
.sec-head__desc{margin-top:var(--s-3);font-size:16px;color:var(--text-sub);text-align:left;max-width:56ch}
.sec-head__more{font-size:15px;color:var(--link);display:inline-flex;align-items:center;gap:var(--s-2);white-space:nowrap}
@media (max-width:767px){ .sec-head__tt{font-size:24px} }

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

/* --- 버튼 --- */
.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(--r-1);font-weight:700;cursor:pointer;
  height:44px;padding-left:20px;padding-right:20px;font-size:15px;
  background:var(--brand);color:#fff;transition:background .2s ease,color .2s ease,border-color .2s ease}
.btn .icon{--icon:20px;color:currentColor}
.btn--sm{height:38px;padding-left:16px;padding-right:16px;font-size:14px}
.btn--lg{height:52px;padding-left:28px;padding-right:28px;font-size:16px}
.btn--ghost{background:#fff;color:var(--brand-dark);border-color:var(--line-strong)}
.btn--line{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn--dark{background:var(--text);color:#fff}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{background:#E6E9F2;color:#5A6172;border-color:var(--line-strong);cursor:not-allowed}
@media (hover:hover){
  .btn:hover{background:var(--brand-dark);color:#fff}
  .btn--ghost:hover{background:var(--brand-soft);color:var(--brand-dark);border-color:var(--brand-dark)}
  .btn--line:hover{background:var(--bg-soft);color:var(--text);border-color:var(--text)}
  .btn--dark:hover{background:#000;color:#fff}
}
.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(--line-strong);border-radius:var(--r-1);background:#fff;color:var(--text)}
.btn-icon .icon{--icon:20px}
@media (hover:hover){ .btn-icon:hover{background:var(--bg-soft)} }

/* --- 칩 · 배지 --- */
.chip{display:inline-flex;align-items:center;gap:var(--s-2);height:38px;padding:0 16px;border-radius:999px;
  border:1px solid var(--line-strong);background:#fff;color:var(--text-sub);font-size:14px;font-weight:600;line-height:1;white-space:nowrap}
.chip[aria-selected="true"],.chip.is-on{background:var(--text);color:#fff;border-color:var(--text)}
@media (hover:hover){ .chip:hover{border-color:var(--text);color:var(--text)} .chip.is-on:hover{color:#fff} }
.badge{display:inline-flex;align-items:center;gap:var(--s-1);height:26px;padding:0 10px;border-radius:999px;
  font-size:13px;font-weight:700;line-height:1;background:var(--brand-soft);color:var(--brand-dark);white-space:nowrap}
.badge--accent{background:var(--accent);color:#fff}
.badge--dark{background:rgba(16,19,34,.82);color:#fff}
.badge--soft{background:#E6E9F2;color:#41485C}

/* --- 헤더 --- */
.hdr{position:fixed;top:0;left:0;width:100%;z-index:60;background:#fff;box-shadow:0 1px 12px rgba(0,0,0,.10)}
.hdr__util{height:var(--hdr-util);background:var(--bg-soft)}
.hdr__util .container{height:100%;display:flex;align-items:center;gap:var(--s-5)}
.hdr__util a:not(.btn):not(.chip):not(.badge){font-size:13px;color:var(--text-sub);display:inline-flex;align-items:center;gap:var(--s-2)}
.hdr__util a:not(.btn):not(.chip):not(.badge) .icon{--icon:16px;color:var(--text-sub)}
@media (hover:hover){ .hdr__util a:not(.btn):hover{color:var(--text)} }
.hdr-inner{height:var(--hdr-main);display:flex;align-items:center;gap:var(--s-6)}
.logo{display:inline-flex;align-items:center;flex:0 0 auto}
.logo svg{display:block;height:28px;width:auto}
.gnb{display:flex;align-items:center;gap:var(--s-5)}
.gnb a:not(.btn):not(.chip):not(.badge){font-size:16px;font-weight:700;color:var(--text);padding:var(--s-2) 0;display:inline-block}
.gnb a.is-active{color:var(--brand)}
@media (hover:hover){ .gnb a:not(.btn):hover{color:var(--brand)} }
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:var(--s-4)}
.hdr-right a:not(.btn):not(.chip):not(.badge){font-size:14px;color:var(--text-sub);font-weight:600}
@media (hover:hover){ .hdr-right a:not(.btn):hover{color:var(--text)} }
.hdr-right .sep{width:1px;height:16px;background:var(--line-strong)}
.hdr__cat{height:var(--hdr-cat);border-top:1px solid var(--line-strong)}
.hdr__cat .container{height:100%;display:flex;align-items:center;gap:var(--s-5);overflow-x:auto;scrollbar-width:none}
.hdr__cat .container::-webkit-scrollbar{display:none}
.hdr__cat a:not(.btn):not(.chip):not(.badge){font-size:15px;font-weight:600;color:var(--text-sub);white-space:nowrap}
.hdr__cat a.is-active{color:var(--text);font-weight:700}
@media (hover:hover){ .hdr__cat a:not(.btn):hover{color:var(--text)} }
.hdr__cat .sep{width:1px;height:14px;background:var(--line-strong);flex:0 0 auto}
.burger{display:none}
body{padding-top:var(--header-h)}
[id]{scroll-margin-top:calc(var(--header-h) + var(--s-4))}
@media (max-width:1023px){
  .gnb{display:none}
  .hdr-right .desk-only{display:none}
  .burger{display:inline-flex}
}

/* --- 모바일 드로어 --- */
.mmenu{position:fixed;inset:0;z-index:80}
.mmenu__dim{position:absolute;inset:0;background:rgba(16,19,34,.5)}
.mmenu__panel{position:absolute;top:0;right:0;height:100%;width:min(320px,86vw);background:#fff;display:flex;flex-direction:column;overflow-y:auto}
.mmenu__top{height:64px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding-left:var(--s-5);padding-right:var(--s-5);border-bottom:1px solid var(--line-strong)}
.mmenu__top .logo svg{height:24px}
.mmenu__body{padding:var(--s-4) var(--s-5) 0}
.mmenu__body a:not(.btn):not(.chip):not(.badge){display:block;min-height:52px;line-height:52px;font-size:17px;font-weight:700;
  color:var(--text);border-bottom:1px solid var(--line-strong)}
.mmenu__body a.is-active:not(.btn){color:var(--brand)}
.mmenu__sub{margin-top:var(--s-6);padding:0 var(--s-5)}
.mmenu__subtt{font-size:13px;font-weight:700;color:var(--text-sub);letter-spacing:.04em;
  padding-top:var(--s-4);border-top:1px solid var(--line-strong)}
.mmenu__sub a:not(.btn):not(.chip):not(.badge){display:block;min-height:44px;line-height:44px;font-size:15px;font-weight:600;color:var(--text-sub)}
.mmenu__act{margin-top:auto;padding:var(--s-5);border-top:1px solid var(--line-strong);display:flex;flex-direction:column;gap:var(--s-3)}
.mmenu__act a.btn,.mmenu__act .btn{width:100%;height:48px;padding-left:24px;padding-right:24px;font-size:15px}
.mmenu__hours{font-size:13px;color:var(--text-sub);text-align:center}
body.is-locked{overflow:hidden}

/* --- 서브 히어로 --- */
.subhero{background:var(--bg-soft);padding-top:var(--s-8);padding-bottom:var(--s-8)}
.subhero__tt{font-size:36px;line-height:1.5;text-align:left}
.subhero__desc{margin-top:var(--s-3);font-size:16px;color:var(--text-sub);max-width:56ch;text-align:left}
.crumb{display:flex;align-items:center;gap:var(--s-2);font-size:13px;color:var(--text-sub);margin-bottom:var(--s-3);flex-wrap:wrap}
.crumb .icon{--icon:16px;color:var(--text-sub)}
@media (max-width:767px){ .subhero{padding-top:var(--s-7);padding-bottom:var(--s-7)} .subhero__tt{font-size:26px} }

/* --- 카드 (박스형: 흰 배경 + 테두리 + 그림자) --- */
.card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-3);box-shadow:var(--shadow);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
@media (hover:hover){ .card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(16,19,34,.08),0 14px 34px rgba(16,19,34,.12)} }
.card__thumb{position:relative;aspect-ratio:16/10;background:var(--bg-soft);overflow:hidden}
.card__thumb img{width:100%;height:100%;object-fit:cover}
.card__thumb .badge{position:absolute;left:12px;top:12px;z-index:2}
.card__body{flex:1;display:flex;flex-direction:column;padding:var(--box-pad)}
.card__meta{display:flex;align-items:center;gap:var(--s-2);font-size:13px;color:var(--text-sub);text-align:left}
.card__tt{margin-top:var(--s-3);font-size:18px;line-height:1.5;text-align:left;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2lh}
.card__desc{margin-top:var(--s-3);font-size:15px;line-height:1.7;color:var(--text-sub);text-align:left;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card__foot{margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);font-size:13px;color:var(--text-sub)}
.card__stats{display:flex;align-items:center;gap:var(--s-4)}
.card__stats span{display:inline-flex;align-items:center;gap:var(--s-1)}
.card__stats .icon{--icon:16px;color:var(--text-sub)}
.card__author{display:inline-flex;align-items:center;gap:var(--s-2);min-width:0}
.card__author img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.card__author span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 카드 그리드 4→3→2→1 */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5)}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1200px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:1023px){ .cards--3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:767px){ .cards,.cards--3,.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:479px){ .cards,.cards--3,.cards--2{grid-template-columns:minmax(0,1fr)} }

/* 가로형 소형 카드 (텍스트 좌 · 썸네일 우) */
.hcard{display:flex;gap:var(--s-4);align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-3);box-shadow:var(--shadow);padding:var(--box-pad);height:100%}
.hcard__txt{flex:1;min-width:0;display:flex;flex-direction:column}
.hcard__tt{font-size:17px;line-height:1.5;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2lh}
.hcard__meta{margin-top:var(--s-3);font-size:13px;color:var(--text-sub);text-align:left}
.hcard__foot{margin-top:auto;padding-top:var(--s-5);display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.hcard__thumb{width:96px;flex:0 0 auto;aspect-ratio:1/1;border-radius:var(--r-2);overflow:hidden;background:var(--bg-soft)}
.hcard__thumb img{width:100%;height:100%;object-fit:cover}
@media (hover:hover){ .hcard:hover{border-color:var(--line-strong)} }

/* --- 진행률 --- */
.prog{display:block}
.prog__bar{display:block;height:8px;border-radius:999px;background:#E0E4EE;overflow:hidden;border:1px solid var(--line-strong)}
.prog__fill{display:block;height:100%;background:var(--brand);border-radius:999px}
.prog__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);font-size:13px;color:var(--text-sub);margin-bottom:var(--s-2)}
.prog__pct{font-weight:700;color:var(--brand-dark)}

/* --- 패널 · 박스 --- */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--shadow);padding:var(--box-pad)}
.panel--flat{box-shadow:none}
.panel__tt{font-size:18px;line-height:1.5;text-align:left;margin-bottom:var(--s-5)}
.notebox{background:var(--brand-soft);border:1px solid var(--line);border-radius:var(--r-3);padding:var(--box-pad)}
.notebox p{font-size:15px;line-height:1.7;color:var(--text)}

/* --- 표 --- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;min-width:640px;background:#fff}
.tbl th,.tbl td{padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line-strong);text-align:left;font-size:15px;line-height:1.7}
.tbl th{background:var(--bg-soft);font-weight:700;white-space:nowrap}
.tbl td.num{font-variant-numeric:tabular-nums}
.tbl a:not(.btn):not(.chip):not(.badge){color:var(--link);font-weight:600}
.tbl-hint{margin-top:var(--s-3);font-size:13px;color:var(--text-sub)}

/* --- 폼 --- */
.form-row{margin-bottom:var(--s-4)}
.form-row>label,.form-lab{display:block;font-size:14px;font-weight:700;margin-bottom:var(--s-2);text-align:left}
.form-lab .req{color:var(--accent);margin-left:2px}
.inp,select.inp,textarea.inp{width:100%;height:48px;padding:0 var(--s-4);border:1px solid var(--line-strong);
  border-radius:var(--r-1);background:#fff;font-size:15px;line-height:1.5}
textarea.inp{height:auto;min-height:140px;padding-top:var(--s-3);padding-bottom:var(--s-3);line-height:1.7;resize:vertical}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235A6172' stroke-width='1.75'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:42px}
.inp::placeholder{color:#5A6172}
.inp:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--text)}
.err{display:block;font-size:12px;margin-top:var(--s-1);color:#B4123A;min-height:0}
.inp.is-err{border-color:#B4123A}
.check{display:flex;align-items:center;gap:var(--s-2);min-height:38px}
.check input[type=checkbox],.check input[type=radio]{width:20px;height:20px;flex:0 0 auto;margin:0;accent-color:var(--brand)}
.check label{font-size:15px;line-height:1.5;text-align:left}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s-4)}
@media (max-width:767px){
  .inp,select.inp{height:44px}
  .form-grid{grid-template-columns:minmax(0,1fr)}
}
.chk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
@media (max-width:767px){ .chk-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:479px){ .chk-grid{grid-template-columns:minmax(0,1fr)} }

/* --- 스텝 인디케이터 --- */
.steps{display:flex;gap:var(--s-2);margin-bottom:var(--s-7)}
.step{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:var(--s-2);min-width:0}
.step__n{width:32px;height:32px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:#E6E9F2;color:#41485C;font-size:14px;font-weight:700;line-height:1;border:1px solid var(--line-strong)}
.step.is-on .step__n{background:var(--brand);color:#fff;border-color:var(--brand)}
.step.is-done .step__n{background:var(--text);color:#fff;border-color:var(--text)}
.step__t{font-size:13px;color:var(--text-sub);text-align:center;white-space:nowrap}
.step.is-on .step__t{color:var(--text);font-weight:700}
@media (max-width:479px){ .step__n{width:28px;height:28px;font-size:13px} .step__t{display:none} }

/* --- 달력 --- */
.cal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4)}
.cal__mon{font-size:17px;font-weight:700}
.cal__dow,.cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s-1)}
.cal__dow span{text-align:center;font-size:13px;color:var(--text-sub);padding-bottom:var(--s-2)}
.cal-day{min-height:40px;height:40px;border-radius:var(--r-1);border:1px solid transparent;background:#fff;
  font-size:14px;font-variant-numeric:tabular-nums;color:var(--text);display:flex;align-items:center;justify-content:center}
.cal-day[disabled]{color:#5A6172;background:var(--bg-soft);border-color:var(--line);cursor:not-allowed}
.cal-day.is-sel{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:700}
.cal-day--pad{visibility:hidden}
@media (hover:hover){ .cal-day:not([disabled]):hover{border-color:var(--text)} .cal-day.is-sel:hover{background:var(--brand-dark)} }
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
@media (min-width:480px){ .slots{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:768px){ .slots{grid-template-columns:repeat(4,minmax(0,1fr))} }
.slot{height:44px;border-radius:var(--r-1);border:1px solid var(--line-strong);background:#fff;
  font-size:14px;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;gap:var(--s-1)}
.slot[disabled]{color:#5A6172;background:var(--bg-soft);border-color:var(--line);cursor:not-allowed;text-decoration:line-through}
.slot.is-sel{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:700}
@media (hover:hover){ .slot:not([disabled]):hover{border-color:var(--text)} .slot.is-sel:hover{background:var(--brand-dark)} }

/* --- 아코디언 --- */
.acc{border-top:1px solid var(--line-strong)}
.acc__item{border-bottom:1px solid var(--line-strong)}
.acc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-5) 0;min-height:52px;text-align:left;font-size:17px;font-weight:700;line-height:1.5}
.acc__btn .icon{--icon:24px;transition:transform .2s ease}
.acc__item.is-open .acc__btn .icon{transform:rotate(180deg)}
.acc__panel{padding:0 0 var(--s-5);font-size:15px;line-height:1.7;color:var(--text-sub);max-width:80ch}

/* --- 페이지네이션 --- */
.pager{display:flex;align-items:center;justify-content:center;gap:var(--s-2);margin-top:var(--s-7);flex-wrap:wrap}
.pager button,.pager a:not(.btn){min-width:40px;height:40px;padding:0 var(--s-3);border-radius:var(--r-1);
  border:1px solid var(--line-strong);background:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-variant-numeric:tabular-nums;color:var(--text)}
.pager .is-on{background:var(--text);color:#fff;border-color:var(--text);font-weight:700}
.pager [disabled]{color:#5A6172;background:var(--bg-soft);cursor:not-allowed}
@media (hover:hover){ .pager button:not([disabled]):not(.is-on):hover{background:var(--bg-soft)} }

/* --- 본문(prose) --- */
.prose{font-size:17px;line-height:1.85;color:var(--text);max-width:80ch}
.prose p{margin-bottom:var(--s-5)}
.prose h2{font-size:24px;margin:var(--s-8) 0 var(--s-4)}
.prose h3{font-size:19px;margin:var(--s-7) 0 var(--s-3)}
.prose ul{margin:0 0 var(--s-5);padding-left:var(--s-5);list-style:disc}
.prose ol{margin:0 0 var(--s-5);padding-left:var(--s-5);list-style:decimal}
.prose li{margin-bottom:var(--s-2)}
.prose a:not(.btn):not(.chip):not(.badge){color:var(--link);text-decoration:underline;overflow-wrap:anywhere}
.prose img{border-radius:var(--r-3);margin-bottom:var(--s-5)}
.prose blockquote{margin:0 0 var(--s-5);padding:var(--box-pad);background:var(--bg-soft);
  border-left:4px solid var(--brand);border-radius:0 var(--r-2) var(--r-2) 0;color:var(--text)}

/* --- 푸터 --- */
.ftr{background:var(--bg-soft)}
.ftr__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;
  padding:var(--s-5) 0;border-bottom:1px solid var(--line-strong)}
.ftr__sns{display:flex;gap:var(--s-2)}
.ftr__sns a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;background:#fff}
.ftr__sns .icon{--icon:20px;color:var(--text-sub)}
@media (hover:hover){ .ftr__sns a:hover{border-color:var(--text)} .ftr__sns a:hover .icon{color:var(--text)} }
.ftr__main{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s-6);padding:var(--s-8) 0 var(--s-7)}
.ftr__tt{font-size:15px;font-weight:700;margin-bottom:var(--s-4);text-align:left}
.ftr__tel{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:var(--s-2)}
.ftr__hours{margin-top:var(--s-3);font-size:14px;color:var(--text-sub)}
.ftr__mail{margin-top:var(--s-2);font-size:14px;color:var(--text-sub);overflow-wrap:anywhere;display:inline-block}
.ftr__main li{margin-bottom:var(--s-3)}
.ftr__main a:not(.btn):not(.chip):not(.badge){font-size:14px;color:var(--text-sub)}
@media (hover:hover){ .ftr__main a:not(.btn):hover{color:var(--text)} }
.ftr__legal{padding:var(--s-5) 0 var(--s-8);border-top:1px solid var(--line-strong)}
.ftr__links{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-4)}
.ftr__links a:not(.btn){font-size:14px;font-weight:600}
.ftr__info{font-size:13px;line-height:1.8;color:var(--text-sub);text-align:left}
.ftr__copy{margin-top:var(--s-3);font-size:13px;color:var(--text-sub)}
.ftr__license{margin-top:var(--s-3);font-size:12px;color:var(--text-sub)}
@media (max-width:1023px){ .ftr__main{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6)} }
@media (max-width:479px){ .ftr__main{grid-template-columns:minmax(0,1fr)} .ftr__tel{font-size:22px} }

/* --- 맨 위로 --- */
.totop{position:fixed;right:20px;bottom:20px;z-index:50;width:48px;height:48px;border-radius:50%;
  background:#fff;border:1px solid var(--line-strong);box-shadow:var(--shadow);
  display:inline-flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s ease}
.totop.is-on{opacity:1;visibility:visible}
.totop .icon{--icon:24px;color:var(--text)}
@media (hover:hover){ .totop:hover{background:var(--bg-soft)} }

/* --- 스크롤 등장 --- */
.rv{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.rv.is-hidden{opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){ .rv,.rv.is-hidden{opacity:1 !important;transform:none !important;transition:none} }

/* --- 유틸 --- */
.mt-5{margin-top:var(--s-5)}
.mt-6{margin-top:var(--s-6)}
.mt-7{margin-top:var(--s-7)}
.lead{font-size:17px;line-height:1.8;color:var(--text-sub);max-width:56ch}

/* --- 로고 --- */
.logo{gap:var(--s-2)}
.logo__mark{width:28px;height:28px;flex:0 0 auto;display:block}
.logo__wm{font-size:19px;font-weight:800;letter-spacing:.14em;line-height:1;color:var(--text)}
.logo__kr{font-size:12px;font-weight:700;letter-spacing:-.045em;line-height:1;color:var(--text-sub);
  padding-left:var(--s-2);margin-left:var(--s-1);border-left:1px solid var(--line-strong)}
.ftr .logo__wm{font-size:17px}
@media (max-width:479px){ .logo__kr{display:none} .logo__wm{font-size:17px} }

/* --- 헤더 폭 대응 --- */
.hdr__util .container{overflow-x:auto;scrollbar-width:none}
.hdr__util .container::-webkit-scrollbar{display:none}
.hdr__util a:not(.btn):not(.chip):not(.badge){white-space:nowrap;flex:0 0 auto}
.hdr__cat a:not(.btn):not(.chip):not(.badge){flex:0 0 auto}
.logo,.gnb,.hdr-right{min-width:0}
@media (max-width:1279px){
  .hdr-right .desk-only{display:none}
  .gnb{gap:var(--s-4)}
  .hdr-inner{gap:var(--s-5)}
}
@media (max-width:767px){
  .hdr-right>.btn{display:none}
}
@media (max-width:479px){
  .hdr-inner{gap:var(--s-4)}
  .hdr-right{gap:var(--s-2)}
}
.mmenu__body a:not(.btn):not(.chip):not(.badge):last-child{border-bottom:0}