/* ============================================================
   아빠 건강 정리 — Apple-design-analysis (DESIGN.md) 적용
   Font: NanumSquare (Font/NanumFontSetup_OTF_SQUARE)
   ============================================================ */

@font-face{
  font-family:"NanumSquare";
  src:url("Font/NanumFontSetup_OTF_SQUARE/NanumSquareOTF_acL.otf") format("opentype");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"NanumSquare";
  src:url("Font/NanumFontSetup_OTF_SQUARE/NanumSquareOTF_acR.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"NanumSquare";
  src:url("Font/NanumFontSetup_OTF_SQUARE/NanumSquareOTF_acB.otf") format("opentype");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"NanumSquare";
  src:url("Font/NanumFontSetup_OTF_SQUARE/NanumSquareOTF_acEB.otf") format("opentype");
  font-weight:800;font-style:normal;font-display:swap;
}

/* SF Pro — 영문/숫자용 (한글은 NanumSquare로 자동 폴백) */
@font-face{font-family:"SF Pro Text";src:url("Font/SF-font/fonnts.com-SF_Pro_Text_Regular.ttf") format("truetype");font-weight:400;font-display:swap;}
@font-face{font-family:"SF Pro Text";src:url("Font/SF-font/fonnts.com-SF_Pro_Text_Semibold.ttf") format("truetype");font-weight:600;font-display:swap;}
@font-face{font-family:"SF Pro Text";src:url("Font/SF-font/fonnts.com-SF_Pro_Text_Bold.ttf") format("truetype");font-weight:700;font-display:swap;}
@font-face{font-family:"SF Pro Display";src:url("Font/SF-font/fonnts.com-SF_Pro_Display_Semibold.ttf") format("truetype");font-weight:600;font-display:swap;}
@font-face{font-family:"SF Pro Display";src:url("Font/SF-font/fonnts.com-SF_Pro_Display_Bold.ttf") format("truetype");font-weight:700;font-display:swap;}
@font-face{font-family:"SF Pro Display";src:url("Font/SF-font/fonnts.com-SF_Pro_Display_Heavy.ttf") format("truetype");font-weight:800;font-display:swap;}

/* 폰트 스택 변수: 라틴/숫자는 SF, 한글은 NanumSquare */
:root{
  --f-text:"SF Pro Text","NanumSquare",system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  --f-display:"SF Pro Display","NanumSquare",system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
}

:root{
  /* Apple palette (DESIGN.md) — single Action Blue accent */
  --accent:#0066cc; --accent-focus:#0071e3; --accent-on-dark:#2997ff;
  --ink:#1d1d1f; --muted-80:#333333; --muted-48:#7a7a7a;
  --canvas:#f5f5f7; --card:#ffffff; --pearl:#fafafc;
  --tile-dark:#1d1d1f; --tile-dark-2:#272729;
  --hair:#e0e0e0; --divider:#f0f0f0;
  /* restrained semantic tints (의료 안전 정보용) */
  --good-bg:#eef7f2; --good-line:#cfe6db; --good-ink:#1d6b52;
  --warn-bg:#fff6e9; --warn-line:#f0d9b0; --warn-ink:#8a5300;
  --danger-bg:#fdeeee; --danger-line:#f0cccc; --danger-ink:#b3261e;
  --hi:#b3261e; --lo:#8a5300;
  /* radius scale */
  --r-sm:8px; --r-md:11px; --r-lg:18px; --pill:9999px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--f-text);
  font-weight:400;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.sec-head h2,.navcard h3,.kpi .v,header.top h1{font-family:var(--f-display);}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:900px;margin:0 auto;padding:20px 18px 96px;}

/* LAICON (lds) 기본 스타일 — currentColor 상속, 1em 크기 */
la-icon{display:inline-flex;align-items:center;justify-content:center;
  width:1em;height:1em;line-height:1;vertical-align:-0.14em;color:inherit;}
la-icon svg{width:100%;height:100%;fill:currentColor;}
.ic la-icon{font-size:26px;color:var(--accent);}
.i-accent{color:var(--accent);}
.i-danger{color:var(--danger-ink);}
.i-warn{color:var(--warn-ink);}
.i-good{color:var(--good-ink);}
/* 인라인 아이콘(제목/박스 앞) 정렬 */
.sec-head la-icon,h1 la-icon,.box la-icon,.kbadge la-icon{vertical-align:-0.16em;}

