/* ==========================================================================
   style.css — 폭염 체감온도 현장 안전기록
   디자인 토큰은 목업(폭염 안전기록 목업.dc.html)의 DESIGN TOKENS 와 1:1 일치
   ========================================================================== */
:root{
  --primary:#4C6EF5; --primary-pressed:#4263EB; --tint:#EEF1FE; --tint2:#F1F4FE; --line-tint:#DCE3FE;
  --ink:#16181D; --body:#3D434D; --muted:#6B7280; --sub:#9AA0AB; --placeholder:#B4B9C2;
  --card:#FFFFFF; --fill:#F4F6FA; --border:#ECEEF3; --input-border:#E4E7EE;
  --r-input:14px; --r-card:18px;
  /* 결과 화면에서 JS가 수준별로 덮어쓰는 변수 */
  --lv-text:#A9760A; --lv-bg:#FBF1D6; --lv-dot:#F2B100; --lv-card-bg:#FDF7E6; --lv-card-border:#F6E6B8;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;color:var(--ink);
  background:#EAecF1;
}
/* 모바일 폭에 맞춘 앱 컨테이너 (데스크톱에선 가운데 정렬) */
#app{
  max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;background:#fff;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
}
@media (min-width:520px){
  body{padding:24px 0;}
  #app{min-height:calc(100vh - 48px);min-height:calc(100dvh - 48px);border-radius:28px;box-shadow:0 18px 50px rgba(16,24,40,.13);overflow:hidden;}
}

/* 화면 전환 */
.screen{display:none;flex-direction:column;flex:1;min-height:0;}
.screen.active{display:flex;}

