/* ============================================================
   신장예방신호등 (renal-check.com)
   sleep-check.com과 동일한 레이아웃/구조 + 짙은 황색(amber) 테마
   ============================================================ */

:root,
[data-theme='light'] {
  --color-bg:#fdf9ef; --color-surface:#fffaf0; --color-surface-2:#fffdf7;
  --color-surface-offset:#faf0d8; --color-divider:#ecdfbd; --color-border:#e0cd9c;
  --color-text:#2b2210; --color-text-muted:#8a7b55; --color-text-faint:#c9bc95;
  --color-primary:#b3790a; --color-primary-hover:#8a5c06; --color-primary-highlight:#f2ddac;
  --color-accent:#8a5c06;
  --tl-green-bg:#e3f0dd; --tl-green-fg:#3a6a1c;
  --tl-yellow-bg:#fbe9c8; --tl-yellow-fg:#7a5a00;
  --tl-orange-bg:#fcdcb6; --tl-orange-fg:#9a4a00;
  --tl-red-bg:#f6d3d6; --tl-red-fg:#8a2433;
  --shadow-sm:0 1px 2px oklch(0.2 0.02 80 / 0.07);
  --shadow-md:0 4px 12px oklch(0.2 0.02 80 / 0.10);
  --shadow-lg:0 12px 32px oklch(0.2 0.02 80 / 0.14);
}
[data-theme='dark'] {
  --color-bg:#181206; --color-surface:#1f1809; --color-surface-2:#241b0a;
  --color-surface-offset:#2a1f0c; --color-divider:#372a10; --color-border:#4a3915;
  --color-text:#f1e6c8; --color-text-muted:#b7a56f; --color-text-faint:#7c6c40;
  --color-primary:#e2a83a; --color-primary-hover:#f2ba52; --color-primary-highlight:#3a2c10;
  --color-accent:#f2ba52;
  --tl-green-bg:#23361c; --tl-green-fg:#9bcf5e;
  --tl-yellow-bg:#3a2f12; --tl-yellow-fg:#e8b33a;
  --tl-orange-bg:#3d2710; --tl-orange-fg:#fdab43;
  --tl-red-bg:#3a1c22; --tl-red-fg:#dd6974;
  --shadow-sm:0 1px 2px oklch(0 0 0 / 0.25);
  --shadow-md:0 4px 12px oklch(0 0 0 / 0.35);
  --shadow-lg:0 12px 32px oklch(0 0 0 / 0.45);
}
:root{
  --text-xs:clamp(0.75rem,0.7rem+0.25vw,0.875rem);
  --text-sm:clamp(0.875rem,0.8rem+0.35vw,1rem);
  --text-base:clamp(1rem,0.95rem+0.25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem+0.75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem+1.25vw,2.25rem);
  --text-2xl:clamp(1.875rem,1.4rem+2vw,3rem);
  --space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;--space-20:5rem;
  --radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-full:9999px;
  --transition:180ms cubic-bezier(0.16,1,0.3,1);
  --font-display:'Pretendard',system-ui,sans-serif;
  --font-body:'Pretendard',system-ui,sans-serif;
  --max-w:1080px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:var(--space-16)}
body{min-height:100dvh;line-height:1.6;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background-color:var(--color-bg)}
img,svg{display:block;max-width:100%}
ul[role='list']{list-style:none}
input,button,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{text-wrap:balance;line-height:1.2}
p,li,figcaption{text-wrap:pretty}
::selection{background:color-mix(in oklab,var(--color-primary) 25%,transparent)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
a{color:var(--color-primary);}
a,button,[role='button'],input,select,textarea{transition:color var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition)}
button{cursor:pointer;background:none;border:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.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}
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 var(--space-5)}
@media(max-width:380px){.wrap{padding:0 var(--space-4)}}