/* ---------- top navigation bar (shadcn-style) ---------- */
.topnav{position:sticky;top:0;z-index:500;background:rgba(245,245,247,.82);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--hair);}
.topnav-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:9px 16px;}
.topnav .brand{font-family:var(--f-display);font-weight:800;font-size:15px;color:var(--ink);
  white-space:nowrap;letter-spacing:-0.01em;flex:none;}
.topnav .brand:hover{text-decoration:none;}
.topnav-links{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;}
.topnav-links::-webkit-scrollbar{display:none;}
.topnav-links a{flex:none;padding:7px 11px;border-radius:8px;font-size:13.5px;font-weight:700;
  color:var(--muted-48);white-space:nowrap;}
.topnav-links a:hover{color:var(--ink);text-decoration:none;background:rgba(0,0,0,.045);}
.topnav-links a.active{color:var(--accent);background:rgba(0,102,204,.08);}
@media(max-width:560px){.topnav .brand{display:none;}}

/* ---------- Header hero: near-black flat tile (no gradient/shadow) ---------- */
header.top{
  background:var(--tile-dark);color:#fff;border-radius:var(--r-lg);
  padding:40px 30px 34px;margin-bottom:20px;
}
header.top .eyebrow{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--accent-on-dark);
  text-transform:uppercase;}
header.top h1{margin:12px 0 10px;font-size:38px;font-weight:800;line-height:1.08;letter-spacing:-0.01em;}
header.top p{margin:0;opacity:.82;font-size:15px;line-height:1.55;font-weight:400;}

/* ---------- back bar (utility pills) ---------- */
.backbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.backbar a{background:var(--card);border:1px solid var(--hair);border-radius:var(--pill);
  padding:8px 18px;font-size:14px;color:var(--accent);font-weight:700;}
.backbar a:hover{text-decoration:none;}
.backbar a:active{transform:scale(.96);}

/* ---------- family hero (치료 의지 메시지) ---------- */
.familyhero{margin:0 0 22px;}
.familyhero img{width:100%;display:block;border-radius:var(--r-lg);
  box-shadow:rgba(0,0,0,.22) 3px 5px 30px 0;}
.familyhero.msgcard{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg);}
.familyhero.msgcard .familymsg{padding:26px 18px 24px;}
.familymsg{text-align:center;padding:22px 14px 2px;}
.familymsg .ttl{font-family:var(--f-display);font-size:21px;font-weight:800;letter-spacing:-0.01em;line-height:1.35;}
.familymsg .ttl b{color:var(--accent);}
.familymsg .ttl la-icon{font-size:20px;color:#e0526b;vertical-align:-0.15em;}
.familymsg p{color:var(--muted-80);font-size:15.5px;margin:10px 0 0;line-height:1.6;}
.familymsg .cap{font-size:12.5px;color:var(--muted-48);margin-top:12px;letter-spacing:.01em;}
@media(max-width:560px){.familymsg .ttl{font-size:18px;}}

/* ---------- disclaimer ---------- */
.disclaimer{background:var(--pearl);border:1px solid var(--hair);color:var(--muted-80);
  border-radius:var(--r-md);padding:13px 16px;font-size:13.5px;margin:14px 0 22px;}

/* ---------- nav cards (main) ---------- */
.navgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0;}
@media(max-width:560px){.navgrid{grid-template-columns:1fr;}}
.navcard{display:block;background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:22px 22px;color:var(--ink);transition:transform .08s;}
.navcard:hover{text-decoration:none;}
.navcard:active{transform:scale(.98);}
.navcard .ic{font-size:26px;}
.navcard h3{margin:10px 0 4px;font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-0.01em;}
.navcard p{margin:0;font-size:13.5px;color:var(--muted-48);font-weight:400;}