/* 상단바 (뒤로/제목/스텝칩 + 진행바) */
.topbar{padding:10px 20px 0;flex:none;}
.topbar-row{height:46px;display:flex;align-items:center;gap:8px;}
.topbar-row .title{font:700 17px Pretendard,sans-serif;color:var(--ink);}
.back{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;margin-left:-6px;}
.step-chip{margin-left:auto;background:var(--tint);color:var(--primary);font:700 13px Pretendard,sans-serif;padding:5px 11px;border-radius:999px;}
.progress{height:4px;background:#EAEDF5;border-radius:999px;overflow:hidden;margin-top:2px;}
.progress > i{display:block;height:100%;background:var(--primary);border-radius:999px;transition:width .25s ease;}

/* 본문 / 하단 버튼 영역 */
.content{flex:1;min-height:0;overflow-y:auto;padding:18px 24px 8px;-webkit-overflow-scrolling:touch;}
.bottom{flex:none;padding:12px 22px calc(16px + env(safe-area-inset-bottom));background:#fff;}

/* 타이포 */
h1.display{margin:0;font:800 26px/1.34 Pretendard,sans-serif;letter-spacing:-0.02em;color:var(--ink);}
.lead{margin:12px 0 0;font:500 15px/1.55 Pretendard,sans-serif;color:var(--sub);}
.label{font:600 14px Pretendard,sans-serif;color:var(--muted);}

/* 버튼 */
.btn{width:100%;height:56px;border-radius:999px;border:none;font:700 17px Pretendard,sans-serif;cursor:pointer;}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 10px 22px rgba(76,110,245,.32);}
.btn-primary:active{background:var(--primary-pressed);}
.btn-primary[disabled]{background:#E8EBF1;color:#B4B9C2;box-shadow:none;cursor:not-allowed;}
.btn-secondary{background:#fff;color:var(--ink);border:1px solid var(--input-border);height:54px;}
.btn-ghost{background:none;border:none;color:var(--muted);font:600 14px Pretendard,sans-serif;cursor:pointer;}
.btn-row-gap{margin-top:10px;}
.center-link{text-align:center;margin-top:12px;}
.underline{ text-decoration:underline;text-underline-offset:3px;}

/* 카드 / 칩 */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);}
.loc-chip{margin-top:24px;background:var(--tint2);border:1px solid var(--line-tint);border-radius:18px;padding:15px 16px;display:flex;align-items:center;gap:13px;}
.loc-chip .ico{width:44px;height:44px;border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;}
.loc-chip .cap{font:500 12px Pretendard,sans-serif;color:#7C89B8;}
.loc-chip .name{font:700 18px Pretendard,sans-serif;color:var(--ink);margin-top:2px;letter-spacing:-0.01em;}
.loc-chip .tag{flex:none;background:var(--primary);color:#fff;font:700 11px Pretendard,sans-serif;padding:5px 9px;border-radius:999px;}

.dt-chip{margin-top:11px;background:var(--fill);border-radius:14px;padding:13px 16px;display:flex;align-items:center;gap:11px;}
.dt-chip .k{font:500 13px Pretendard,sans-serif;color:var(--sub);}
.dt-chip .v{font:600 15px Pretendard,sans-serif;color:var(--body);margin-left:7px;}
.dt-chip .edit{margin-left:auto;display:inline-flex;align-items:center;gap:4px;color:var(--primary);font:600 13px Pretendard,sans-serif;background:none;border:none;cursor:pointer;}

/* 진행 안내 (hero) */
.steps{margin-top:16px;display:flex;flex-direction:column;gap:18px;}
.steps .row{display:flex;align-items:center;gap:14px;}
.steps .num{width:26px;height:26px;border-radius:999px;background:var(--tint);color:var(--primary);font:700 13px Pretendard,sans-serif;display:flex;align-items:center;justify-content:center;flex:none;}
.steps .txt{font:500 15px Pretendard,sans-serif;color:var(--body);}
.section-cap{font:600 13px Pretendard,sans-serif;color:#B0B5BD;}

/* 안내 진입 카드 */
.guide-card{margin-top:10px;border:1px solid var(--border);border-radius:16px;padding:14px 15px;display:flex;align-items:center;gap:13px;background:#fff;cursor:pointer;width:100%;text-align:left;}
.guide-card .ico{width:44px;height:44px;border-radius:13px;background:var(--tint);display:flex;align-items:center;justify-content:center;flex:none;}
.guide-card .t{font:700 15px Pretendard,sans-serif;color:var(--ink);}
.guide-card .s{margin-top:5px;font:500 12px Pretendard,sans-serif;color:var(--sub);}

/* 스테퍼 (온도/습도) */
.stepper{margin-top:12px;border:1px solid var(--border);border-radius:18px;padding:15px 16px 17px;}
.stepper:first-of-type{margin-top:22px;}
.stepper .head{display:flex;align-items:center;gap:8px;}
.stepper .head span{font:600 14px Pretendard,sans-serif;color:var(--muted);}
.stepper .ctrl{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.stepper .pm{width:52px;height:52px;border-radius:14px;border:1px solid var(--input-border);background:#F7F8FB;display:flex;align-items:center;justify-content:center;font:600 28px Pretendard,sans-serif;color:var(--primary);cursor:pointer;user-select:none;}
.stepper .pm:active{background:var(--tint);}
.stepper .val{display:flex;align-items:baseline;gap:3px;}
.stepper .val input{width:120px;text-align:center;border:none;outline:none;font:800 40px Pretendard,sans-serif;letter-spacing:-0.02em;color:var(--ink);background:none;}
.stepper .val .unit{font:700 19px Pretendard,sans-serif;color:var(--sub);}

/* 입력 필드 */
.field{margin-top:16px;}
.field .label{display:block;}
.input{margin-top:8px;width:100%;height:54px;border:1px solid var(--input-border);border-radius:14px;padding:0 14px;font:500 16px Pretendard,sans-serif;color:var(--ink);outline:none;background:#fff;}
.input::placeholder{color:var(--placeholder);}
.input:focus{border-color:var(--primary);}
.row2{display:flex;gap:10px;}
.row2 > div{flex:1;min-width:0;}
textarea.input{height:50px;padding-top:14px;resize:none;}

/* 서명 패드 */
.sign-head{display:flex;align-items:center;justify-content:space-between;}
.sign-clear{display:inline-flex;align-items:center;gap:5px;color:var(--primary);font:600 13px Pretendard,sans-serif;background:none;border:none;cursor:pointer;}
.sign-pad{margin-top:8px;height:120px;border:1px solid var(--input-border);border-radius:14px;background:#FBFCFE;position:relative;overflow:hidden;touch-action:none;}
.sign-pad canvas{position:absolute;inset:0;width:100%;height:100%;}
.sign-pad .baseline{position:absolute;left:16px;right:16px;bottom:24px;height:1px;background:#E9ECF1;}
.sign-pad .ph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--placeholder);font:500 14px Pretendard,sans-serif;pointer-events:none;}

/* 결과 화면 */
.result-head{text-align:center;}
.result-head .loc{font:500 13px Pretendard,sans-serif;color:var(--sub);}
.result-head .pre{margin-top:20px;font:600 15px Pretendard,sans-serif;color:var(--muted);}
.bignum{margin-top:2px;font:800 72px/1 Pretendard,sans-serif;letter-spacing:-0.03em;color:var(--lv-text);}
.bignum .u{font-size:32px;vertical-align:top;line-height:1.5;}
.level-badge{margin-top:16px;display:inline-flex;align-items:center;gap:8px;background:var(--lv-bg);color:var(--lv-text);font:700 17px Pretendard,sans-serif;padding:9px 20px;border-radius:999px;}
.level-badge .dot{width:9px;height:9px;border-radius:999px;background:var(--lv-dot);}
.band{margin-top:10px;font:500 13px Pretendard,sans-serif;color:#A9AFB9;}
.stat3{margin-top:22px;background:var(--fill);border-radius:16px;padding:15px 8px;display:flex;align-items:center;}
.stat3 .cell{flex:1;text-align:center;}
.stat3 .cell .k{font:500 12px Pretendard,sans-serif;color:var(--sub);}
.stat3 .cell .v{font:700 17px Pretendard,sans-serif;color:var(--ink);margin-top:5px;}
.stat3 .sep{width:1px;height:30px;background:var(--input-border);}
.actions-card{margin-top:16px;background:var(--lv-card-bg);border:1px solid var(--lv-card-border);border-radius:18px;padding:18px;}
.actions-card .h{display:flex;align-items:center;gap:10px;}
.actions-card .h .ico{width:34px;height:34px;border-radius:11px;background:var(--lv-card-border);display:flex;align-items:center;justify-content:center;}
.actions-card .h .t{font:700 16px Pretendard,sans-serif;color:var(--ink);}
.actions-card ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;}
.actions-card li{display:flex;gap:10px;align-items:flex-start;font:500 15px/1.5 Pretendard,sans-serif;color:var(--body);}
.actions-card li .b{width:6px;height:6px;border-radius:999px;background:var(--lv-dot);margin-top:8px;flex:none;}

/* 조치 체크리스트 */
.checkrow{border:1px solid var(--border);border-radius:16px;padding:16px 15px;display:flex;align-items:center;gap:13px;cursor:pointer;background:#fff;margin-bottom:10px;}
.checkrow .box{width:28px;height:28px;border-radius:9px;border:1.5px solid #D7DBE3;background:#fff;flex:none;display:flex;align-items:center;justify-content:center;}
.checkrow .box svg{display:none;}
.checkrow.on{border-color:var(--primary);background:var(--tint2);}
.checkrow.on .box{background:var(--primary);border-color:var(--primary);}
.checkrow.on .box svg{display:block;}
.checkrow .t{font:600 16px Pretendard,sans-serif;color:var(--body);}
.rest-inline{display:none;align-items:center;gap:8px;margin:-2px 2px 10px;padding-left:2px;}
.rest-inline.show{display:flex;}
.rest-inline input{width:64px;height:40px;border:1px solid var(--input-border);border-radius:10px;text-align:center;font:600 16px Pretendard,sans-serif;outline:none;}
.rest-inline .l{font:500 14px Pretendard,sans-serif;color:var(--muted);}

/* 조치 기록 페이지 — 단계별 휴식·조치 기준(참고 설명) */
.ref-card{margin-top:16px;background:var(--fill);border-radius:14px;padding:14px 16px;}
.ref-title{font:700 13px Pretendard,sans-serif;color:var(--muted);margin-bottom:10px;}
.ref-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
.ref-list li{font:500 13px/1.5 Pretendard,sans-serif;color:var(--body);padding-left:18px;position:relative;}
.ref-list li b{font-weight:700;color:var(--ink);margin-right:2px;}
.ref-dot{position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:999px;}
.ref-note{margin-top:10px;font:500 12px/1.5 Pretendard,sans-serif;color:var(--sub);}

/* 제출 완료 */
.done{flex:1;display:flex;flex-direction:column;align-items:center;padding:30px 28px 0;text-align:center;overflow-y:auto;}
.done .ring{width:96px;height:96px;border-radius:999px;display:flex;align-items:center;justify-content:center;margin-top:10px;}
.done .ring .inner{width:64px;height:64px;border-radius:999px;display:flex;align-items:center;justify-content:center;}
.done h2{margin:24px 0 0;font:800 24px Pretendard,sans-serif;letter-spacing:-0.02em;color:var(--ink);}
.done .desc{margin-top:9px;font:500 15px/1.5 Pretendard,sans-serif;color:var(--sub);}
.status-pill{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font:700 13px Pretendard,sans-serif;padding:7px 14px;border-radius:999px;}
.wait-card{margin-top:18px;width:100%;background:#FDF7E6;border:1px solid #F6E6B8;border-radius:16px;padding:14px 15px;display:flex;align-items:flex-start;gap:11px;text-align:left;}
.summary{margin-top:18px;width:100%;background:var(--fill);border-radius:18px;padding:4px 18px;}
.summary .r{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid #E9ECF1;}
.summary .r:last-child{border-bottom:none;}
.summary .k{font:500 14px Pretendard,sans-serif;color:var(--sub);white-space:nowrap;flex:none;padding-right:14px;}
.summary .v{font:600 15px Pretendard,sans-serif;color:var(--ink);text-align:right;}

/* 최근 기록 */
.daygroup{font:700 13px Pretendard,sans-serif;color:#B0B5BD;margin:6px 2px 10px;}
.rec{border:1px solid var(--border);border-radius:16px;padding:13px 15px;display:flex;align-items:center;gap:13px;margin-bottom:9px;}
.rec .dot{width:10px;height:10px;border-radius:999px;flex:none;}
.rec .main{flex:1;min-width:0;}
.rec .temp{font:700 16px Pretendard,sans-serif;color:var(--ink);}
.rec .temp .lv{font:600 13px Pretendard,sans-serif;margin-left:4px;}
.rec .meta{font:500 12px Pretendard,sans-serif;color:var(--sub);margin-top:3px;}
.rec .send{display:inline-flex;align-items:center;gap:4px;font:600 12px Pretendard,sans-serif;flex:none;}
.empty{text-align:center;color:var(--sub);font:500 14px Pretendard,sans-serif;padding:40px 0;}

/* 토스트 / 안내 페이지 */
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#16181D;color:#fff;font:600 14px Pretendard,sans-serif;padding:11px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;}
.toast.show{opacity:.95;}
.guide-body h3{font:700 16px Pretendard,sans-serif;color:var(--ink);margin:18px 0 8px;}
.guide-body p,.guide-body li{font:500 14px/1.6 Pretendard,sans-serif;color:var(--body);}
/* 단계별 대응요령 카드 */
.lvl-card{border:1px solid var(--border);border-left:4px solid var(--sub);border-radius:14px;padding:14px 16px;margin-top:10px;background:#fff;}
.lvl-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.lvl-badge{display:inline-flex;align-items:center;gap:6px;font:700 14px Pretendard,sans-serif;padding:5px 12px;border-radius:999px;}
.lvl-badge .d{width:8px;height:8px;border-radius:999px;}
.lvl-temp{font:600 14px Pretendard,sans-serif;color:var(--muted);}
.lvl-acts{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
.lvl-acts li{display:flex;gap:9px;align-items:flex-start;font:500 14px/1.55 Pretendard,sans-serif;color:var(--body);}
.lvl-acts li::before{content:"";width:5px;height:5px;border-radius:999px;background:currentColor;opacity:.45;margin-top:8px;flex:none;}
.common-card{margin-top:14px;background:var(--fill);border-radius:14px;padding:14px 16px;}
.common-card .ct{font:700 14px Pretendard,sans-serif;color:var(--ink);}
.offline-banner{display:none;background:#FDF7E6;color:#A07A2E;font:600 12px Pretendard,sans-serif;text-align:center;padding:6px;}
.offline-banner.show{display:block;}