/* ── Site header ─────────────────────────────────────────── */
header.site-header{position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--color-bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-divider)}
header.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) 0;flex-wrap:wrap;row-gap:var(--space-2)}
.brand{min-width:0}
.brand-text{min-width:0;overflow:hidden}
.brand-text strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:480px){
  #nav-clinic-link{display:none}
  header.site-header .bar{gap:var(--space-2)}
  .btn{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}
}
@media(max-width:340px){
  .brand-text span{display:none}
  header.site-header .bar{padding:var(--space-3) 0}
}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none}
.brand-logo{width:36px;height:36px;flex:0 0 auto}
.brand-text strong{display:block;font-size:var(--text-base);font-weight:800;letter-spacing:-0.02em;color:var(--color-text)}
.brand-text span{display:block;font-size:var(--text-xs);color:var(--color-text-muted)}
.header-actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-sm)}
.theme-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-weight:700;font-size:var(--text-sm);border:1px solid transparent;white-space:nowrap}
.btn-primary{background:var(--color-primary);color:#fff9ec;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-outline{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text)}
.btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn-block{width:100%}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{padding:var(--space-16) 0 var(--space-12);text-align:center}
.hero .eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);font-weight:700;color:var(--color-accent);background:var(--color-primary-highlight);border-radius:var(--radius-full);padding:var(--space-2) var(--space-4);margin-bottom:var(--space-5)}
.hero h1{font-size:var(--text-2xl);font-weight:800;letter-spacing:-0.02em;max-width:22ch;margin:0 auto var(--space-4)}
.hero h1 em{color:var(--color-primary);font-style:normal}
.hero p.lead{font-size:var(--text-base);color:var(--color-text-muted);max-width:52ch;margin:0 auto var(--space-8)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}
.hero-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-8);margin-top:var(--space-10);padding-top:var(--space-8);border-top:1px solid var(--color-divider)}
.hero-stats .stat .num{font-size:var(--text-xl);font-weight:800;color:var(--color-primary);font-variant-numeric:tabular-nums}
.hero-stats .stat .lbl{font-size:var(--text-xs);color:var(--color-text-muted)}

/* ── Sections ─────────────────────────────────────────────── */
section.block{padding:var(--space-16) 0}
section.block.alt{background:var(--color-surface-offset)}
.block-head{text-align:center;max-width:56ch;margin:0 auto var(--space-10)}
.block-head .kicker{font-size:var(--text-xs);font-weight:700;color:var(--color-primary);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--space-2)}
.block-head h2{font-size:var(--text-xl);font-weight:800;letter-spacing:-0.02em;margin-bottom:var(--space-3)}
.block-head p{color:var(--color-text-muted);font-size:var(--text-sm)}

.feature-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
@media(min-width:760px){.feature-grid{grid-template-columns:1fr 1fr}}
.feature-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--space-3)}
.feature-card .step-badge{display:inline-flex;align-self:flex-start;font-size:var(--text-xs);font-weight:700;color:#fff9ec;background:var(--color-primary);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3)}
.feature-card h3{font-size:var(--text-lg);font-weight:800}
.feature-card p{color:var(--color-text-muted);font-size:var(--text-sm)}
.feature-card ul{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-2)}
.feature-card li{font-size:var(--text-sm);display:flex;gap:var(--space-2);align-items:flex-start}
.feature-card li::before{content:'✓';color:var(--color-primary);font-weight:800}

/* ── Tabs / survey card (from source simulator) ──────────── */
.app{max-width:var(--max-w);margin:0 auto;padding:0 var(--space-5)}
nav.tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-8);overflow-x:auto;-webkit-overflow-scrolling:touch}
nav.tabs button{padding:var(--space-3) var(--space-4);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px}
nav.tabs button[aria-selected="true"]{color:var(--color-primary);border-bottom-color:var(--color-primary)}
nav.tabs button:hover{color:var(--color-text)}