/* ---------- cards ---------- */
section.card,.card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:26px 24px 28px;margin-bottom:20px;}
.sec-head{display:flex;align-items:center;gap:12px;margin:0 0 16px;}
.sec-num{background:var(--accent);color:#fff;width:30px;height:30px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:none;}
.sec-head h2{margin:0;font-size:23px;font-weight:800;letter-spacing:-0.01em;}
h3{font-size:17px;font-weight:800;margin:22px 0 8px;color:var(--ink);letter-spacing:-0.005em;}
h4{font-size:15px;font-weight:700;margin:16px 0 6px;color:var(--ink);}
p{margin:9px 0;}
.lead{font-size:18px;color:var(--muted-80);font-weight:400;line-height:1.55;}
ul{margin:9px 0;padding-left:20px;}
li{margin:6px 0;}
.mini{font-size:13px;color:var(--muted-48);line-height:1.5;}

/* ---------- kpi ---------- */
.kpi{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0;}
.kpi div{flex:1;min-width:124px;background:var(--canvas);border:1px solid var(--hair);
  border-radius:var(--r-md);padding:12px 14px;}
.kpi .k{font-size:12px;color:var(--muted-48);font-weight:700;}
.kpi .v{font-size:17px;font-weight:800;margin-top:3px;letter-spacing:-0.01em;}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px;}
th,td{border:1px solid var(--hair);padding:9px 11px;text-align:left;vertical-align:top;}
th{background:var(--canvas);font-weight:700;}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.hi{color:var(--hi);font-weight:800;}
.lo{color:var(--lo);font-weight:800;}
.flag{display:inline-block;font-size:11px;font-weight:800;border-radius:5px;padding:1px 7px;margin-left:4px;}
.flag.h{background:var(--danger-bg);color:var(--hi);}
.flag.l{background:var(--warn-bg);color:var(--lo);}
.flag.n{background:var(--good-bg);color:var(--good-ink);}

/* ---------- pills / boxes ---------- */
.pill{display:inline-block;background:var(--good-bg);border:1px solid var(--good-line);
  border-radius:var(--pill);padding:3px 12px;font-size:12.5px;font-weight:800;color:var(--good-ink);}
.box{border-radius:var(--r-md);padding:14px 16px;margin:14px 0;font-size:14.5px;line-height:1.55;}
.box.good{background:var(--good-bg);border:1px solid var(--good-line);}
.box.warn{background:var(--warn-bg);border:1px solid var(--warn-line);}
.box.danger{background:var(--danger-bg);border:1px solid var(--danger-line);}
.danger-ink{color:var(--danger-ink);}

/* ---------- checklist ---------- */
.check{list-style:none;padding-left:0;}
.check li{padding-left:28px;position:relative;margin:8px 0;}
.check li:before{content:"\2610";position:absolute;left:0;top:-1px;font-size:17px;color:var(--accent);}

/* ---------- 아코디언 타임라인 (진료 기록) ---------- */
.actl details{position:relative;border-left:2px solid var(--good-line);margin-left:6px;padding:0 20px;}
.actl details::before{content:none;}
.actl summary::after{content:none;}
.actl summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:10px 0;flex-wrap:wrap;}
.actl summary::-webkit-details-marker{display:none;}
.actl summary::marker{content:"";}
.actl summary .acch{margin-left:auto;flex:none;color:var(--muted-48);font-size:18px;transition:transform .18s,color .15s;}
.actl details[open]>summary .acch{transform:rotate(90deg);color:var(--accent);}
.actl summary:hover .acch{color:var(--accent);}
.actl summary .d{font-weight:800;color:var(--accent);font-size:13.5px;white-space:nowrap;font-family:var(--f-display);}
.actl summary .h{font-weight:700;font-size:14.5px;}
.actl .tl-body{padding:2px 0 16px 0;font-size:14px;}
.rec-meta{display:block;background:var(--canvas);border:1px solid var(--hair);border-radius:8px;
  padding:7px 11px;margin:0 0 10px;font-size:12.5px;font-weight:700;color:var(--muted-80);}
.rec-meta b{color:var(--ink);}
.actl .tl-body h4{margin:14px 0 6px;color:var(--accent2);}
.actl .tl-body p{margin:7px 0;}

