/* 사내 포털 — 공개 묶음(로그인 · 가입 · 승인 대기 · 비밀번호). 메뉴 · 화면 이름 · 내부 데이터를 담지 않는다.
   색 · 치수: 재원님 시안(homepage/시안/DANA_홈페이지 V1.html — 화이트 60 · 블랙 30 · CI 네이비 10) 값을 그대로 옮겼다.
   이것은 「브랜드 컬러」 정본이 아니다 — 12월 정본 확정 때 design-system/DESIGN.md 에서 생성하는 경로로 바꾼다(디자인팀 소관). */
:root{
  --ink:#111111; --ink-2:#4D4D4D; --ink-3:#666666; --ink-4:#7D7D7D; --ink-5:#9E9E9E;
  --line:#EBEBEB; --line-2:#E0E0E0; --line-3:#C8C8C8; --line-4:#F0F0F0;
  --surface:#F5F5F5; --bg:#FFFFFF;
  --point:#233580; --point-hover:#1C2B68;
  --danger:#B42318; --danger-bg:#FDECEC; --warn:#8A5A00; --warn-bg:#FFF4DC;
  --r-12:12px; --r-24:24px; --pill:999px;
  --font:'Pretendard Variable',Pretendard,'Noto Sans KR',-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}
a{color:var(--ink)}
input,select,button,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--point);outline-offset: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}
.skip{position:absolute;left:-9999px;top:0}.skip:focus{left:16px;top:16px;z-index:100;background:#fff;padding:0 16px;min-height:44px;display:inline-flex;align-items:center}

/* 머리줄 */
.hdr{height:72px;padding:0 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#fff}
.logo{display:flex;align-items:center;min-height:44px;width:140px}
.logo img{height:30px;width:auto;display:block}
.hdr-date{font-size:14px;color:var(--ink-3)}
.link-strong{font-size:15px;font-weight:700;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.link-strong.sm{font-size:14px;font-weight:600}
.link-strong:hover{text-decoration:underline}
.link-point{font-size:16px;font-weight:700;color:var(--point);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.link-point:hover{color:var(--point-hover);text-decoration:underline}
.link-plain{font-size:14px;color:var(--ink-2);display:inline-flex;align-items:center;min-height:44px}
.btn-link{background:none;border:0;padding:0;cursor:pointer}

/* 글자 */
.h-xl{margin:0;font-size:44px;font-weight:700;letter-spacing:-0.04em;line-height:1.2;word-break:keep-all}
.h-xl .count{font-weight:400;color:var(--ink-3)}
.h-lg{margin:0;font-size:40px;font-weight:700;letter-spacing:-0.04em;line-height:1.2;word-break:keep-all}
.h-md{margin:0;font-size:32px;font-weight:700;letter-spacing:-0.04em}
.h-sec{margin:0;font-size:26px;font-weight:700;letter-spacing:-0.03em;line-height:1.4}
.lead{margin:0;font-size:20px;font-weight:700;letter-spacing:-0.02em}
.body-1{margin:0;font-size:16px;color:var(--ink-2)}
.body-2{margin:0;font-size:16px;line-height:1.7;color:var(--ink-2)}
.body-3{font-size:14px;color:var(--ink-2)}

/* 배치 */
.wrap{width:1120px;max-width:calc(100% - 48px);margin:0 auto}
.wrap-760{width:760px;max-width:calc(100% - 48px);margin:0 auto}
.hero{padding:120px 24px 0;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.hero-text{display:flex;flex-direction:column;gap:8px}
.pad-top-28{padding-top:28px}.pad-top-64{padding-top:64px}.pad-top-80{padding-top:80px}.pad-top-120{padding-top:120px}
.pad-bottom-140{padding-bottom:140px}.pad-bottom{height:140px}.pad-y-24{padding:24px 0}
.mb-28{margin-bottom:28px}.mt-16{margin-top:16px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:16px}
.stack-18{display:flex;flex-direction:column;gap:18px}
.btn-row{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;justify-content:center}
.btn-row.left{justify-content:flex-start}
.link-row{display:flex;gap:32px;margin-top:16px;flex-wrap:wrap;justify-content:center}
.rule-2{height:2px;background:var(--ink)}
.center{text-align:center}

/* 로그인 (시안 3a) */
.login-grid{padding-top:80px;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:80px;align-items:start}
.login-visual{display:flex;flex-direction:column;gap:28px}
.visual-slot{height:440px;border-radius:var(--r-24);background:var(--surface)}
.visual-text{display:flex;flex-direction:column;gap:12px}
.login-panel{display:flex;flex-direction:column;gap:32px;padding-top:8px}
.panel-foot{padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}

/* 폼 */
.field{display:flex;flex-direction:column;gap:10px;font-size:14px;font-weight:700;color:var(--ink)}
.field input,.field select,.search input{height:52px;padding:0 18px;border:1px solid var(--line-2);border-radius:var(--r-12);background:#fff;font-size:15px;font-weight:400;color:var(--ink);width:100%}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-4) 50%),linear-gradient(135deg,var(--ink-4) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:44px}
.field input:focus,.field select:focus,.search input:focus{outline:none;border:1.5px solid var(--ink)}
.field input[aria-invalid="true"]{border:1.5px solid var(--danger)}
.field-err{font-size:13px;font-weight:600;color:var(--danger)}
.form-card{padding:40px;border-radius:var(--r-24);background:var(--surface)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px}
.grid-2.gap-32{gap:32px 24px}
.span-2{grid-column:1/-1}
.form-actions{padding:32px 0 140px;display:flex;justify-content:flex-end}

/* 체크 — 줄 전체가 누르는 영역(44px) */
.check{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--ink-2);cursor:pointer;position:relative}
.check.strong{font-weight:600;color:var(--ink)}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check .box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-3);background:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.check input:checked + .box{background:var(--ink);border-color:var(--ink)}
.check input:checked + .box::after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.check input:focus-visible + .box{outline:2px solid var(--point);outline-offset:2px}

/* 버튼 */
.btn-primary{height:56px;padding:0 32px;border:0;border-radius:var(--pill);background:var(--point);color:#fff;font-size:16px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.btn-primary:hover{background:var(--point-hover)}
.login-panel .btn-primary{margin-top:4px}
.btn-outline{height:56px;padding:0 32px;border:0;border-radius:var(--pill);background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-3);font-size:16px;font-weight:700;cursor:pointer;transition:background-color .2s,color .2s;display:inline-flex;align-items:center;text-decoration:none}
.btn-outline:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.btn-sm{height:48px;padding:0 22px;border:1px solid var(--line-3);border-radius:var(--pill);background:#fff;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;text-decoration:none}
.btn-sm:hover{border-color:var(--ink)}
.btn-sm.danger{color:var(--danger)}
button[disabled]{opacity:.6;cursor:progress}

/* 알림 상자 */
.alert-danger{margin:0;padding:12px 14px;border-radius:var(--r-12);background:var(--danger-bg);color:var(--danger);font-size:13px;font-weight:600;line-height:1.5}
.alert-info{margin:0;padding:12px 14px;border-radius:var(--r-12);background:var(--surface);color:var(--ink);font-size:13px;font-weight:600}
.badge-status{height:30px;padding:0 14px;border-radius:var(--pill);font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.badge-status.sm{height:28px;padding:0 12px}
.badge-status .dot{width:6px;height:6px;border-radius:var(--pill);background:currentColor}
.badge-status.warn{background:var(--warn-bg);color:var(--warn)}
.badge-status.danger{background:var(--danger-bg);color:var(--danger)}
.badge-status.ok{background:var(--surface);color:var(--ink)}
.badge-status.muted{background:var(--line);color:var(--ink-3)}

/* 단계 (시안 3b · 3c) */
.pill{align-self:flex-start;height:24px;padding:0 10px;border-radius:var(--pill);background:var(--line);color:var(--ink-3);font-size:12px;font-weight:700;letter-spacing:0.04em;display:inline-flex;align-items:center;white-space:nowrap}
.steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.steps3 li{padding:20px 0;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--ink-3)}
.steps3 li.on{color:var(--ink)}.steps3 li.on .pill{background:var(--ink);color:#fff}
.signup{padding-top:80px}
.signup-foot{padding:32px 0 140px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.consents{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.consent-body summary{font-size:13px;color:var(--ink-3);cursor:pointer;min-height:44px;display:inline-flex;align-items:center;padding-left:26px}
.consent-body .doc{margin:8px 0 12px;padding:20px;border-radius:var(--r-12);background:var(--surface);font-size:13px;line-height:1.7;color:var(--ink-2);max-height:320px;overflow:auto}
.consent-body .doc p{margin:0 0 8px}.consent-body .doc .doc-h{margin:16px 0 8px;font-size:14px;font-weight:700;color:var(--ink)}.consent-body .doc .doc-h:first-child{margin-top:0}.consent-body .doc ul{margin:8px 0;padding-left:18px}
.consent-table{overflow-x:auto}
.consent-body table{border-collapse:collapse;width:100%;margin:8px 0;font-size:12px}
.consent-body th,.consent-body td{border:1px solid var(--line-2);padding:6px 8px;text-align:left;vertical-align:top}
.steps-big{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.steps-big li{padding:40px 32px 0 0;display:flex;flex-direction:column;gap:16px}
.steps-big .t{font-size:18px;font-weight:700}.steps-big .w{font-size:15px;color:var(--ink-2)}
.steps-big .done .pill{background:var(--ink);color:#fff}
.steps-big .cur .pill{background:var(--warn-bg);color:var(--warn)}
.steps-big .todo .t{color:var(--ink-3)}

/* 섹션 머리 · 목록 */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:20px;border-bottom:2px solid var(--ink)}
.sec-meta{font-size:14px;color:var(--ink-3)}
.sec-link{font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.kv{margin:0}
.kv>div{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;padding:24px 0;border-bottom:1px solid var(--line);font-size:16px}
.kv dt{font-weight:700}.kv dd{margin:0;color:var(--ink-2);word-break:keep-all}
.kv.wide>div{padding:28px 0}.kv.wide dd{font-size:15px;line-height:1.7}
.empty{margin:0;padding:24px 0;font-size:15px;color:var(--ink-3)}

/* 좁은 화면 */
@media (max-width: 900px){
  .hdr{padding:0 20px}
  .wrap,.wrap-760{max-width:calc(100% - 40px)}
  .hero{padding-top:64px}
  .h-xl{font-size:32px}.h-lg{font-size:30px}.h-md{font-size:26px}.h-sec{font-size:22px}.lead{font-size:18px}
  .login-grid{grid-template-columns:1fr;gap:40px;padding-top:40px}
  .login-panel{order:-1}
  .visual-slot{height:200px}
  .grid-2{grid-template-columns:1fr}.form-card{padding:24px}
  .signup{padding-top:48px}
  .signup-foot{flex-direction:column;align-items:stretch}
  .signup-foot .btn-outline{justify-content:center}
  .steps3 li{font-size:13px;gap:6px;flex-direction:column;align-items:flex-start}
  .steps-big{grid-template-columns:1fr}.steps-big li{padding:24px 0 0}
  .kv>div{grid-template-columns:1fr;gap:6px}
  .pad-top-120{padding-top:72px}.pad-top-80{padding-top:48px}.pad-bottom-140,.pad-bottom{padding-bottom:80px}
}