.panel{display:none;animation:fade var(--transition) both}
.panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm)}
.section-title{font-size:var(--text-lg);font-weight:700;margin-bottom:var(--space-2)}
.section-sub{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-6)}
.grid-2{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
@media(min-width:680px){.grid-2{grid-template-columns:1fr 1fr}}

.q-row{display:grid;grid-template-columns:1fr;gap:var(--space-2);padding:var(--space-3) 0;border-bottom:1px solid var(--color-divider)}
@media(min-width:560px){.q-row{grid-template-columns:1.6fr 1.4fr 0.4fr;align-items:center;gap:var(--space-4)}}
.q-label{display:flex;flex-direction:column;gap:2px}
.q-label .q-area{font-size:var(--text-xs);color:var(--color-primary);font-weight:600;text-transform:uppercase;letter-spacing:0.04em}
.q-label .q-name{font-size:var(--text-sm);font-weight:600}
.q-pts{font-size:var(--text-sm);font-weight:700;text-align:right;color:var(--color-text-muted);font-variant-numeric:tabular-nums}
select{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);font-size:var(--text-sm)}
select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-highlight);outline:none}

.result-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;padding-top:var(--space-5)}
.total{display:flex;align-items:baseline;gap:var(--space-2)}
.total .num{font-size:var(--text-xl);font-weight:800;font-variant-numeric:tabular-nums;color:var(--color-primary)}
.total .lbl{font-size:var(--text-sm);color:var(--color-text-muted)}
.action{font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);flex:1 1 220px;min-width:220px}

.semaphore{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-6);background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-xl);margin-top:var(--space-6)}
.lights{display:flex;flex-direction:column;gap:var(--space-3)}
.lamp{width:64px;height:64px;border-radius:var(--radius-full);border:2px solid var(--color-border);background:var(--color-surface-2);opacity:0.35;transition:all 320ms cubic-bezier(0.16,1,0.3,1)}
.lamp.on{opacity:1;transform:scale(1.04)}
.lamp.green.on{background:var(--tl-green-bg);border-color:var(--tl-green-fg);box-shadow:0 0 24px color-mix(in oklab,var(--tl-green-fg) 45%,transparent)}
.lamp.yellow.on{background:var(--tl-yellow-bg);border-color:var(--tl-yellow-fg);box-shadow:0 0 24px color-mix(in oklab,var(--tl-yellow-fg) 45%,transparent)}
.lamp.orange.on{background:var(--tl-orange-bg);border-color:var(--tl-orange-fg);box-shadow:0 0 24px color-mix(in oklab,var(--tl-orange-fg) 45%,transparent)}
.lamp.red.on{background:var(--tl-red-bg);border-color:var(--tl-red-fg);box-shadow:0 0 24px color-mix(in oklab,var(--tl-red-fg) 50%,transparent)}
.lamp-label{font-size:var(--text-sm);font-weight:700;text-align:center}
.status-text{font-size:var(--text-base);font-weight:700;text-align:center}

.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted)}
.field .unit{font-size:var(--text-xs);color:var(--color-text-faint);font-weight:400}
input[type="number"],input[type="text"],input[type="email"],input[type="tel"],select,textarea{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);font-size:var(--text-sm);font-variant-numeric:tabular-nums}
input:focus,select:focus,textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-highlight);outline:none}
.derived{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-6)}
.derived .item{background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}
.derived .item .k{font-size:var(--text-xs);color:var(--color-text-muted)}
.derived .item .v{font-size:var(--text-base);font-weight:700;font-variant-numeric:tabular-nums}
.kfre{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--color-divider)}
.kfre h3{font-size:var(--text-sm);font-weight:700;color:var(--color-primary);margin-bottom:var(--space-3)}
.kfre-row{display:flex;justify-content:space-between;align-items:baseline;padding:var(--space-2) 0}
.kfre-row .k{font-size:var(--text-sm)}
.kfre-row .v{font-size:var(--text-lg);font-weight:800;font-variant-numeric:tabular-nums;color:var(--color-primary)}
.disclaimer{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-5);line-height:1.5}