/* ---------- interactive checklist (checklist.js) ---------- */
ul.check li.ck-li{display:flex;align-items:flex-start;gap:10px;padding-left:0;cursor:pointer;
  border-radius:8px;padding:4px 6px;margin:3px -6px;transition:background .1s;}
ul.check li.ck-li:before{display:none;}
ul.check li.ck-li:active{background:var(--canvas);}
ul.check li.ck-li input.ck{margin:3px 0 0;width:19px;height:19px;flex:none;accent-color:var(--accent);cursor:pointer;}
ul.check li.ck-li .txt{flex:1;}
ul.check li.ck-li.done .txt{text-decoration:line-through;color:var(--muted-48);}

/* ---------- timeline ---------- */
.tl{border-left:2px solid var(--good-line);padding:2px 0 16px 18px;margin-left:5px;position:relative;}
.tl:before{content:"";position:absolute;left:-7px;top:5px;width:11px;height:11px;border-radius:50%;
  background:#fff;border:3px solid var(--accent);}
.tl .date{font-weight:800;color:var(--accent);font-size:14px;letter-spacing:-0.01em;}
.tl.future:before{border-color:var(--warn-line);}
.tl.future{border-left-color:var(--warn-line);}

.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.two{grid-template-columns:1fr;}}

/* ---------- accordion ---------- */
details{border:1px solid var(--hair);border-radius:var(--r-md);margin:12px 0;background:#fff;overflow:hidden;}
details>summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:800;font-size:15px;
  background:var(--card);display:flex;justify-content:space-between;align-items:center;letter-spacing:-0.005em;}
details>summary::-webkit-details-marker{display:none;}
details>summary:after{content:"\203A";color:var(--muted-48);font-size:20px;transform:rotate(90deg);transition:transform .15s;}
details[open]>summary{border-bottom:1px solid var(--divider);}
details[open]>summary:after{transform:rotate(-90deg);}
details .body{padding:10px 16px 16px;}

/* ---------- footer ---------- */
footer{text-align:center;color:var(--muted-48);font-size:13px;margin-top:28px;line-height:1.7;font-weight:400;}
a.ref{word-break:break-all;font-size:13px;}

/* ---------- 원본 자료 갤러리 (의료진 열람용) ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin:10px 0 18px;}
.gitem{display:block;border:1px solid var(--hair);border-radius:var(--r-md);overflow:hidden;
  background:#fff;color:var(--ink);transition:transform .08s,box-shadow .1s;}
.gitem:hover{text-decoration:none;box-shadow:rgba(0,0,0,.10) 0 2px 12px;}
.gitem:active{transform:scale(.98);}
.gitem img{width:100%;height:158px;object-fit:cover;object-position:top;display:block;background:var(--canvas);}
.gitem span{display:block;padding:9px 11px;font-size:12.5px;font-weight:700;line-height:1.3;}
.gitem .no{color:var(--muted-48);font-weight:800;margin-right:4px;}
.filelink{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hair);border-radius:var(--r-md);
  padding:11px 15px;font-weight:700;font-size:14px;margin:6px 8px 6px 0;background:#fff;}
.filelink la-icon{color:var(--accent);}
audio{width:100%;margin:8px 0;}

/* ---------- expanded main-page helpers ---------- */
.hilite{display:flex;gap:14px;align-items:flex-start;background:var(--card);
  border:1px solid var(--accent);border-radius:var(--r-md);padding:16px 18px;margin:12px 0;}
.hilite .big{font-size:15px;font-weight:800;font-family:var(--f-display);letter-spacing:-0.01em;}
.hilite la-icon{font-size:26px;color:var(--accent);flex:none;margin-top:2px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:12px 0;}
@media(max-width:640px){.grid3{grid-template-columns:1fr;}}
.opt{background:var(--canvas);border:1px solid var(--hair);border-radius:var(--r-md);padding:14px 15px;}
.opt h4{margin:0 0 5px;font-size:15px;color:var(--accent);}
.opt .tag{font-size:12px;color:var(--muted-48);font-weight:700;}
.opt p{margin:6px 0 0;font-size:13px;color:var(--muted-80);}
.kbadge{display:inline-flex;align-items:center;gap:6px;background:var(--good-bg);color:var(--good-ink);
  border:1px solid var(--good-line);border-radius:var(--pill);padding:4px 12px;font-size:12.5px;font-weight:800;}
.morelink{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:13.5px;margin-top:8px;}
.docrow{display:flex;gap:14px;align-items:flex-start;}
.docrow .av{width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:24px;}
.section-title{display:flex;align-items:center;gap:9px;margin:26px 4px 12px;font-size:15px;
  font-weight:800;font-family:var(--f-display);color:var(--muted-48);letter-spacing:-0.005em;}
.section-title la-icon{font-size:18px;color:var(--muted-48);}

/* ---------- shadcn-style: Badge ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;border-radius:var(--pill);
  padding:2px 10px;border:1px solid transparent;line-height:1.6;letter-spacing:-0.01em;}
.badge.default{background:var(--ink);color:#fff;}
.badge.secondary{background:var(--canvas);color:var(--ink);border-color:var(--hair);}
.badge.accent{background:var(--accent);color:#fff;}
.badge.good{background:var(--good-bg);color:var(--good-ink);border-color:var(--good-line);}
.badge.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line);}
.badge.danger{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-line);}

/* ---------- shadcn-style: Separator ---------- */
.sep{border:none;border-top:1px solid var(--hair);margin:20px 0;}

/* ---------- shadcn-style: Tooltip (의학용어) ---------- */
.tip{border-bottom:1px dashed var(--muted-48);cursor:help;position:relative;outline:none;}
.tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:145%;
  transform:translateX(-50%) translateY(4px);background:var(--ink);color:#fff;font-family:var(--f-text);
  font-size:12.5px;font-weight:400;line-height:1.5;letter-spacing:-0.01em;padding:9px 12px;border-radius:8px;
  width:max-content;max-width:240px;white-space:normal;text-align:left;opacity:0;pointer-events:none;
  transition:opacity .12s,transform .12s;z-index:60;box-shadow:rgba(0,0,0,.24) 0 6px 20px;}
.tip::before{content:"";position:absolute;left:50%;bottom:145%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--ink);opacity:0;transition:opacity .12s;z-index:60;}
.tip:hover::after,.tip:focus::after,.tip.show::after{opacity:1;transform:translateX(-50%) translateY(0);}
.tip:hover::before,.tip:focus::before,.tip.show::before{opacity:1;}

/* ---------- shadcn-style: Tabs ---------- */
.tabs{margin:12px 0 4px;}
.tablist{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--hair);
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tablist::-webkit-scrollbar{display:none;}
.tab{flex:none;background:none;border:none;padding:10px 13px;font-family:var(--f-display);font-weight:800;
  font-size:13.5px;color:var(--muted-48);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
  white-space:nowrap;letter-spacing:-0.01em;}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent);}
.tab:hover{color:var(--ink);}
.tabpanel{padding-top:14px;}
.tabpanel[hidden]{display:none;}

/* ---------- shadcn-style: Lightbox (Dialog) ---------- */
.lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:1000;display:none;
  align-items:center;justify-content:center;padding:20px;}
.lb-overlay.open{display:flex;}
.lb-img{max-width:96vw;max-height:86vh;border-radius:8px;background:#fff;box-shadow:rgba(0,0,0,.5) 0 8px 40px;}
.lb-cap{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font-size:13px;opacity:.92;}
.lb-btn{position:absolute;background:rgba(255,255,255,.15);border:none;color:#fff;width:46px;height:46px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.lb-btn:hover{background:rgba(255,255,255,.3);}
.lb-btn la-icon{font-size:22px;color:#fff;}
.lb-close{top:16px;right:16px;}
.lb-prev{left:14px;top:50%;transform:translateY(-50%);}
.lb-next{right:14px;top:50%;transform:translateY(-50%);}
@media(max-width:560px){.lb-prev{left:6px;}.lb-next{right:6px;}}

/* ---------- responsive ---------- */
@media(max-width:560px){
  header.top{padding:30px 22px 26px;}
  header.top h1{font-size:30px;}
  .sec-head h2{font-size:20px;}
  .wrap{padding:16px 14px 80px;}
}