.heatmap-wrap{overflow-x:auto}
table.heatmap{border-collapse:separate;border-spacing:var(--space-1);min-width:520px;width:100%}
table.heatmap th{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);padding:var(--space-2);text-align:center}
table.heatmap td{padding:var(--space-3);text-align:center;font-size:var(--text-sm);font-weight:700;border-radius:var(--radius-md);border:2px solid transparent}
td.green{background:var(--tl-green-bg);color:var(--tl-green-fg)}
td.yellow{background:var(--tl-yellow-bg);color:var(--tl-yellow-fg)}
td.orange{background:var(--tl-orange-bg);color:var(--tl-orange-fg)}
td.red{background:var(--tl-red-bg);color:var(--tl-red-fg)}
td.hl{border-color:var(--color-text);box-shadow:var(--shadow-md);transform:scale(1.03)}
.row-label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-align:left;padding:var(--space-2);white-space:nowrap}

.ref-list{display:flex;flex-direction:column;gap:var(--space-3)}
.ref-item{padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2)}
.ref-item .t{font-size:var(--text-sm);font-weight:600}
.ref-item a{font-size:var(--text-xs);color:var(--color-primary);text-decoration:none;word-break:break-all}
.ref-item a:hover{text-decoration:underline}
.note{font-size:var(--text-xs);color:var(--tl-orange-fg);margin-top:var(--space-6);line-height:1.6}

/* ── Email capture ────────────────────────────────────────── */
.capture-card{max-width:560px;margin:var(--space-8) auto 0}
.capture-card h3{font-size:var(--text-lg);font-weight:800;margin-bottom:var(--space-2)}
.capture-card p.sub{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-5)}
.form-row{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}
.checkbox-row{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted)}
.checkbox-row input{width:16px;height:16px;margin-top:2px;flex:0 0 auto}
.checkbox-row a{color:var(--color-primary)}
.form-msg{font-size:var(--text-sm);font-weight:600;margin-top:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);display:none}
.form-msg.show{display:block}
.form-msg.success{background:var(--tl-green-bg);color:var(--tl-green-fg)}
.form-msg.error{background:var(--tl-red-bg);color:var(--tl-red-fg)}

/* ── Clinic finder ────────────────────────────────────────── */
.clinic-finder .region-select{max-width:320px;margin:0 auto var(--space-8)}
.clinic-list{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
@media(min-width:720px){.clinic-list{grid-template-columns:1fr 1fr}}
.clinic-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--space-2)}
.clinic-card .name{font-size:var(--text-base);font-weight:700}
.clinic-card .meta{font-size:var(--text-xs);color:var(--color-text-muted);display:flex;flex-direction:column;gap:2px}
.clinic-card .tag{align-self:flex-start;font-size:var(--text-xs);font-weight:700;color:var(--color-accent);background:var(--color-primary-highlight);border-radius:var(--radius-full);padding:2px var(--space-3);margin-bottom:var(--space-1)}
.clinic-empty{text-align:center;color:var(--color-text-muted);font-size:var(--text-sm);padding:var(--space-8) 0}
.clinic-placeholder-note{text-align:center;font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-6)}

/* ── Footer ───────────────────────────────────────────────── */
footer.site-footer{border-top:1px solid var(--color-divider);padding:var(--space-12) 0 var(--space-8);background:var(--color-surface-offset)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:var(--space-8);margin-bottom:var(--space-8)}
@media(min-width:720px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer-col h4{font-size:var(--text-sm);font-weight:700;margin-bottom:var(--space-3)}
.footer-col ul{display:flex;flex-direction:column;gap:var(--space-2)}
.footer-col a{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none}
.footer-col a:hover{color:var(--color-primary)}
.footer-col p{font-size:var(--text-sm);color:var(--color-text-muted);max-width:32ch}
.footer-bottom{border-top:1px solid var(--color-divider);padding-top:var(--space-6);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);font-size:var(--text-xs);color:var(--color-text-faint)}

.hidden{display:none!important}