/* ══════════════════════════════════════════════════
   BeInside — Pages
   피쳐 CSS, 페이지별 스타일, 컴포넌트
══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   FEATURE CSS: MEMO + MENTAL + ALONE + STATS + FIRST-AID
══════════════════════════════════════════ */

/* ── 공통 카드 확장 ── */
.card.cbg-mint{background:linear-gradient(135deg,#F0FAF5,#E4F5EC);border-color:rgba(60,160,100,.15);}
.card.cbg-mint ul li::before{color:#3A9A60;}
.card.cbg-lavender{background:linear-gradient(135deg,#EDFAF4,#DFF3E9);border-color:rgba(107,168,133,.15);}
.card.cbg-lavender ul li::before{color:var(--lavender);}
.card.cbg-rose{background:linear-gradient(135deg,#F5EDE4,#ECDDD0);border-color:rgba(184,92,66,.15);}
.card.cbg-rose ul li::before{color:var(--relation);}
.card.cbg-teal{background:linear-gradient(135deg,#EEF8FA,#E0F2F6);border-color:rgba(50,140,160,.15);}
.card.cbg-teal ul li::before{color:#328CA0;}

/* 통계 뱃지 */
.stat-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,rgba(123,174,203,.11),rgba(200,144,64,.09));
  border:1px solid rgba(123,174,203,.20);
  border-radius:20px;padding:4px 12px 4px 8px;
  font-size:11.5px;font-weight:700;color:var(--peach-d);
  margin-bottom:12px;
  border-left:3px solid var(--peach-l);
}
.stat-badge .sb-num{font-size:clamp(12px,1.4vw,17px);font-weight:800;color:var(--rust);}

/* 메모장 */
.memo-wrap{
  background:linear-gradient(135deg,#FFFAF5,#FFF5EE);
  border:1px solid rgba(123,174,203,.18);
  border-radius:20px;
  padding:24px 28px;
  margin-top:14px;
}
.memo-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.memo-title{font-size:14px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;}
.memo-subtitle{font-size:11.5px;color:var(--ink-l);margin-top:3px;}
.memo-add-btn{
  display:flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:20px;
  border:1.5px solid rgba(123,174,203,.28);
  background:var(--white);
  font-family:'Noto Sans KR',sans-serif;font-size:12px;font-weight:700;
  color:var(--peach-d);cursor:pointer;transition:all .2s;
}
.memo-add-btn:hover{background:var(--peach-p);border-color:var(--peach);}

/* 메모 작성 폼 */
.memo-form{
  display:none;
  background:var(--white);border:1px solid rgba(123,174,203,.15);
  border-radius:14px;padding:16px;margin-bottom:14px;
  animation:up .25s ease both;
}
.memo-form.on{display:block;}
.memo-form-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.memo-date-input,.memo-tag-select{
  padding:8px 12px;border-radius:9px;
  border:1.5px solid rgba(123,174,203,.20);
  background:var(--cream);
  font-family:'Noto Sans KR',sans-serif;font-size:12.5px;color:var(--ink);
  outline:none;transition:border-color .2s;
}
.memo-date-input:focus,.memo-tag-select:focus{border-color:var(--peach);}
.memo-tag-select{cursor:pointer;}
.memo-textarea{
  width:100%;min-height:90px;padding:11px 14px;
  border-radius:11px;border:1.5px solid rgba(123,174,203,.20);
  background:var(--cream);resize:vertical;
  font-family:'Noto Sans KR',sans-serif;font-size:13px;color:var(--ink);
  line-height:1.7;outline:none;transition:border-color .2s;
}
.memo-textarea:focus{border-color:var(--peach);box-shadow:0 0 0 3px rgba(123,174,203,.08);}
.memo-form-actions{display:flex;gap:8px;justify-content:flex-end;}
.memo-save-btn{
  padding:8px 20px;border-radius:10px;border:none;
  background:linear-gradient(135deg,var(--peach-d),var(--peach));
  color:var(--white);font-family:'Noto Sans KR',sans-serif;
  font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;
}
.memo-save-btn:hover{background:linear-gradient(135deg,#3A7A9E,#5FA0C0);}
.memo-cancel-btn{
  padding:8px 16px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--white);
  font-family:'Noto Sans KR',sans-serif;font-size:13px;font-weight:700;
  color:var(--ink-m);cursor:pointer;transition:all .2s;
}
.memo-cancel-btn:hover{background:var(--warm);}

/* 메모 목록 */
.memo-list{display:flex;flex-direction:column;gap:10px;}
.memo-item{
  background:var(--white);border-radius:16px;
  border:1px solid rgba(123,174,203,.12);
  overflow:hidden;transition:box-shadow .2s;
}
.memo-item:hover{box-shadow:0 4px 16px rgba(123,174,203,.10);}
.memo-item-head{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;cursor:pointer;
}
.memo-tag{
  font-size:10px;font-weight:700;padding:2px 9px;border-radius:12px;
  letter-spacing:.04em;white-space:nowrap;
}
.tag-growth{background:rgba(60,160,100,.12);color:#2A8050;}
.tag-speech{background:rgba(70,120,200,.12);color:#2A5090;}
.tag-emotion{background:rgba(200,80,110,.12);color:#904050;}
.tag-milestone{background:rgba(212,160,84,.14);color:#7A5010;}
.tag-health{background:rgba(138,170,196,.15);color:#3060A0;}
.tag-daily{background:rgba(160,100,180,.12);color:#604090;}
.tag-other{background:rgba(160,140,120,.12);color:#605040;}
.memo-item-stage{font-size:10.5px;color:var(--ink-l);font-weight:600;}
.memo-item-date{font-size:10.5px;color:var(--ink-l);margin-left:auto;}
.memo-item-preview{font-size:12.5px;color:var(--ink-m);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px;}
.memo-item-body{
  display:none;padding:0 16px 14px;
  border-top:1px solid rgba(123,174,203,.08);
}
.memo-item-body.on{display:block;}
.memo-item-body p{font-size:13px;color:var(--ink-m);line-height:1.75;white-space:pre-wrap;}
.memo-item-del{
  background:none;border:none;cursor:pointer;
  font-size:13px;color:var(--ink-l);padding:2px 6px;
  border-radius:6px;transition:all .2s;flex-shrink:0;
}
.memo-item-del:hover{background:#FFECEC;color:#C04040;}
.memo-empty{
  text-align:center;padding:24px 0;
  color:var(--ink-l);font-size:13px;
}
.memo-history-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;padding:9px;margin-top:12px;
  border-radius:10px;border:1px dashed rgba(123,174,203,.28);
  background:none;
  font-family:'Noto Sans KR',sans-serif;font-size:12px;font-weight:700;
  color:var(--ink-l);cursor:pointer;transition:all .2s;
}
.memo-history-btn:hover{background:var(--peach-p);color:var(--peach-d);}

/* 정신건강 카드 내 특수 요소 */
.mental-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px;}
.mental-item{
  background:rgba(107,168,133,.06);
  border-radius:11px;padding:12px 14px;
  border-left:3px solid #8A5AB4;
}
.mental-item-title{font-size:11.5px;font-weight:700;color:#6A3A90;margin-bottom:4px;}
.mental-item p{font-size:12px;color:var(--ink-m);line-height:1.6;}

/* 응급처치 카드 */
.firstaid-grid{display:flex;flex-direction:column;gap:10px;}
.fa-item{
  border-radius:16px;padding:16px 18px;
  border:1px solid transparent;
}
.fa-item.fa-red{background:linear-gradient(135deg,#FFF2F2,#FFECEC);border-color:rgba(200,60,60,.15);}
.fa-item.fa-amber{background:linear-gradient(135deg,#FFFAF2,#FFF4E0);border-color:rgba(200,150,50,.15);}
.fa-item.fa-green{background:linear-gradient(135deg,#F2FAF5,#E6F5EC);border-color:rgba(60,140,90,.15);}
.fa-item-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.fa-item-icon{font-size:20px;}
.fa-item-title{font-size:13px;font-weight:700;color:var(--ink);}
.fa-urgency{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;}
.urg-911{background:rgba(200,60,60,.12);color:#A02020;}
.urg-now{background:rgba(200,140,50,.12);color:#804010;}
.urg-watch{background:rgba(60,140,90,.12);color:#2A6A40;}
.fa-item ol,.fa-item ul{list-style:none;display:flex;flex-direction:column;gap:5px;padding-left:0;}
.fa-item ol li,.fa-item ul li{font-size:12.5px;color:var(--ink-m);line-height:1.6;padding-left:20px;position:relative;}
.fa-item ol li{counter-increment:fa-counter;}
.fa-item ol{counter-reset:fa-counter;}
.fa-item ol li::before{content:counter(fa-counter);position:absolute;left:0;font-size:11px;font-weight:700;color:var(--peach-d);background:var(--peach-p);width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;top:2px;}
.fa-item ul li::before{content:'•';position:absolute;left:4px;color:var(--peach);font-size:16px;line-height:1.3;}

/* 혼자 자라는 아이 카드 */
.alone-card{
  border-radius:20px;padding:26px 28px;
  background:linear-gradient(135deg,#FFF8F2,#FEF2F8);
  border:1px solid rgba(220,140,160,.18);
}
.alone-quote{
  font-family:'Gowun Batang',serif;font-size:15px;
  color:var(--peach-d);line-height:1.85;
  font-style:italic;margin-bottom:18px;
  padding-left:16px;border-left:3px solid var(--peach);
}
.alone-items{display:flex;flex-direction:column;gap:10px;}
.alone-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 16px;
  background:var(--white);border-radius:16px;
  border:1px solid rgba(123,174,203,.10);
}
.alone-item-icon{font-size:20px;flex-shrink:0;margin-top:1px;}
.alone-item-text{font-size:13px;color:var(--ink-m);line-height:1.7;}
.alone-item-text strong{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:3px;}

/* ── 카드 대상 뱃지 ── */
.card-audience{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  padding:4px 12px;border-radius:20px;
  margin-bottom:12px;
  font-family:'Noto Sans KR',sans-serif;
  border:1px solid transparent;
}
.aud-parent{background:rgba(200,144,64,.12);color:#7A5010;border-color:rgba(200,144,64,.25);}
.aud-child{background:rgba(50,130,200,.10);color:#1A4880;border-color:rgba(50,130,200,.22);}
.aud-self{background:rgba(40,160,90,.10);color:#1A5C38;border-color:rgba(40,160,90,.22);}
.aud-family{background:rgba(160,80,180,.10);color:#5C1068;border-color:rgba(160,80,180,.22);}
.aud-all{background:rgba(123,174,203,.11);color:var(--peach-d);border-color:rgba(123,174,203,.24);}

/* ── 출산 섹션 ── */
.birth-wrap{padding:0 48px 80px;}
.birth-stage-tabs{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:20px 0 0;margin-bottom:20px;
}
.birth-tab{
  padding:8px 18px;border-radius:24px;
  border:1.5px solid var(--line);background:var(--white);
  font-family:'Noto Sans KR',sans-serif;font-size:13px;font-weight:700;
  color:var(--ink-m);cursor:pointer;transition:all .2s;
}
.birth-tab:hover{border-color:var(--peach);color:var(--peach-d);background:var(--peach-p);}
.birth-tab.on{border-color:var(--peach-d);color:var(--peach-d);background:var(--peach-p);box-shadow:0 2px 10px rgba(123,174,203,.15);}

.birth-stage{display:none;}
.birth-stage.on{display:block;animation:up .3s ease both;}

.birth-header{
  border-radius:22px;padding:28px 32px;
  color:var(--white);
  margin-bottom:18px;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#C4714A,#D4A054);
}
.birth-header::before{content:'';position:absolute;right:-40px;top:-40px;width:200px;height:200px;background:rgba(255,255,255,.08);border-radius:50%;}
.birth-header-inner{position:relative;z-index:1;}
.birth-header h2{font-family:'Gowun Batang',serif;font-size:22px;font-weight:700;margin-bottom:6px;}
.birth-header p{font-size:13px;opacity:.88;line-height:1.7;}
.birth-alone-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3);
  border-radius:20px;padding:4px 12px;
  font-size:11.5px;font-weight:700;
  margin-bottom:14px;
}

.birth-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:14px;}
.birth-card{
  background:var(--white);border-radius:18px;padding:22px;
  border:1px solid rgba(123,174,203,.10);
  box-shadow:0 2px 12px rgba(123,174,203,.06);
  transition:transform .2s,box-shadow .2s;
}
.birth-card:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(123,174,203,.12);}
.birth-card.full{grid-column:span 2;}
.birth-card.bc-warm{background:linear-gradient(135deg,#FFF8F2,#FFF0E4);border-color:rgba(220,140,70,.16);}
.birth-card.bc-rose{background:linear-gradient(135deg,#F8EEE4,#F0E4D4);border-color:rgba(184,92,66,.15);}
.birth-card.bc-mint{background:linear-gradient(135deg,#F2FAF6,#E6F6EE);border-color:rgba(60,150,100,.14);}
.birth-card.bc-sky{background:linear-gradient(135deg,#EFF5FA,#E4EFF8);border-color:rgba(100,150,200,.14);}
.birth-card.bc-lavender{background:linear-gradient(135deg,#F4F0FA,#EDE4F8);border-color:rgba(140,100,200,.14);}
.birth-card h4{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:11px;display:flex;align-items:center;gap:8px;}
.birth-card ul{list-style:none;display:flex;flex-direction:column;gap:6px;}
.birth-card ul li{font-size:13px;color:var(--ink-m);line-height:1.65;padding-left:15px;position:relative;}
.birth-card ul li::before{content:'·';position:absolute;left:3px;color:var(--peach);font-size:20px;line-height:1.28;font-weight:700;}
.birth-card ul li strong{color:var(--ink);font-weight:700;}

.birth-alert{
  display:flex;align-items:flex-start;gap:10px;
  padding:13px 16px;border-radius:12px;
  background:linear-gradient(135deg,#FFF2F2,#FFECEC);
  border:1px solid rgba(200,60,60,.15);
  font-size:12.5px;color:#8A2020;line-height:1.65;
  margin-bottom:10px;
}
.birth-alert-icon{font-size:16px;flex-shrink:0;margin-top:1px;}

.birth-postpartum-link{
  margin:16px 0;padding:14px 18px;
  background:linear-gradient(135deg,rgba(176,123,172,.10),rgba(212,160,176,.08));
  border:1px solid rgba(176,123,172,.18);border-radius:14px;
}
.birth-intro-box{
  background:linear-gradient(135deg,rgba(232,137,106,.10),rgba(212,160,84,.08));
  border:1px solid rgba(232,137,106,.20);border-radius:14px;
  padding:13px 18px;font-size:13px;color:var(--ink-m);line-height:1.7;margin-bottom:16px;
}
.birth-alone-msg{
  background:linear-gradient(135deg,rgba(232,137,106,.08),rgba(212,160,84,.06));
  border:1px solid rgba(232,137,106,.18);border-radius:13px;
  padding:13px 18px;margin-bottom:16px;font-size:13px;color:var(--peach-d);line-height:1.7;font-style:italic;
}
.birth-contacts{
  background:rgba(232,137,106,.06);border-radius:12px;
  padding:14px 18px;margin-top:4px;font-size:12.5px;color:var(--ink-m);line-height:1.7;
}

.birth-reality{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 18px;background:var(--white);
  border-radius:16px;border:1px solid rgba(123,174,203,.12);
  margin-bottom:10px;
}
.birth-reality-icon{font-size:20px;flex-shrink:0;margin-top:1px;}
.birth-reality-text{font-size:13px;color:var(--ink-m);line-height:1.7;}
.birth-reality-text strong{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:3px;}

@media(max-width:900px){.birth-wrap{padding-left:24px;padding-right:24px;}}
@media(max-width:640px){
  .birth-wrap{padding-left:18px;padding-right:18px;}
  .birth-grid{grid-template-columns:1fr;}.birth-card.full{grid-column:span 1;}
}


/* ── 모바일 하단 탭바 — Calm minimal ── */
.mobile-tabbar{display:none;}
@media(max-width:640px){
  .mobile-tabbar{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;
    background:rgba(247,243,238,.88);
    backdrop-filter:saturate(150%) blur(24px);-webkit-backdrop-filter:saturate(150%) blur(24px);
    border-top:1px solid rgba(0,0,0,.04);
    z-index:300;
    padding:6px 0 max(6px,env(safe-area-inset-bottom));
  }
  .mtab{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    background:none;border:none;cursor:pointer;
    font-family:'Noto Sans KR',sans-serif;
    font-size:9px;font-weight:500;letter-spacing:.01em;
    color:var(--ink-l);
    padding:4px 0 2px;
    transition:color var(--calm-dur) var(--calm-ease), opacity var(--calm-dur) var(--calm-ease);
    opacity:.6;
  }
  .mtab span:first-child{font-size:18px;line-height:1.2;}
  .mtab.active{color:var(--peach-d);font-weight:600;opacity:1;}
  body{padding-bottom:64px;}
}

/* ── SOS Floating Button ── */
/* ── 헤더 SOS 버튼 ── */
.hdr-sos{
  width:34px;height:34px;
  border-radius:10px;
  border:1.5px solid rgba(200,60,60,.18);
  background:rgba(200,60,60,.04);
  color:var(--emer-119);
  font-family:'Noto Sans KR',sans-serif;
  font-size:10px;font-weight:800;
  letter-spacing:.5px;
  cursor:pointer;
  transition:all var(--calm-dur) var(--calm-ease);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.hdr-sos:hover{
  background:rgba(200,60,60,.08);
  border-color:rgba(200,60,60,.35);
  box-shadow:0 2px 8px rgba(200,60,60,.12);
}

/* ── Data Source Bar ── */
.data-source-bar {
  background: #FFF8F0; border-top: 1px solid #E8D5C0;
  padding: 20px 40px; font-size: 12px; color: #999; line-height: 2;
}
.data-source-bar strong { color: #B85030; }

/* ── Verified Badge ── */
.verified-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(42,106,64,0.08); color: #2A6A40;
  padding: 5px 14px; border-radius: 20px; font-size: 11px; font-weight: 800;
  margin-bottom: 14px; border: 1px solid rgba(42,106,64,0.18); letter-spacing: 0.3px;
}

/* ── Medical Disclaimer ── */
#medical-disclaimer {
  background: var(--disclaimer-bg); border: 1px solid var(--disclaimer-border);
  border-radius: 16px; padding: 16px 20px; margin-bottom: 20px;
  font-size: 13px; color: var(--disclaimer-ink); line-height: 1.65;
}

/* ── Hamburger Menu Button ── */
.menu-btn {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px; padding: 8px; border-radius: 8px;
  transition: background 0.2s;
}
.menu-btn:hover { background: rgba(123,174,203,.12); }
.menu-btn span {
  display: block; width: 22px; height: 2px;
  background: var(--peach-d); border-radius: 2px;
  transition: all 0.25s;
}

/* ── 헤더 드롭다운 메뉴 ── */
.hdr-menu-overlay{
  position:fixed;inset:0;z-index:190;
  background:transparent;
  display:none;
}
.hdr-menu-overlay.on{display:block;}

.hdr-menu{
  position:fixed;
  top:52px;right:12px;z-index:195;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(0,0,0,.05);
  border-radius:14px;
  padding:6px;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
  display:none;
  min-width:140px;
  animation:slideUp .3s var(--calm-ease-out) both;
}
.hdr-menu.on{display:block;}

.hdr-menu-item{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:12px 16px;
  background:none;border:none;border-radius:10px;
  font-family:'Noto Sans KR',sans-serif;
  font-size:13.5px;font-weight:600;
  color:var(--ink);cursor:pointer;
  transition:background var(--calm-dur) var(--calm-ease);
  text-align:left;
}
.hdr-menu-item:hover{background:rgba(123,174,203,.06);}
.hdr-menu-icon{font-size:18px;flex-shrink:0;}

/* ── 설정 패널 ── */
.settings-overlay{
  position:fixed;inset:0;z-index:890;
  background:rgba(40,40,40,.20);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:none;
}
.settings-overlay.on{display:block;animation:fadeIn .3s var(--calm-ease) both;}

.settings-panel{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  margin:auto;
  width:min(380px, calc(100vw - 40px));
  height:fit-content;
  max-height:80vh;
  overflow-y:auto;
  z-index:895;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(0,0,0,.04);
  border-radius:20px;
  box-shadow:0 8px 32px rgba(0,0,0,.08);
  display:none;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .3s var(--calm-ease), transform .4s var(--calm-ease-out);
}
.settings-panel.on{
  opacity:1;
  transform:translateY(0);
}

.settings-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px 14px;
  border-bottom:1px solid var(--line);
}
.settings-header h3{
  font-family:'Noto Sans KR',sans-serif;
  font-size:16px;font-weight:700;color:var(--ink);
  margin:0;display:flex;align-items:center;gap:8px;
}
.settings-close{
  background:none;border:none;cursor:pointer;
  font-size:18px;color:var(--ink-l);
  padding:4px 8px;border-radius:8px;
  transition:background .15s;
}
.settings-close:hover{background:rgba(123,174,203,.10);}

.settings-body{
  padding:14px 18px 20px;
}
.settings-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.settings-item:last-child{border-bottom:none;}

.settings-item-label{
  display:flex;align-items:center;gap:12px;
  flex:1;
}
.settings-item-label>span{font-size:20px;}
.settings-item-title{
  font-size:13.5px;font-weight:700;color:var(--ink);
}
.settings-item-sub{
  font-size:11.5px;color:var(--ink-l);margin-top:2px;
}

/* 테마 토글 스위치 */
.theme-toggle{
  display:flex;align-items:center;gap:8px;
  cursor:pointer;
  padding:6px 14px 6px 6px;
  background:var(--section-alt);
  border:1px solid var(--line);
  border-radius:20px;
  transition:all .2s;
  min-height:36px;
}
.theme-toggle:hover{border-color:var(--peach);}
.theme-toggle-thumb{
  width:24px;height:24px;border-radius:50%;
  background:var(--peach-d);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
  color:white;
}
.theme-toggle-thumb::after{content:'☀️';font-size:14px;}
[data-theme="dark"] .theme-toggle-thumb::after{content:'🌙';}
.theme-toggle-label{
  font-size:12px;font-weight:600;color:var(--ink-m);
  white-space:nowrap;
}

/* 설정 액션 버튼 */
.settings-action-btn{
  padding:8px 16px;
  background:var(--peach-p);
  border:1px solid rgba(123,174,203,.20);
  border-radius:10px;
  font-family:'Noto Sans KR',sans-serif;
  font-size:12px;font-weight:700;
  color:var(--peach-d);cursor:pointer;
  transition:all .2s;
  white-space:nowrap;
}
.settings-action-btn:hover{
  background:var(--peach);color:white;
  border-color:var(--peach);
}

/* 설정 언어 선택 드롭다운 */
.settings-lang-select{
  padding:8px 12px;
  background:var(--peach-p);
  border:1px solid rgba(123,174,203,.20);
  border-radius:10px;
  font-family:'Noto Sans KR',sans-serif;
  font-size:13px;font-weight:600;
  color:var(--ink);cursor:pointer;
  transition:all .2s;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%236B6B6B' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:28px;
  min-width:120px;
}
.settings-lang-select:focus{
  outline:2px solid var(--peach);
  outline-offset:2px;
}

/* ── Source Drawer (출처 패널) ── */
.source-drawer-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(40,40,40,.20);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--calm-ease);
}
.source-drawer-overlay.open {
  opacity: 1; pointer-events: all;
}
.source-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(480px, 92vw);
  background: rgba(255,252,248,.96);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow: -4px 0 24px rgba(0,0,0,.06);
  transform: translateX(100%);
  transition: transform var(--calm-dur-slow) var(--calm-ease-out);
  display: flex; flex-direction: column;
  z-index: 2001; overflow: hidden;
}
.source-drawer.open { transform: translateX(0); }

.source-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px 16px;
  border-bottom: 1px solid rgba(123,174,203,.2);
  background: linear-gradient(135deg, #FFF2E8, #FFF8F2);
  flex-shrink: 0;
}
.source-drawer-header h2 {
  font-size: 17px; font-weight: 800; color: var(--rust);
  font-family: 'Noto Sans KR', sans-serif; margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.source-drawer-close {
  background: none; border: none; cursor: pointer;
  font-size: 20px; color: var(--ink-m); padding: 4px 8px;
  border-radius: 6px; transition: background 0.2s; line-height: 1;
}
.source-drawer-close:hover { background: rgba(123,174,203,.15); }

.source-drawer-body {
  flex: 1; overflow-y: auto; padding: 24px 28px 40px;
}

.source-section {
  margin-bottom: 28px;
}
.source-section-title {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--peach);
  margin-bottom: 12px; padding-bottom: 6px;
  border-bottom: 1.5px solid var(--peach-p);
}
.source-item {
  display: flex; gap: 12px; margin-bottom: 14px;
  padding: 12px 14px; background: white;
  border-radius: 10px; border: 1px solid rgba(123,174,203,.15);
}
.source-item-badge {
  flex-shrink: 0; width: 36px; height: 36px;
  background: var(--peach-p); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.source-item-content { flex: 1; }
.source-item-name {
  font-size: 13px; font-weight: 700; color: var(--ink);
  margin-bottom: 3px; line-height: 1.4;
}
.source-item-detail {
  font-size: 11.5px; color: var(--ink-m); line-height: 1.6;
}
.source-item-year {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  background: var(--peach-p); color: var(--peach-d);
  padding: 1px 7px; border-radius: 20px; margin-top: 4px;
}
.source-note {
  font-size: 11px; color: var(--ink-l); line-height: 1.8;
  background: #FFF2E8; border-radius: 8px; padding: 12px 16px;
  border-left: 3px solid var(--peach-l); margin-top: 4px;
}


/* ── Guide TOC (목차 박스) ── */
.guide-toc {
  margin: 0 24px 28px;
  background: white;
  border: 1.5px solid rgba(123,174,203,.18);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 2px 16px rgba(123,174,203,.09), inset 0 1px 0 rgba(255,255,255,.8);
}
.guide-toc-title {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: var(--peach); text-transform: uppercase;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 6px;
}
.guide-toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.guide-toc-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--cream);
  border: 1px solid rgba(123,174,203,.12);
  border-radius: 10px;
  cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--ink-m);
  transition: all .18s;
  line-height: 1.3;
}
.guide-toc-item:hover {
  background: var(--peach-p);
  border-color: var(--peach-l);
  color: var(--peach-d);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(123,174,203,.15);
}
.guide-toc-item .toc-em { font-size: 15px; flex-shrink: 0; }
@media(max-width:640px){
  .guide-toc { margin: 0 18px 20px; padding: 16px; }
  .guide-toc-grid { grid-template-columns: 1fr 1fr; }
}


/* ════════════════════════════════════════════════════
   REDESIGN 2.0 — 상황 카드 네비게이션 & 페이지 뷰
════════════════════════════════════════════════════ */

/* ── 사이드바 완전 숨김 ── */
.tl-sidebar { display: none !important; }
:root { --tl-w: 0px; }

/* ── 인사말 — 심리적 안전감 프라이밍 ── */
.hero-greeting{
  font-family:'Gowun Batang',serif;
  font-size:13px;
  color:var(--ink-l);
  letter-spacing:-.1px;
  margin-bottom:var(--sp-1);
  animation:up .5s .06s cubic-bezier(.22,1,.36,1) both;
  word-break:keep-all;
}

/* ── 히어로 보조 카피 ── */
.hero .hero-sub {
  font-size: 14px; color: var(--ink-m);
  line-height: 1.72; margin-bottom: 28px;
  animation: up .5s .12s cubic-bezier(.22,1,.36,1) both;
  word-break: keep-all; max-width: 460px;
}

/* ── 무드→가이드 브릿지 텍스트 ── */
.mood-bridge{
  padding:var(--sp-3) 0 var(--sp-2);
  text-align:center;
}
.bridge-text{
  font-family:'Gowun Batang',serif;
  font-size:13px;
  color:var(--ink-l);
  letter-spacing:-.1px;
  line-height:1.6;
  word-break:keep-all;
}

/* ── 상황 카드 그리드 ── */
.situation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%; max-width: 480px;
  margin: 0 auto var(--sp-3);
  animation: up .5s .18s cubic-bezier(.22,1,.36,1) both;
}

/* ── 상황 카드 — 감성 리디자인 ── */
.sit-card {
  display: flex; flex-direction: row; align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 18px;
  cursor: pointer;
  transition: all var(--calm-dur) var(--calm-ease);
  text-align: left;
  position: relative; overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* 기본 — Calm surface */
  background: var(--calm-bg-surface);
  border: 1px solid var(--calm-border);
  box-shadow: var(--calm-shadow);
}
.sit-card:active,
.sit-card.tap {
  transform: scale(.98);
  transition-duration: 120ms;
}
/* 카드 배경 미묘한 빛 — 더 은은하게 */
.sit-card::before {
  content: '';
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at 50% 0%, rgba(123,174,203,.04) 0%, transparent 60%);
  opacity: 0; transition: opacity var(--calm-dur-slow);
  pointer-events: none;
}
@media (hover: hover) {
  .sit-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--calm-shadow-hover);
    border-color: rgba(123,174,203,.18);
  }
  .sit-card:hover::before { opacity: 1; }
  .sit-card:hover .sit-icon { transform: scale(1.04); }
  .sit-card:hover .sit-arrow { opacity: .6; transform: translateX(2px); }
}

/* 이모지 아이콘 — 배경 없이 순수 이모지 */
.sit-icon {
  font-size: 28px; flex-shrink: 0; line-height: 1;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: none;
  transition: transform var(--calm-dur) var(--calm-ease);
}

.sit-card-body { flex: 1; min-width: 0; }
.sit-title {
  font-size: 14px; font-weight: 700; color: var(--ink);
  line-height: 1.45; letter-spacing: -.2px;
  margin-bottom: 4px; word-break: keep-all;
}
.sit-sub {
  font-size: 12px; color: var(--ink-l);
  line-height: 1.55; word-break: keep-all;
}
.sit-arrow {
  font-size: 14px; color: var(--ink-l);
  flex-shrink: 0; transition: all var(--calm-dur) var(--calm-ease);
  opacity: .25;
}

/* ── 카드별 개성 컬러 ── */
/* 돌봄 영역 — 따뜻한 톤 */
.sit-card[data-card-id="growth"] {
  background: linear-gradient(160deg, #F2FAF0 0%, #E8F5E4 100%);
  border-color: rgba(107,168,133,.15);
}
.sit-card[data-card-id="sp"] {
  background: linear-gradient(160deg, #F8F2FA 0%, #F0E5F5 100%);
  border-color: rgba(160,120,180,.12);
}
.sit-card[data-card-id="birth"] {
  background: linear-gradient(160deg, #FFF5F7 0%, #FCEDF0 100%);
  border-color: rgba(220,140,160,.12);
}
.sit-card[data-card-id="dad"] {
  background: linear-gradient(160deg, #FFF8F0 0%, #FFF0E0 100%);
  border-color: rgba(200,160,80,.12);
}
.sit-card[data-card-id="elder"] {
  background: linear-gradient(160deg, #F5F2EE 0%, #EDE8E2 100%);
  border-color: rgba(160,140,120,.12);
}
.sit-card[data-card-id="grief"] {
  background: linear-gradient(160deg, #F4F6FA 0%, #EAEEF5 100%);
  border-color: rgba(130,140,170,.12);
}
.sit-card[data-card-id="multicultural"] {
  background: linear-gradient(160deg, #F0F8FF 0%, #E6F2FF 100%);
  border-color: rgba(100,150,200,.12);
}

/* 마음 영역 — 부드러운 톤 */
.sit-card[data-card-id="emotion"] {
  background: linear-gradient(160deg, #F0F6FC 0%, #E4EFF8 100%);
  border-color: rgba(100,150,200,.14);
}
.sit-card[data-card-id="burnout"] {
  background: linear-gradient(160deg, #FDF8F0 0%, #FBF0E0 100%);
  border-color: rgba(192,137,42,.12);
}
.sit-card[data-card-id="relation"] {
  background: linear-gradient(160deg, #FBF2F0 0%, #F5E8E4 100%);
  border-color: rgba(176,90,66,.10);
}
.sit-card[data-card-id="sleep"] {
  background: linear-gradient(160deg, #F2F0FA 0%, #E8E4F5 100%);
  border-color: rgba(120,100,180,.12);
}
.sit-card[data-card-id="transition"] {
  background: linear-gradient(160deg, #F0FAF8 0%, #E2F5F0 100%);
  border-color: rgba(80,160,140,.12);
}
.sit-card[data-card-id="teen"] {
  background: linear-gradient(160deg, #F0F2FF 0%, #E8ECFF 100%);
  border-color: rgba(91,124,250,.14);
}
.sit-card[data-card-id="workplace"] {
  background: linear-gradient(160deg, #F4F5F8 0%, #EAECF2 100%);
  border-color: rgba(100,110,140,.10);
}
.sit-card[data-card-id="postpartum"] {
  background: linear-gradient(160deg, #FFF5F8 0%, #FCEDF2 100%);
  border-color: rgba(200,130,160,.10);
}
.sit-card[data-card-id="menopause"] {
  background: linear-gradient(160deg, #FAF5EE 0%, #F5ECE0 100%);
  border-color: rgba(180,140,90,.10);
}

/* ── 카드 진입 스태거 — Calm breathing ── */
.situation-grid .sit-card:nth-child(1) { animation: cardUp .55s .14s var(--calm-ease-out) both; }
.situation-grid .sit-card:nth-child(2) { animation: cardUp .55s .20s var(--calm-ease-out) both; }
.situation-grid .sit-card:nth-child(3) { animation: cardUp .55s .26s var(--calm-ease-out) both; }
.situation-grid .sit-card:nth-child(4) { animation: cardUp .55s .32s var(--calm-ease-out) both; }
.situation-grid .sit-card:nth-child(5) { animation: cardUp .55s .38s var(--calm-ease-out) both; }
.situation-grid .sit-card:nth-child(6) { animation: cardUp .55s .44s var(--calm-ease-out) both; }
@keyframes cardUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 청소년 카드 — 쿨톤 (레거시 클래스 호환) */
.sit-card--teen {
  background: linear-gradient(160deg, #F0F2FF 0%, #E8ECFF 100%);
  border-color: rgba(91,124,250,.14);
}
@media (hover: hover) {
  .sit-card--teen:hover { border-color: rgba(91,124,250,.40); box-shadow: 0 8px 28px rgba(80,100,200,.12); }
}

/* 긴급 카드 — 레드 보더 */
.sit-card--emergency {
  border-color: rgba(200,60,60,.20);
  background: linear-gradient(160deg, #FFF8F8, #FFF0F0);
}
@media (hover: hover) {
  .sit-card--emergency:hover { border-color: #E04040; box-shadow: 0 8px 28px rgba(200,60,60,.12); }
}

/* ── 가이드 파인더 ("잘 모르겠어요") ── */
.guide-finder-btn{
  display:inline-block;
  background:none;border:none;
  font-family:'Gowun Batang',serif;
  font-size:14px;font-weight:400;font-style:italic;
  color:var(--ink-l);
  cursor:pointer;
  padding:8px 0;margin-top:0;margin-bottom:var(--sp-2);
  letter-spacing:-.2px;
  transition:color var(--calm-dur-slow) var(--calm-ease);
  animation:up .6s .12s var(--calm-ease-out) both;
  position:relative;
}
.guide-finder-btn::after{
  content:'';position:absolute;
  bottom:6px;left:50%;transform:translateX(-50%);
  width:0;height:1px;
  background:var(--peach-l);
  transition:width var(--calm-dur-slow) var(--calm-ease-out);
}
.guide-finder-btn:hover{
  color:var(--peach);
}
.guide-finder-btn:hover::after{
  width:100%;
}

/* 가이드 파인더 모달 */
.gf-overlay{
  position:fixed;inset:0;z-index:950;
  background:rgba(40,40,40,.20);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:none;align-items:center;justify-content:center;
  padding:20px;
}
.gf-overlay.on{display:flex;animation:fadeIn .3s var(--calm-ease) both;}

.gf-modal{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(40px) saturate(1.5);
  border:1px solid rgba(255,255,255,.50);
  border-radius:24px;padding:28px 24px;
  width:min(440px,94vw);max-height:90vh;overflow-y:auto;
  box-shadow:0 12px 40px rgba(0,0,0,.08);
  animation:slideUp .4s var(--calm-ease-out) both;
}

.gf-title{
  font-family:'Gowun Batang',serif;
  font-size:18px;font-weight:700;color:var(--ink);
  text-align:center;margin-bottom:6px;
}
.gf-sub{
  font-size:13px;color:var(--ink-m);text-align:center;
  margin-bottom:24px;line-height:1.6;
}

.gf-step{display:none;}
.gf-step.on{display:block;animation:up .3s ease both;}

.gf-question{
  font-size:14px;font-weight:700;color:var(--ink);
  margin-bottom:14px;word-break:keep-all;
}
.gf-options{display:flex;flex-direction:column;gap:8px;}
.gf-opt{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  background:var(--white);
  border:1.5px solid rgba(123,174,203,.15);
  border-radius:14px;
  font-family:'Noto Sans KR',sans-serif;font-size:13.5px;font-weight:500;
  color:var(--ink-m);cursor:pointer;
  transition:all .2s cubic-bezier(.34,1.2,.64,1);
  text-align:left;min-height:44px;
  word-break:keep-all;
}
.gf-opt:hover{
  border-color:var(--peach);color:var(--peach-d);
  background:var(--peach-p);
  transform:translateY(-1px);
}
.gf-opt-icon{font-size:20px;flex-shrink:0;}

/* 결과 */
.gf-result{display:none;animation:up .3s ease both;}
.gf-result.on{display:block;}
.gf-result-msg{
  font-size:14px;color:var(--ink-m);line-height:1.75;
  margin-bottom:18px;word-break:keep-all;text-align:center;
}
.gf-result-cards{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.gf-card{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;
  background:var(--white);
  border:1.5px solid rgba(123,174,203,.15);
  border-radius:16px;
  cursor:pointer;
  transition:all .22s cubic-bezier(.34,1.56,.64,1);
  text-decoration:none;
}
.gf-card:hover{
  border-color:var(--peach);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(123,174,203,.12);
}
.gf-card-icon{font-size:24px;flex-shrink:0;}
.gf-card-body{flex:1;}
.gf-card-title{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:2px;}
.gf-card-sub{font-size:11.5px;color:var(--ink-l);}

.gf-close{
  display:block;margin:0 auto;
  background:none;border:1px solid var(--line);
  border-radius:12px;padding:10px 24px;
  font-size:13px;color:var(--ink-l);cursor:pointer;
  font-family:'Noto Sans KR',sans-serif;
  transition:all .2s;
}
.gf-close:hover{background:var(--warm);color:var(--ink-m);}

.gf-progress{
  display:flex;justify-content:center;gap:6px;margin-bottom:20px;
}
.gf-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(123,174,203,.20);
  transition:all .2s;
}
.gf-dot.on{background:var(--peach);transform:scale(1.3);}

/* ── 나이로 바로 찾기 (접힘형) ── */
.age-finder {
  width: 100%; max-width: 560px;
  animation: up .5s .24s cubic-bezier(.22,1,.36,1) both;
}
.age-finder-toggle {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 1.5px dashed rgba(123,174,203,.28);
  border-radius: 14px; padding: 10px 22px;
  font-family: 'Noto Sans KR', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--peach-d); cursor: pointer;
  transition: all .2s; width: 100%; justify-content: center;
}
.age-finder-toggle:hover { background: var(--peach-p); border-color: var(--peach); }
.af-arrow { transition: transform .2s; }
.af-arrow.open { transform: rotate(180deg); }
.age-finder-body {
  display: none;
  padding: 16px;
  background: var(--white);
  border: 1.5px solid rgba(123,174,203,.18);
  border-top: none;
  border-radius: 0 0 16px 16px;
  animation: up .25s ease both;
}
.age-finder-row {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; margin-top: 10px;
}

/* ── 페이지 뷰 (상황별 상세 페이지) ── */
.page-view {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  animation: pageEnter .5s var(--calm-ease-out) both;
}
@keyframes pageEnter {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.page-header {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid rgba(0,0,0,.04);
  position: sticky; top: 56px; z-index: 90;
  background: rgba(247,243,238,.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  max-width:680px;margin-left:auto;margin-right:auto;
}
.page-back {
  background: none; border: 1.5px solid rgba(123,174,203,.15);
  border-radius: 22px; padding: 7px 16px;
  font-family: 'Noto Sans KR', sans-serif; font-size: 12.5px; font-weight: 700;
  color: var(--ink-m); cursor: pointer; transition: all var(--calm-dur) var(--calm-ease);
  white-space: nowrap; flex-shrink: 0;
}
/* JS 렌더링 페이지에서 page-back이 content-hero 위에 올 때 여백 */
.page-view > .page-back:first-child,
.page-view > div > .page-back:first-child{
  display:inline-block;
  margin:14px 24px 10px;
}
.page-back:hover { background: var(--peach-p); border-color: var(--peach); color: var(--peach-d); }
.page-title {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 18px; font-weight: 700; color: var(--ink);
  margin: 0; flex: 1; word-break: keep-all;
  letter-spacing: -.3px;
}
.page-intro {
  padding: var(--sp-2) var(--sp-3) 0;
  font-size: 14px; color: var(--ink-m); line-height: 1.75;
  word-break: keep-all;
}

/* ── 증상 체커 (출산 페이지) ── */
.symptom-checker {
  margin: 16px 28px;
  background: linear-gradient(135deg, #FFF8F5, #FFF2EE);
  border: 1.5px solid rgba(123,174,203,.20);
  border-radius: 18px;
  padding: 20px 22px;
}
.symptom-checker-title {
  font-size: 14px; font-weight: 700; color: var(--ink);
  margin-bottom: 14px; display: flex; align-items: center; gap: 7px;
}
.symptom-list { display: flex; flex-direction: column; gap: 12px; }
.symptom-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.symptom-q { font-size: 13px; color: var(--ink-m); font-weight: 600; flex: 1; min-width: 200px; line-height: 1.5; }
.symptom-btns { display: flex; gap: 6px; }
.sym-yes, .sym-no {
  padding: 5px 16px; border-radius: 20px;
  font-family: 'Noto Sans KR', sans-serif; font-size: 12px; font-weight: 700;
  cursor: pointer; border: 1.5px solid transparent; transition: all .18s;
}
.sym-yes { background: rgba(200,60,60,.08); color: #A02020; border-color: rgba(200,60,60,.22); }
.sym-yes:hover { background: rgba(200,60,60,.15); }
.sym-no { background: var(--warm); color: var(--ink-m); border-color: var(--line); }
.sym-no:hover { background: rgba(60,160,100,.08); color: #2A7A50; }
.symptom-result {
  width: 100%; padding: 10px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600; line-height: 1.6;
  background: linear-gradient(135deg, #FFF2F2, #FFECEC);
  border: 1px solid rgba(200,60,60,.18); color: #8A2020;
  animation: up .2s ease both;
}

/* ── 아코디언 (성장 가이드 결과 2단계 공개) ── */
.summary-panel {
  margin-bottom: 18px;
  background: linear-gradient(135deg, #FFFCF8, #FFF6EE);
  border: 1.5px solid rgba(123,174,203,.22);
  border-radius: 18px;
  padding: 20px 24px;
}
.summary-panel-title {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--peach); margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
.summary-list {
  list-style: none; display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;
}
.summary-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--ink-m); line-height: 1.65;
}
.summary-list li .sn {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--peach-d); color: #fff;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.summary-warn {
  background: rgba(200,60,60,.07); border: 1px solid rgba(200,60,60,.16);
  border-radius: 10px; padding: 10px 14px;
  font-size: 12.5px; color: #8A2020; font-weight: 600; line-height: 1.6;
}
.acc-container { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.acc-section {
  background: var(--white);
  border: 1px solid var(--calm-border);
  border-radius: 14px; overflow: hidden;
  transition: box-shadow var(--calm-dur) var(--calm-ease);
}
.acc-section:hover { box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.acc-header {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: none; border: none; cursor: pointer;
  font-family: 'Noto Sans KR', sans-serif;
  text-align: left; transition: background var(--calm-dur) var(--calm-ease);
}
.acc-header:hover { background: rgba(123,174,203,.04); }
.acc-header.open { background: rgba(123,174,203,.04); border-bottom: 1px solid var(--calm-border); }
.acc-h-icon { font-size: 17px; flex-shrink: 0; }
.acc-h-title {
  flex: 1; font-size: 13.5px; font-weight: 700; color: var(--ink);
  letter-spacing: -.2px;
}
.acc-h-sub { font-size: 11px; color: var(--ink-l); white-space: nowrap; }
.acc-arrow { font-size: 12px; color: var(--ink-l); transition: transform var(--calm-dur) var(--calm-ease); flex-shrink: 0; }
.acc-header.open .acc-arrow { transform: rotate(180deg); }
.acc-body {
  display: none; padding: 16px 20px 18px;
  animation: up .35s var(--calm-ease-out) both;
}
.acc-body.open { display: block; }
/* 아코디언 안의 카드 스타일 재활용 */
.acc-body .card { animation: none; border-radius: 12px; }
.acc-body .grid { gap: 10px; }

/* ── 마음 돌봄 페이지 탭 ── */
.mental-stage-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 16px 28px 0;
}
.mental-tab {
  padding: 7px 16px; border-radius: 24px;
  border: 1.5px solid var(--line); background: var(--white);
  font-family: 'Noto Sans KR', sans-serif; font-size: 12px; font-weight: 700;
  color: var(--ink-m); cursor: pointer; transition: all .2s;
}
.mental-tab:hover { border-color: var(--peach); color: var(--peach-d); background: var(--peach-p); }
.mental-tab.on { border-color: var(--peach-d); color: var(--peach-d); background: var(--peach-p); }
#mental-content { padding: 16px 28px 60px; }
.mental-full-card {
  background: var(--white);
  border: 1px solid rgba(123,174,203,.12);
  border-radius: 18px; padding: 24px 26px;
  margin-bottom: 14px;
}
.mental-full-card h3 {
  font-size: 15px; font-weight: 800; color: var(--ink);
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.mental-risk-box {
  background: rgba(200,60,60,.07); border: 1px solid rgba(200,60,60,.18);
  border-radius: 10px; padding: 11px 14px;
  font-size: 13px; color: #8A2020; font-weight: 600; line-height: 1.6;
  margin-bottom: 14px;
}
.mental-section-label {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #6A3A90; margin-bottom: 8px;
}
.mental-full-card ul { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.mental-full-card ul li {
  font-size: 13px; color: var(--ink-m); line-height: 1.65;
  padding-left: 16px; position: relative;
}
.mental-full-card ul li::before {
  content: '·'; position: absolute; left: 3px;
  color: #8A5AB4; font-size: 20px; line-height: 1.28; font-weight: 700;
}
.mental-hotline {
  background: rgba(107,168,133,.06); border: 1px solid rgba(107,168,133,.16);
  border-radius: 12px; padding: 13px 16px; margin-top: 4px;
  font-size: 13px; color: var(--ink-m); line-height: 1.8;
}
.mental-hotline strong { color: #6A3A90; }

/* ── 청소년·청년 페이지 ── */
.page-view--teen {
  background: linear-gradient(180deg, #1A1F3A 0%, #12172E 100%);
  min-height: 100vh;
}
.teen-page-header {
  background: rgba(26,31,58,.92) !important;
  border-bottom-color: rgba(100,120,200,.2) !important;
}
.teen-back { border-color: rgba(100,120,200,.35) !important; color: #A0AACC !important; }
.teen-back:hover { background: rgba(100,120,200,.15) !important; border-color: #5B7CFA !important; color: #B0C0FF !important; }
.teen-title { color: #C0CAFF !important; }
.teen-intro {
  padding: 28px 28px 8px;
  font-family: 'Gowun Batang', serif;
}
.teen-intro p {
  font-size: 17px; color: #B0BAEE; line-height: 1.85;
  margin-bottom: 6px; font-weight: 400;
}
.teen-age-select { padding: 20px 28px; }
.teen-age-label { font-size: 15px; color: #9AA2CC; margin-bottom: 10px; font-weight: 500; }
.teen-age-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.teen-age-btn {
  padding: 9px 22px; border-radius: 24px;
  background: rgba(80,100,180,.15);
  border: 1.5px solid rgba(80,100,180,.30);
  font-family: 'Noto Sans KR', sans-serif; font-size: 13px; font-weight: 700;
  color: #9AA8D8; cursor: pointer; transition: all .2s;
}
.teen-age-btn:hover { background: rgba(91,124,250,.25); border-color: #5B7CFA; color: #C0CAFF; }
.teen-age-btn.on { background: rgba(91,124,250,.30); border-color: #5B7CFA; color: #D0D8FF; }
#teen-content { padding: 8px 28px 24px; }
.teen-content-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(100,120,200,.18);
  border-radius: 16px; padding: 20px 22px; margin-bottom: 12px;
}
.teen-content-card h4 {
  font-size: 14px; font-weight: 700; color: #A0B0F0;
  margin-bottom: 10px;
}
.teen-quote {
  font-family: 'Gowun Batang', serif;
  font-size: 15px; color: #8A9AE0; line-height: 1.9;
  font-style: italic; padding-left: 14px;
  border-left: 3px solid rgba(91,124,250,.4);
  margin-bottom: 16px;
}
.teen-stat-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(91,124,250,.15); border: 1px solid rgba(91,124,250,.28);
  border-radius: 20px; padding: 4px 13px 4px 10px;
  font-size: 12px; font-weight: 700; color: #8A9AE0;
  margin-bottom: 14px;
}
.teen-stat-badge .tsn { font-size: 15px; font-weight: 800; color: #7A8AEE; }
.teen-content-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.teen-content-card ul li {
  font-size: 13px; color: #8090C0; line-height: 1.75;
  padding-left: 16px; position: relative;
}
.teen-content-card ul li::before {
  content: '·'; position: absolute; left: 3px;
  color: #5B7CFA; font-size: 20px; line-height: 1.28;
}
.teen-safe-section {
  background: rgba(200,60,60,.08); border: 1px solid rgba(200,60,60,.20);
  border-radius: 14px; padding: 18px 20px; margin-bottom: 12px;
}
.teen-safe-title { font-size: 13.5px; font-weight: 700; color: #E06060; margin-bottom: 10px; }
.teen-safe-section ul li::before { color: #E06060; }
.teen-safe-section ul li { color: #C09090; }
.teen-sos {
  margin: 16px 28px 40px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(100,120,200,.18);
  border-radius: 18px; padding: 20px 22px;
}
.teen-sos-title {
  font-size: 13px; font-weight: 700; color: #9AA8D8;
  margin-bottom: 12px;
}
.teen-sos-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 14px;
  background: rgba(80,100,180,.12);
  border: 1.5px solid rgba(80,100,180,.25);
  text-decoration: none; margin-bottom: 8px;
  transition: all .2s; cursor: pointer;
}
.teen-sos-btn:hover { background: rgba(91,124,250,.22); border-color: #5B7CFA; }
.teen-sos-num {
  font-family: 'Gowun Batang', serif;
  font-size: 22px; font-weight: 700; color: #A0B0F0;
  flex-shrink: 0; min-width: 80px;
}
.teen-sos-desc { font-size: 12px; color: #7080B0; line-height: 1.6; }

/* ── 긴급 허브 페이지 ── */
.page-view--emergency { background: var(--cream); }
.emergency-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
}
.emer-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 24px 12px;
  border-radius: 18px; text-decoration: none;
  transition: all var(--calm-dur) var(--calm-ease);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  min-height: 100px;
}
.emer-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.10); }
.emer-num {
  font-family: 'Gowun Batang', serif;
  font-size: 26px; font-weight: 700; line-height: 1;
}
.emer-label { font-size: 12px; font-weight: 700; opacity: .85; letter-spacing: -.1px; }
.emer-red { background: var(--emer-red-grad); color: #fff; }
.emer-purple { background: var(--emer-purple-grad); color: #fff; }
.emer-green { background: var(--emer-green-grad); color: #fff; }
.emer-blue { background: var(--emer-blue-grad); color: #fff; }
.emer-notes {
  margin: 0 28px 20px;
  background: var(--white);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.emer-note-item { font-size: 13px; color: var(--ink-m); line-height: 1.65; }
.emer-note-item strong { color: var(--ink); font-weight: 700; }
/* ── 긴급 허브 히어로 영역 ── */
.emergency-hero-area {
  text-align: center; padding: var(--sp-4) var(--sp-4) var(--sp-1);
}
.emergency-hero-text {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 17px; font-weight: 700;
  color: var(--ink); line-height: 1.8;
  letter-spacing: -.3px;
}
.emergency-hero-text span {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px; font-weight: 400;
  color: var(--ink-l); display: block;
  margin-top: 4px;
}

.emer-firstaid-wrap {
  padding: var(--sp-3) var(--sp-4) var(--sp-8); margin-top: var(--sp-2);
  border-top: 1px solid var(--line);
}
.emer-firstaid-title {
  font-size: 15px; font-weight: 700; color: var(--ink);
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}

/* ── birth-wrap 내 패딩 조정 (page-view 안에 있으므로) ── */
#page-birth .birth-wrap { padding: 16px 28px 60px; }

/* ── sp-result padding 조정 ── */
#page-sp #sp-result { padding: 16px 28px 60px; }

/* ── result padding 조정 ── */
#page-growth #result { padding: 0 48px 60px; }

/* ── 반응형 ── */
@media(max-width:640px){
  .situation-grid { grid-template-columns: 1fr; }
  .sit-card { padding: 14px; }
  .sit-icon { font-size: 22px; width: 40px; height: 40px; border-radius: 10px; }
  .sit-title { font-size: 13px; }
  .page-header { padding: 14px 18px 12px; }
  .page-title { font-size: 16px; }
  .summary-panel { margin-bottom: 14px; }
  .acc-container { margin: 0; }
  .emergency-grid { padding: 16px 18px; gap: 8px; }
  .emer-btn { padding: 18px 8px; min-height: 80px; }
  .emer-num { font-size: 20px; }
  .emer-notes { margin: 0 18px 16px; }
  .emer-firstaid-wrap { padding: 0 18px 80px; }
  .symptom-checker { margin: 12px 18px; }
  .mental-stage-tabs { padding: 12px 18px 0; }
  #mental-content { padding: 12px 18px 80px; }
  .teen-intro { padding: 20px 18px 8px; }
  .teen-age-select { padding: 14px 18px; }
  #teen-content { padding: 8px 18px 20px; }
  .teen-sos { margin: 12px 18px 60px; }
  #page-birth .birth-wrap { padding: 14px 18px 80px; }
  #page-sp #sp-result { padding: 12px 18px 80px; }
  #page-growth .pills { padding: 14px 18px 16px; }
  #page-growth #result { padding: 0 18px 80px; }
  #page-growth #medical-disclaimer { margin: 0 18px 14px; }
}
@media(max-width:900px){
  .situation-grid { max-width: 100%; }
  .acc-container { margin: 0 24px; }
  .summary-panel { margin: 0 24px 14px; }
}

/* ═══════════════════════════════════════════════
   Phase 1 신규 컴포넌트 스타일
═══════════════════════════════════════════════ */

/* ── 미니 툴킷 패널 ── */
.toolkit-wrap {
  margin: 0 48px 0;
  padding: 18px 22px;
  background: linear-gradient(135deg, #FFF5F0, #FFF0EA);
  border: 1.5px solid rgba(123,174,203,.20);
  border-radius: 20px;
  margin-bottom: 16px;
}
.toolkit-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-m);
  margin-bottom: 12px;
}
.toolkit-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.toolkit-btn {
  min-height: 44px;
  padding: 9px 16px;
  background: var(--white);
  border: 1.5px solid rgba(123,174,203,.18);
  border-radius: 12px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.22s;
  word-break: keep-all;
}
.toolkit-btn:hover, .toolkit-btn.on {
  background: var(--peach-p);
  border-color: var(--peach);
  color: var(--peach-d);
  transform: translateY(-1px);
  box-shadow: var(--calm-shadow-hover);
}
.toolkit-panel {
  display: none;
  margin-top: 14px;
}
.toolkit-panel.on { display: block; }

/* 툴킷 3단계 카드 */
.toolkit-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.toolkit-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--white);
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(123,174,203,.10);
}
.toolkit-step-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: var(--peach-d);
  color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.toolkit-step-body { flex: 1; }
.toolkit-step-body strong {
  display: block;
  font-size: 13px; font-weight: 700;
  color: var(--ink); margin-bottom: 4px;
}
.toolkit-step-body p { font-size: 12.5px; color: var(--ink-m); line-height: 1.7; margin: 0; }

/* 타이머 버튼 */
.timer-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 18px;
  background: var(--peach); color: white;
  border: none; border-radius: 12px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px; font-weight: 700;
  cursor: pointer; margin-top: 8px;
  transition: all 0.22s;
}
.timer-btn:hover { background: var(--peach-d); transform: translateY(-2px); }

/* 나이 선택 필 버튼 */
.age-pill-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.age-pill {
  min-height: 40px; padding: 7px 15px;
  background: var(--white);
  border: 1.5px solid rgba(123,174,203,.18);
  border-radius: 20px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: all 0.2s;
  word-break: keep-all;
}
.age-pill:hover, .age-pill.on {
  background: var(--peach-p); border-color: var(--peach);
  color: var(--peach-d);
}

/* 툴킷 내 콘텐츠 박스 */
.toolkit-content-box { display: block; }
.tk-normal {
  background: rgba(60,150,90,.07);
  border-radius: 12px; padding: 12px 16px;
  border-left: 3px solid #3A9A60;
  margin-bottom: 10px;
}
.tk-warn {
  background: rgba(200,60,60,.07);
  border-radius: 12px; padding: 12px 16px;
  border-left: 3px solid #C04040;
  margin-bottom: 10px;
}
.tk-tip {
  background: rgba(74,122,170,.07);
  border-radius: 12px; padding: 12px 16px;
  border-left: 3px solid #4A7AAA;
  margin-bottom: 10px;
}
.tk-box-title { font-size: 11.5px; font-weight: 700; margin-bottom: 6px; }
.tk-box-list { padding-left: 18px; margin: 0; }
.tk-box-list li { font-size: 12.5px; color: var(--ink-m); line-height: 1.65; margin-bottom: 4px; }

/* ── 산후우울증 체커 ── */
.ppd-checker {
  background: linear-gradient(135deg,#F8F0FE,#F0EAFF);
  border: 1.5px solid rgba(160,80,200,.15);
  border-radius: 20px; padding: 20px 18px;
  margin: 0 24px 16px;
}
@media(max-width:640px){
  .ppd-checker{ margin:0 18px 16px; padding:16px 14px; }
  .ppd-btn{ min-width:auto; padding:6px 10px; font-size:12px; }
}
.ppd-checker-title {
  font-size: 15px; font-weight: 800;
  color: var(--ink); margin-bottom: 4px;
}
.ppd-checker-sub {
  font-size: 13px; color: var(--ink-m); margin-bottom: 16px;
  line-height: 1.6;
}
.ppd-questions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ppd-q-item {
  display: flex; flex-direction:column;
  gap: 10px; background: var(--white);
  border-radius: 16px; padding: 13px 16px;
  border: 1px solid rgba(160,80,200,.10);
}
.ppd-q-item.critical { border-color: rgba(200,40,40,.25); background: #FFF5F5; }
.ppd-q-text { flex: 1; font-size: 13px; color: var(--ink); line-height: 1.6; word-break: keep-all; }
.ppd-q-btns { display: flex; gap: 6px; flex-wrap:wrap; align-items: center; }
.ppd-btn {
  min-width: 44px; min-height: 36px; padding: 6px 12px;
  border: 1.5px solid rgba(160,80,200,.20);
  border-radius: 10px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px; font-weight: 600; color: var(--ink-m);
  background: transparent; cursor: pointer;
  transition: all 0.2s;
}
.ppd-btn:hover { background: rgba(160,80,200,.08); border-color: rgba(160,80,200,.35); }
.ppd-btn.on { background: rgba(160,80,200,.14); border-color: #A050C8; color: #6A3A90; }
.ppd-btn.yes-on { background: rgba(200,40,40,.10); border-color: #C04040; color: #A03030; }
.ppd-btn.no-on { background: rgba(60,150,90,.10); border-color: #3A9A60; color: #2A7A40; }
.ppd-result {
  display: none;
  border-radius: 14px; padding: 16px 18px;
  font-size: 13.5px; line-height: 1.7;
}
.ppd-result.on { display: block; }
.ppd-result.res-critical { background: rgba(200,40,40,.09); border: 1.5px solid rgba(200,40,40,.25); color: #8A2020; }
.ppd-result.res-high { background: rgba(130,60,200,.08); border: 1.5px solid rgba(130,60,200,.20); color: #5A208A; }
.ppd-result.res-mid { background: rgba(200,140,40,.08); border: 1.5px solid rgba(200,140,40,.20); color: #7A5010; }
.ppd-result.res-ok { background: rgba(60,150,90,.07); border: 1.5px solid rgba(60,150,90,.20); color: #2A6A40; }
.ppd-disclaimer { font-size: 11.5px; color: var(--ink-l); margin-top: 12px; line-height: 1.55; }

/* ── 감정 선택기 (청소년) ── */
.emotion-selector {
  padding: 16px 18px;
  background: rgba(123,104,238,.06);
  border-radius: 18px;
  margin: 0 0 16px;
}
.emotion-selector-title {
  font-size: 15px; font-weight: 700;
  color: #9B8EC4; margin-bottom: 4px;
}
.emotion-selector-sub { font-size: 13px; color: #A090C8; margin-bottom: 14px; }
.emotion-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.emo-btn {
  min-height: 64px; padding: 8px 4px;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(160,140,240,.20);
  border-radius: 14px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 12px; font-weight: 600;
  color: #C0B8E8; cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  transition: all 0.22s;
}
.emo-btn span.emo-em { font-size: 22px; }
.emo-btn:hover, .emo-btn.on {
  background: rgba(160,140,240,.18);
  border-color: #9B8EC4; color: #E0DCF8;
  transform: translateY(-2px);
}
.emo-result { display: none; }
.emo-result.on {
  display: block;
  background: rgba(255,255,255,.07);
  border-radius: 16px; padding: 16px 18px;
  border: 1px solid rgba(160,140,240,.20);
}
.emo-result-msg { font-size: 14px; color: #D0C8F0; line-height: 1.75; margin-bottom: 12px; word-break: keep-all; }
.emo-result-action {
  background: rgba(255,183,71,.12);
  border-radius: 12px; padding: 12px 16px;
  border-left: 3px solid #FFB347;
  font-size: 13px; color: #E8C870;
  line-height: 1.65; margin-bottom: 12px;
}
.emo-result-link { font-size: 12.5px; color: #A090C8; line-height: 1.55; }

/* ── 가이드 탭 바 ── */
.guide-tab-bar {
  display: flex;
  border-bottom: 2px solid rgba(123,174,203,.12);
  margin: 0 48px 16px;
  background: var(--white);
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}
.guide-tab {
  flex: 1; min-height: 50px;
  padding: 13px 16px;
  border: none; background: transparent;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13.5px; font-weight: 700;
  color: var(--ink-m); cursor: pointer;
  transition: all 0.2s;
  border-bottom: 3px solid transparent;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  word-break: keep-all;
}
.guide-tab:hover { background: var(--peach-p); color: var(--peach-d); }
.guide-tab.on { color: var(--peach-d); border-bottom-color: var(--peach-d); }

/* ── 아빠 가이드 스타일 ── */
.dad-summary-num {
  flex-shrink: 0; width: 24px; height: 24px;
  background: #4A7AAA; color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.dad-toolkit-block {
  background: rgba(74,122,170,.06);
  border-left: 3px solid #4A7AAA;
  border-radius: 0 11px 11px 0;
  padding: 14px 16px; margin-bottom: 10px;
}
.dad-toolkit-title { font-size: 13px; font-weight: 700; color: #2A4A6A; margin-bottom: 10px; }
.dad-toolkit-step {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px;
}
.dad-toolkit-step-num {
  flex-shrink: 0; width: 22px; height: 22px;
  background: #4A7AAA; color: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}

/* ── 긴급 허브 개선된 버튼 ── */
.emergency-btn-full {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-1); width: 100%;
  padding: var(--sp-3) var(--sp-2);
  background: var(--white);
  border: 1px solid var(--calm-border);
  border-top: 2px solid var(--ebf-color, var(--peach));
  border-radius: 18px;
  text-decoration: none; color: var(--ink);
  transition: all var(--calm-dur) var(--calm-ease); cursor: pointer;
  box-shadow: var(--calm-shadow);
  text-align: center; min-height: 120px;
}
.emergency-btn-full:hover {
  transform: translateY(-2px);
  box-shadow: var(--calm-shadow-hover);
}
.emergency-btn-full:active {
  transform: translateY(-1px);
}
.ebf-icon { font-size: 24px; flex-shrink: 0; }
.ebf-content { flex: 1; }
.ebf-number { font-size: 22px; font-weight: 800; color: var(--ebf-color, var(--peach-d)); font-family: 'Gowun Batang', serif; display: block; letter-spacing: -.3px; }
.ebf-name { font-size: 12.5px; font-weight: 700; color: var(--ink); display: block; margin-top: 2px; }
.ebf-desc { font-size: 11px; color: var(--ink-l); line-height: 1.45; margin-top: 3px; display: block; }

/* 긴급 허브 헤더 메시지 */
.emergency-hero-msg {
  text-align: center;
  padding: 20px 48px 16px;
}
.emergency-hero-msg h3 {
  font-size: 18px; font-weight: 800;
  color: var(--ink); margin-bottom: 6px;
}
.emergency-hero-msg p {
  font-size: 13.5px; color: var(--ink-m);
  line-height: 1.65;
}

/* ── 개인정보 없음 안내 (청소년) ── */
.teen-privacy-notice {
  text-align: center;
  font-size: 12px; color: #8090C0;
  padding: 12px 18px 20px;
  line-height: 1.55;
}

@media(max-width:640px) {
  .toolkit-wrap { margin: 0 18px; }
  .ppd-checker { margin: 0 18px 14px; }
  .guide-tab-bar { margin: 0 18px 14px; }
  .emotion-grid { grid-template-columns: repeat(4, 1fr); }
  .emergency-hero-msg { padding: 16px 18px 12px; }
  .emergency-hero-area { padding: 20px 18px 4px; }
  .emergency-hero-text { font-size: 16px; }
}

/* ══════════════════════════════════════════
   SECTION CARE / SELF — 메인 화면 2영역
══════════════════════════════════════════ */
.section-care,
.section-self{
  padding:var(--sp-4) 0;
  margin-bottom:0;
}
.section-care{
  background:transparent;
  border:none;
  border-radius:0;
}
.section-self{
  background:transparent;
  border:none;
  border-radius:0;
}
.section-header{
  margin-bottom:var(--sp-4);
  text-align:center;
}
.section-title{
  font-family:'Gowun Batang',serif;
  font-size:18px;
  font-weight:700;
  margin-bottom:6px;
  letter-spacing:-.3px;
  line-height:1.4;
}
.section-care .section-title{ color:var(--peach-d); }
.section-self .section-title{ color:var(--lavender-d); }
.section-sub{
  font-size:12.5px;
  color:var(--ink-l);
  line-height:1.6;
}
/* self-area 카드 색조 (힐링 그린 기반) */
.sit-card.self-area{
  border-color:rgba(107,168,133,.16);
}
.sit-card.self-area .sit-icon{
  background:var(--lavender-p);
  border-color:rgba(107,168,133,.18);
}
@media (hover: hover) {
  .sit-card.self-area:hover{
    border-color:rgba(107,168,133,.45);
    box-shadow:
      0 0 8px rgba(107,168,133,.18),
      0 0 20px rgba(107,168,133,.10),
      0 0 40px rgba(107,168,133,.05);
  }
}
/* 모바일 section 패딩은 MOBILE COMPACT 섹션에서 통합 관리 */

/* ══════════════════════════════════════════
   MOOD SECTION — 오늘 기분 기록
══════════════════════════════════════════ */
.mood-section{
  background:transparent;
  border:none;
  border-radius:0;
  padding:var(--sp-3) 0;
  text-align:center;
  margin:0 0 var(--sp-2);
}
.mood-icon-row{
  font-size:28px;margin-bottom:8px;
}
.mood-label{
  font-family:'Noto Sans KR',sans-serif;
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:4px;
  letter-spacing:-.2px;
}
.mood-sub{
  font-size:12px;
  color:var(--ink-l);
  margin-bottom:16px;
}
.mood-btns{
  display:flex;
  justify-content:center;
  gap:var(--sp-2);
  flex-wrap:wrap;
}
.mood-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  min-width:88px;
  min-height:76px;
  padding:12px 16px;
  border:1.5px solid rgba(0,0,0,.05);
  border-radius:16px;
  background:var(--white);
  cursor:pointer;
  font-size:22px;
  transition:all var(--calm-dur) var(--calm-ease);
}
.mood-btn span{
  font-family:'Noto Sans KR',sans-serif;
  font-size:12px;
  color:var(--ink-m);
}
.mood-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--calm-shadow-hover);
  border-color:rgba(123,174,203,.15);
}
.mood-btn.selected{
  border-color:var(--peach);
  background:var(--peach-p);
}
.mood-result{
  margin-top:16px;
  padding:14px 20px;
  border-radius:14px;
  background:var(--warm);
  font-size:13.5px;
  line-height:1.7;
  color:var(--ink);
  animation:up .3s ease both;
}
@media(max-width:640px){
  .mood-section{ padding:20px 18px 24px; }
}

/* ══════════════════════════════════════════
   EMERGENCY BANNER — 긴급 도움 풀와이드 배너
══════════════════════════════════════════ */
/* ── 긴급 도움 (조용한 링크) ── */
.emergency-quiet{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;
  padding:14px 0;
  cursor:pointer;
  animation:up .5s .28s cubic-bezier(.22,1,.36,1) both;
}
.eq-text{
  font-family:'Noto Sans KR',sans-serif;
  font-size:13px;font-weight:600;
  color:var(--ink-l);
  letter-spacing:-.2px;
  transition:color .25s;
}
.eq-arrow{
  font-size:12px;color:var(--ink-l);
  transition:all .25s;
}
.emergency-quiet:hover .eq-text{color:var(--emer-119);}
.emergency-quiet:hover .eq-arrow{color:var(--emer-119);transform:translateX(3px);}

/* ══════════════════════════════════════════
   CALM OVERRIDE — 홈화면 전용
══════════════════════════════════════════ */
/* 카드: 통일된 calm 서피스 */
.hero .sit-card,
.hero .sit-card[data-card-id]{
  background:var(--calm-bg-surface);
  border:1px solid var(--calm-border);
  border-radius:var(--calm-r);
  padding:22px 20px;
  gap:16px;
  box-shadow:var(--calm-shadow);
  transition:all var(--calm-dur) var(--calm-ease);
}
.hero .sit-card:active,
.hero .sit-card.tap{
  transform:scale(.98);
  transition-duration:120ms;
}
.hero .sit-card::before{display:none;}
@media(hover:hover){
  .hero .sit-card:hover{
    transform:translateY(-2px);
    background:var(--calm-bg-elevated);
    box-shadow:var(--calm-shadow-hover);
    border-color:rgba(123,174,203,.12);
  }
  .hero .sit-card:hover .sit-icon{transform:none;}
  .hero .sit-card:hover .sit-arrow{opacity:.5;transform:translateX(2px);}
}
/* self-area 그린 틴트 제거 */
.hero .sit-card.self-area{border-color:var(--calm-border);}
.hero .sit-card.self-area:active{border-color:var(--calm-border);}
@media(hover:hover){
  .hero .sit-card.self-area:hover{
    border-color:rgba(232,168,124,.20);
    box-shadow:var(--calm-shadow),var(--calm-glow);
  }
}

/* 텍스트: calm 토큰 */
.hero .sit-title{
  font-size:14.5px;font-weight:600;color:var(--calm-text-1);
  line-height:1.5;letter-spacing:-.2px;margin-bottom:4px;
}
.hero .sit-sub{
  font-size:12.5px;color:var(--calm-text-2);line-height:1.6;
}
.hero .sit-arrow{
  font-size:16px;color:var(--calm-text-3);opacity:.3;
  transition:all var(--calm-dur) var(--calm-ease);
}

/* 섹션 제목: 중립 색상 */
.hero .section-title{
  font-size:18px;font-weight:600;color:var(--calm-text-1);
  letter-spacing:-.3px;margin-bottom:8px;
}
.hero .section-care .section-title,
.hero .section-self .section-title{color:var(--calm-text-1);}
.hero .section-sub{font-size:13px;color:var(--calm-text-2);}
.hero .section-header{margin-bottom:24px;}

/* 그리드 간격 */
.hero .situation-grid{gap:14px;}
.hero .hero-sections{gap:48px;}

/* 보조 요소 */
.hero .guide-finder-btn{
  color:var(--calm-text-3);font-size:13.5px;
  margin-bottom:24px;
  transition:color var(--calm-dur) var(--calm-ease);
}
.hero .guide-finder-btn:hover{color:var(--calm-warm);}
.hero .show-more-btn{
  font-size:13px;font-weight:500;color:var(--calm-text-3);
  padding:14px 0;margin-top:8px;
  transition:color var(--calm-dur) var(--calm-ease);
}
.hero .show-more-btn:hover{color:var(--calm-warm);}
.hero .emergency-quiet{padding:16px 0;margin-top:8px;}
.hero .eq-text{color:var(--calm-text-2);font-size:13.5px;font-weight:500;}
.hero .eq-arrow{color:var(--calm-text-3);}
.hero .home-quote p{font-size:14px;color:var(--calm-text-2);line-height:1.8;}

/* 다크모드 calm */
[data-theme="dark"] .hero .sit-card,
[data-theme="dark"] .hero .sit-card[data-card-id]{
  background:var(--calm-bg-surface);
  border-color:var(--calm-border);
  box-shadow:0 1px 6px rgba(0,0,0,.20);
}
@media(hover:hover){
  [data-theme="dark"] .hero .sit-card:hover{
    background:var(--calm-bg-elevated);
    border-color:rgba(123,174,203,.12);
    box-shadow:0 4px 16px rgba(0,0,0,.25);
  }
}

/* 모바일 calm */
@media(max-width:640px){
  .hero .sit-card{padding:20px 18px;gap:14px;border-radius:16px;}
  .hero .sit-title{font-size:13.5px;}
  .hero .sit-sub{font-size:11px;}
  .hero .section-header{margin-bottom:16px;}
  .hero .hero-sections{gap:32px;}
}

/* ══════════════════════════════════════════
   HERO SECTIONS WRAPPER
══════════════════════════════════════════ */
.hero-sections{
  width:100%;
  display:flex;flex-direction:column;
  gap:var(--sp-4);
}

/* ══════════════════════════════════════════
   DESKTOP LAYOUT (960px+)
   히어로 풀와이드 → 섹션 2컬럼 나란히
══════════════════════════════════════════ */
@media(min-width:960px){
  .hero{
    padding:48px 60px 32px;
    max-width:1120px;
    margin:0 auto;
  }
  .hero h1{
    font-size:clamp(24px,2.5vw,32px);
  }
  /* 감정 체크인: 섹션 위, 가로 정렬 */
  .mood-section{
    background:transparent;
    border:none;
    margin-bottom:var(--sp-4);
  }
  .mood-btns{ gap:var(--sp-2); }
  /* 데스크톱: 두 섹션 나란히 (돌봄 | 마음 빠른 선택) */
  .hero-sections{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--sp-4);
    max-width:960px;
  }
  .section-care,
  .section-self{
    padding:0;
  }
  .situation-grid{
    grid-template-columns:1fr;
    max-width:100%;
    gap:12px;
  }
  .emergency-quiet{
    margin-top:12px;
  }
  .page-view{
    max-width:680px;
  }
  .page-header{
    max-width:680px;
    margin:0 auto;
    border-radius:0 0 16px 16px;
  }
}

/* 태블릿 (641–959px) */
@media(min-width:641px) and (max-width:959px){
  .hero{
    padding:var(--sp-6) var(--sp-4) var(--sp-3);
  }
  .situation-grid{
    max-width:480px;
    margin:0 auto;
  }
  .section-care,
  .section-self{
    padding:var(--sp-3) 0;
  }
}

/* ══════════════════════════════════════════
   MOBILE COMPACT (≤640px)
══════════════════════════════════════════ */
@media(max-width:640px){
  .hero{ padding:var(--sp-2) var(--sp-2) var(--sp-1); }
  .hero h1{ font-size:18px; margin-bottom:4px; }
  .hero .hero-sub{ font-size:13px; margin-bottom:var(--sp-2); }
  .section-care,
  .section-self{ padding:var(--sp-2) 0; }
  .section-header{ margin-bottom:var(--sp-2); }
  .section-title{ font-size:15px; }
  .situation-grid{ gap:10px; margin-bottom:0; }
  .sit-card{ padding:16px; gap:12px; border-radius:16px; }
  .sit-icon{ width:32px; height:32px; font-size:22px; }
  .sit-title{ font-size:13px; }
  .sit-sub{ font-size:10.5px; }
  .sit-arrow{ bottom:10px; right:12px; font-size:11px; }
  .mood-section{ padding:var(--sp-2) 0; margin:0; }
  .mood-label{ font-size:14px; margin-bottom:var(--sp-1); }
  .mood-btn{ min-width:76px; min-height:64px; padding:10px 12px; font-size:20px; }
  .mood-btn span{ font-size:11px; }
  .emergency-quiet{ padding:var(--sp-1) 0; }
  .content-hero{ padding:var(--sp-3); margin:0 var(--sp-2) var(--sp-2); }
  .emergency-grid{ padding:var(--sp-2); gap:var(--sp-1); }
  .emer-firstaid-wrap{ padding:var(--sp-2) var(--sp-2) var(--sp-6); }
}

/* ══════════════════════════════════════════
   CONTENT PAGE — 공통 페이지 템플릿
══════════════════════════════════════════ */
.content-hero{
  border-radius:20px;
  padding:var(--sp-4) var(--sp-4) var(--sp-3);
  margin:0 var(--sp-3) var(--sp-4);
  color:white;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 -30px 50px -25px rgba(0,0,0,.04);
}
.content-hero h1{
  font-family:'Gowun Batang',serif;
  font-size:20px;
  font-weight:700;
  margin-bottom:var(--sp-1);
  line-height:1.4;
}
.content-hero p{
  font-size:13.5px;
  opacity:.88;
  line-height:1.7;
}
.content-hero-icon{
  display:block;
  font-size:28px;
  margin-bottom:10px;
}
.stat-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  border-radius:20px;
  padding:6px 14px;
  font-size:12px;
  color:var(--ink-m);
  margin:0 24px 20px;
}
.stat-badge strong{
  font-size:14px;
  font-weight:700;
  color:var(--peach-d);
}
.step-section{
  padding:0 24px;
  margin-bottom:26px;
}
.step-label{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-l);
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid var(--line);
}
@media(max-width:640px){
  .content-hero{ margin:0 18px 14px; padding:20px 20px; }
  .page-view > .page-back:first-child,
  .page-view > div > .page-back:first-child{ margin:10px 18px 8px; }
  .stat-badge{ margin:0 18px 16px; }
  .step-section{ padding:0 18px; }
}

/* ── 인식 목록 (Recognition) ── */
.recognition-list{
  background:var(--warm);
  border-radius:14px;
  padding:var(--sp-2) 18px;
}
.recognition-item{
  display:flex;gap:8px;align-items:flex-start;
  margin-bottom:8px;
  font-size:13px;color:var(--ink-m);line-height:1.7;
  word-break:keep-all;
}
.recognition-dot{
  color:var(--peach-d);flex-shrink:0;
}
.recognition-hint{
  font-size:12px;color:var(--ink-l);
  margin-top:8px;line-height:1.6;
}

/* ── 기법 카드 (Technique) ── */
.technique-item{
  margin-bottom:12px;
}
.technique-name{
  font-size:13px;font-weight:700;
  color:var(--peach-d);
  margin-bottom:4px;
}
.technique-desc{
  font-size:12.5px;color:var(--ink-m);
  line-height:1.75;word-break:keep-all;
  margin:0;
}

/* ── 심리학 설명 텍스트 ── */
.psychology-text{
  font-size:13px;color:var(--ink-m);
  line-height:1.8;word-break:keep-all;
  margin:0;
}

/* ══════════════════════════════════════════
   CHECK TOOL — 상황 판단 컴포넌트
══════════════════════════════════════════ */
.check-tool{
  background:var(--white);
  border:1px solid var(--calm-border);
  border-radius:18px;
  padding:24px 26px;
  margin-bottom:20px;
  box-shadow:var(--calm-shadow);
}
.check-tool-title{
  font-size:14.5px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:14px;
}
.check-item{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:11px 14px;
  border-radius:12px;
  margin-bottom:7px;
  cursor:pointer;
  transition:background .15s;
  font-size:13.5px;
  color:var(--ink-m);
  line-height:1.6;
  word-break:keep-all;
}
.check-item:hover{ background:rgba(123,174,203,.06); }
.check-item.checked{
  background:linear-gradient(135deg, rgba(123,174,203,.10), rgba(107,168,133,.06));
  color:var(--ink);
  font-weight:600;
}
.check-box{
  width:22px;
  height:22px;
  border-radius:6px;
  border:2px solid rgba(123,174,203,.30);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .15s;
  margin-top:1px;
}
.check-item.checked .check-box{
  background:var(--peach-d);
  border-color:var(--peach-d);
  color:white;
  font-size:13px;
  font-weight:700;
  box-shadow:0 2px 8px rgba(74,140,170,.30);
}
.check-result{
  margin-top:14px;
  padding:14px 18px;
  border-radius:16px;
  font-size:13.5px;
  font-weight:700;
  line-height:1.65;
  animation:up .3s ease both;
}
.check-result.high{
  background:rgba(200,80,80,.08);
  border-left:4px solid var(--result-high);
  color:var(--result-high-ink);
}
.check-result.mid{
  background:rgba(200,150,50,.08);
  border-left:4px solid var(--result-mid);
  color:var(--result-mid-ink);
}
.check-result.low{
  background:rgba(60,140,90,.08);
  border-left:4px solid var(--result-low);
  color:var(--result-low-ink);
}
.check-disclaimer{
  font-size:11px;
  font-weight:400;
  color:var(--ink-l);
  margin-top:8px;
  line-height:1.6;
}

/* ══════════════════════════════════════════
   ACTION CHECKLIST — 실행 체크리스트
══════════════════════════════════════════ */
.action-checklist{ margin-bottom:6px; }
.action-title{
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:10px;
}
.action-item{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:13px 15px;
  border-radius:16px;
  margin-bottom:7px;
  cursor:pointer;
  transition:all .2s;
  background:var(--white);
  border:1px solid rgba(123,174,203,.10);
  word-break:keep-all;
}
.action-item:hover{ background:rgba(123,174,203,.04); }
.action-item.done{
  background:linear-gradient(135deg, rgba(123,174,203,.07), rgba(107,168,133,.05));
  border-color:rgba(60,140,90,.15);
}
.action-item.done .action-text{
  text-decoration:line-through;
  opacity:.55;
}
.action-check{
  width:24px;
  height:24px;
  border-radius:50%;
  border:2px solid var(--peach-l);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .15s;
  margin-top:1px;
}
.action-item.done .action-check{
  background:#3A8A50;
  border-color:#3A8A50;
  color:white;
  font-size:13px;
  font-weight:700;
  box-shadow:0 2px 8px rgba(107,168,133,.30);
}
.action-text{
  font-size:13.5px;
  color:var(--ink-m);
  line-height:1.65;
  display:flex;
  gap:8px;
  align-items:flex-start;
}
.action-emoji{ flex-shrink:0; }

/* ══════════════════════════════════════════
   HELP CONNECT — 도움 연결 카드
══════════════════════════════════════════ */
.help-cards{ display:flex; flex-direction:column; gap:10px; }
.help-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  background:var(--white);
  border:1px solid var(--calm-border);
  border-radius:16px;
  text-decoration:none;
  color:var(--ink);
  transition:transform var(--calm-dur) var(--calm-ease),box-shadow var(--calm-dur) var(--calm-ease);
}
.help-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--calm-shadow-hover);
}
.help-card-num{
  font-size:18px;
  font-weight:700;
  color:var(--peach-d);
  min-width:60px;
}
.help-card-info{}
.help-card-name{
  font-size:13.5px;
  font-weight:700;
  margin-bottom:3px;
}
.help-card-desc{
  font-size:12px;
  color:var(--ink-l);
  line-height:1.5;
}
.page-view .accordion-group{
  padding:0 24px;
}
.page-view .help-cards{
  max-width:100%;
}

/* 긴급 전화 대형 버튼 */
.emergency-call-big{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:18px;
  border-radius:16px;
  background:linear-gradient(135deg,#C05050,#D06868);
  color:white;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  margin-bottom:12px;
  transition:transform var(--calm-dur) var(--calm-ease),box-shadow var(--calm-dur) var(--calm-ease);
  border:none;
  cursor:pointer;
}
.emergency-call-big:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(192,80,80,.22);
}

/* ══════════════════════════════════════════
   EMOTION GRID — 감정 선택 그리드
══════════════════════════════════════════ */
.emotion-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:20px;
}
.emotion-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border:1.5px solid var(--line);
  border-radius:14px;
  background:var(--white);
  cursor:pointer;
  font-size:13.5px;
  color:var(--ink-m);
  transition:all .2s;
  text-align:left;
  word-break:keep-all;
  line-height:1.5;
}
.emotion-btn:hover{
  border-color:var(--lavender);
  background:var(--lavender-p);
  transform:translateY(-1px);
}
.emotion-btn.selected{
  border-color:var(--lavender);
  background:var(--lavender-p);
  color:var(--lavender-d);
  font-weight:600;
}
.emotion-btn-icon{ font-size:20px; flex-shrink:0; }
/* 위기 버튼 특별 스타일 */
.emotion-btn.crisis{
  border-color:rgba(192,80,80,.25);
  background:rgba(192,80,80,.04);
  color:#8A2020;
}
.emotion-btn.crisis:hover{
  border-color:#C05050;
  background:rgba(192,80,80,.10);
}

/* ══════════════════════════════════════════
   JOURNAL — 기록 페이지
══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   JOURNAL PAGE — 기록 페이지 (Apple-inspired)
══════════════════════════════════════════ */

/* ── Page Container ── */
.jn-page-content{
  padding:0 18px 100px;
  max-width:560px;
  margin:0 auto;
}

/* ── Hero ── */
.jn-hero{
  text-align:center;
  padding:28px 0 8px;
  animation:up .45s ease both;
}
.jn-hero-icon{
  font-size:36px;
  display:block;
  margin-bottom:8px;
}
.jn-hero-title{
  font-family:'Gowun Batang',serif;
  font-size:22px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-.3px;
  margin:0 0 6px;
}
.jn-hero-sub{
  font-size:13px;
  color:var(--ink-l);
  margin:0;
}

/* ── Tabs ── */
.jn-tabs{
  display:flex;
  gap:6px;
  margin:20px 0 24px;
  background:var(--section-alt);
  border-radius:14px;
  padding:4px;
  animation:up .45s .05s ease both;
}
.jn-tab{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:11px 0;
  border:none;
  background:transparent;
  border-radius:11px;
  font-family:'Noto Sans KR',sans-serif;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink-l);
  cursor:pointer;
  transition:all .22s cubic-bezier(.4,0,.2,1);
}
.jn-tab.on{
  background:var(--white);
  color:var(--ink);
  box-shadow:0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
.jn-tab-icon{
  font-size:15px;
}
.jn-tab-count{
  font-size:11px;
  font-weight:700;
  color:var(--ink-l);
  background:var(--line);
  border-radius:10px;
  padding:1px 7px;
  min-width:18px;
  text-align:center;
}
.jn-tab.on .jn-tab-count{
  background:var(--peach-p);
  color:var(--peach-d);
}

/* ── Tab Content ── */
.jn-tab-content{
  animation:up .35s .1s ease both;
}

/* ── Cards ── */
.jn-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px;
  margin-bottom:16px;
  transition:box-shadow .22s;
}
.jn-card-header{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:20px;
}
.jn-card-icon{
  font-size:28px;
  flex-shrink:0;
  line-height:1;
}
.jn-card-title{
  font-family:'Gowun Batang',serif;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-.2px;
  margin-bottom:3px;
}
.jn-card-sub{
  font-size:12.5px;
  color:var(--ink-l);
  line-height:1.5;
}

/* ── Mood Buttons (in card) ── */
.jn-card .mood-btns{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-bottom:4px;
}
.jn-card .mood-btn{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:18px 12px;
  border:1.5px solid var(--line);
  border-radius:16px;
  background:var(--cream);
  cursor:pointer;
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.jn-card .mood-btn-emoji{
  font-size:28px;
  line-height:1;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.jn-card .mood-btn-label{
  font-family:'Noto Sans KR',sans-serif;
  font-size:12px;
  font-weight:600;
  color:var(--ink-m);
}
.jn-card .mood-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  border-color:var(--peach);
}
.jn-card .mood-btn:hover .mood-btn-emoji{
  transform:scale(1.15);
}
.jn-card .mood-btn.selected{
  background:var(--peach-p);
  border-color:var(--peach);
  box-shadow:0 4px 16px rgba(123,174,203,.18);
}
.jn-card .mood-btn.selected .mood-btn-label{
  color:var(--peach-d);
}

/* ── Mood Memo ── */
.mood-memo-wrap{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .35s ease, opacity .25s ease, margin .25s ease;
  margin-top:0;
}
.mood-memo-wrap.show{
  max-height:200px;
  opacity:1;
  margin-top:18px;
}

/* ── Shared Textarea ── */
.jn-textarea{
  width:100%;
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  font-family:'Noto Sans KR',sans-serif;
  font-size:14px;
  color:var(--ink);
  resize:none;
  background:var(--cream);
  line-height:1.65;
  transition:border-color .2s, box-shadow .2s;
  box-sizing:border-box;
}
.jn-textarea:focus{
  outline:none;
  border-color:var(--peach);
  box-shadow:0 0 0 4px var(--peach-glow);
}
.jn-textarea::placeholder{
  color:var(--ink-l);
}

.jn-textarea-wrap{
  position:relative;
  margin-bottom:4px;
}
.jn-char-count{
  position:absolute;
  bottom:10px;
  right:14px;
  font-size:11px;
  color:var(--ink-l);
  pointer-events:none;
}

/* ── Shared Save Button ── */
.jn-btn-save{
  width:100%;
  padding:14px;
  border-radius:14px;
  background:var(--peach-d);
  color:white;
  font-family:'Noto Sans KR',sans-serif;
  font-size:14.5px;
  font-weight:700;
  border:none;
  cursor:pointer;
  margin-top:12px;
  transition:all .25s cubic-bezier(.34,1.56,.64,1);
  letter-spacing:-.1px;
}
.jn-btn-save:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(123,174,203,.22);
}
.jn-btn-save:active{
  transform:scale(.98);
}
.jn-btn-save.saved{
  background:var(--amber);
}

/* ── Tags ── */
.jn-tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
}
.jn-tag{
  padding:7px 14px;
  border:1.5px solid var(--line);
  border-radius:24px;
  background:var(--white);
  font-family:'Noto Sans KR',sans-serif;
  font-size:12.5px;
  color:var(--ink-m);
  cursor:pointer;
  transition:all .2s;
}
.jn-tag.on{
  background:var(--peach-p);
  border-color:var(--peach);
  color:var(--peach-d);
  font-weight:600;
}
.jn-tag:hover{
  border-color:var(--peach);
}

/* ── Timeline Card ── */
.jn-timeline-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  margin-bottom:16px;
}
.jn-timeline-row{
  display:flex;
  justify-content:space-between;
  gap:4px;
  margin-bottom:12px;
}
.jn-timeline-day{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  flex:1;
}
.jn-timeline-day.today{
  position:relative;
}
.jn-timeline-day.today::after{
  content:'';
  position:absolute;
  bottom:-4px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--peach);
}
.jn-timeline-emoji{
  font-size:22px;
  line-height:1;
}
.jn-timeline-label{
  font-size:10px;
  font-weight:600;
  color:var(--ink-l);
  text-transform:uppercase;
}
.jn-timeline-msg{
  text-align:center;
  font-size:12.5px;
  color:var(--ink-m);
  line-height:1.65;
  margin:0;
  padding:0 4px;
  word-break:keep-all;
}

/* ── History Section ── */
.jn-history-section{
  margin-top:8px;
}
.jn-section-title{
  font-size:13px;
  font-weight:700;
  color:var(--ink-l);
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:12px;
}

/* ── Mood History List ── */
.jn-history-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.jn-history-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  transition:opacity .25s, transform .25s;
}
.jn-history-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
}
.jn-history-emoji{
  font-size:22px;
  flex-shrink:0;
}
.jn-history-info{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.jn-history-mood{
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
}
.jn-history-date{
  font-size:11.5px;
  color:var(--ink-l);
}
.jn-history-memo{
  font-size:12.5px;
  color:var(--ink-m);
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  max-width:140px;
}

/* ── Delete Button ── */
.jn-delete-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:transparent;
  font-family:'Noto Sans KR',sans-serif;
  font-size:12px;
  color:var(--ink-l);
  cursor:pointer;
  transition:all .2s;
  flex-shrink:0;
}
.jn-delete-btn:hover{
  color:#C85050;
  border-color:#C85050;
  background:rgba(200,80,80,.06);
}

/* ── Journal List ── */
.jn-journal-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.jn-journal-item{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  transition:opacity .25s, transform .25s, box-shadow .2s;
}
.jn-journal-item:hover{
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.jn-journal-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 18px;
  cursor:pointer;
  transition:background .15s;
}
.jn-journal-header:active{
  background:var(--section-alt);
}
.jn-journal-meta{
  display:flex;
  flex-direction:column;
  gap:3px;
  flex-shrink:0;
}
.jn-journal-tag{
  font-size:12px;
  font-weight:600;
}
.jn-journal-date{
  font-size:11px;
  color:var(--ink-l);
}
.jn-journal-preview{
  font-size:13px;
  color:var(--ink-m);
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  word-break:keep-all;
}
.jn-journal-chevron{
  color:var(--ink-l);
  flex-shrink:0;
  transition:transform .25s ease;
}
.jn-journal-item.open .jn-journal-chevron{
  transform:rotate(90deg);
}
.jn-journal-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease, padding .3s ease;
  padding:0 18px;
}
.jn-journal-item.open .jn-journal-body{
  max-height:400px;
  padding:0 18px 18px;
}
.jn-journal-body p{
  font-size:14px;
  color:var(--ink);
  line-height:1.72;
  white-space:pre-wrap;
  word-break:keep-all;
  margin:0 0 14px;
  border-top:1px solid var(--line);
  padding-top:14px;
}
.jn-journal-body .jn-delete-btn{
  margin-top:0;
}

/* ── Empty State ── */
.jn-empty{
  text-align:center;
  padding:48px 20px;
}
.jn-empty-icon{
  font-size:40px;
  display:block;
  margin-bottom:12px;
  opacity:.5;
}
.jn-empty p{
  font-size:14px;
  font-weight:600;
  color:var(--ink-m);
  margin:0 0 4px;
}
.jn-empty-sub{
  font-size:13px;
  color:var(--ink-l);
}

/* ── Privacy Notice ── */
.jn-privacy{
  text-align:center;
  font-size:12px;
  color:var(--ink-l);
  margin-top:24px;
  padding:16px;
  background:var(--section-alt);
  border-radius:14px;
  line-height:1.5;
}

/* ── Desktop: wider journal ── */
@media(min-width:640px){
  .jn-page-content{ padding:0 32px 100px; }
}
@media(min-width:960px){
  .jn-page-content{ padding:0 48px 100px; }
}

/* ═══════════════════════════════════════════════
   감정 대시보드 (Dashboard)
═══════════════════════════════════════════════ */

.dash-section{
  margin-bottom:16px;
}

.dash-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:52px;
  padding:14px 18px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  cursor:pointer;
  transition:background .15s, box-shadow .15s;
  -webkit-appearance:none;
  appearance:none;
  font:inherit;
  color:inherit;
}
.dash-toggle:hover{
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.dash-toggle:active{
  background:var(--section-alt);
}
.dash-toggle-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.dash-toggle-icon{
  font-size:18px;
}
.dash-toggle-text{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}
.dash-chevron{
  color:var(--ink-l);
  transition:transform .3s var(--calm-ease, cubic-bezier(.25,.1,.25,1));
  display:flex;
  align-items:center;
}
.dash-chevron.open{
  transform:rotate(180deg);
}

.dash-body{
  margin-top:8px;
  animation:dashFadeIn .3s ease;
}
@keyframes dashFadeIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ── Empty State ── */
.dash-empty{
  text-align:center;
  padding:40px 20px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
}
.dash-empty-icon{
  font-size:36px;
  display:block;
  margin-bottom:12px;
  opacity:.5;
}
.dash-empty p{
  font-size:13px;
  color:var(--ink-l);
  margin:0;
  line-height:1.6;
}

/* ── Insight ── */
.dash-insight{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 18px;
  margin-bottom:12px;
}
.dash-insight-item{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:13px;
  color:var(--ink);
  line-height:1.7;
}
.dash-insight-item + .dash-insight-item{
  margin-top:6px;
}
.dash-insight-dot{
  width:5px;
  height:5px;
  min-width:5px;
  border-radius:50%;
  background:var(--peach);
  display:inline-block;
  margin-top:7px;
}
.dash-insight-item strong{
  color:var(--peach-d);
  font-weight:600;
}

/* ── Charts ── */
.dash-charts{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.dash-chart-wrap{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 14px 12px;
  overflow:hidden;
}
.dash-chart-wrap canvas{
  width:100% !important;
  display:block;
}
.dash-chart-title{
  font-size:12px;
  font-weight:600;
  color:var(--ink-m);
  margin-bottom:10px;
  letter-spacing:.02em;
}
.dash-chart-row{
  display:flex;
  gap:12px;
}
.dash-chart-half{
  flex:1;
  min-width:0;
}

/* ── Mobile ── */
@media(max-width:560px){
  .dash-chart-row{
    flex-direction:column;
  }
  .dash-chart-half{
    flex:none;
  }
}

/* ── Desktop ── */
@media(min-width:640px){
  .dash-toggle{
    padding:16px 22px;
  }
  .dash-insight{
    padding:18px 22px;
  }
}

/* ── Dark Mode (Dashboard) ── */
[data-theme="dark"] .dash-toggle{
  background:var(--white);
  border-color:rgba(255,255,255,.08);
}
[data-theme="dark"] .dash-empty{
  background:var(--white);
  border-color:rgba(255,255,255,.08);
}
[data-theme="dark"] .dash-insight{
  background:var(--white);
  border-color:rgba(255,255,255,.08);
}
[data-theme="dark"] .dash-chart-wrap{
  background:var(--white);
  border-color:rgba(255,255,255,.08);
}

/* ── Dark Mode ── */
[data-theme="dark"] .jn-card{
  background:var(--white);
  border-color:rgba(255,255,255,.08);
}
[data-theme="dark"] .jn-card .mood-btn{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.10);
}
[data-theme="dark"] .jn-card .mood-btn.selected{
  background:var(--peach-p);
  border-color:var(--peach);
}
[data-theme="dark"] .jn-timeline-card{
  background:var(--white);
  border-color:rgba(255,255,255,.08);
}
[data-theme="dark"] .jn-tabs{
  background:rgba(255,255,255,.04);
}
[data-theme="dark"] .jn-tab.on{
  background:var(--white);
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}
[data-theme="dark"] .jn-history-item,
[data-theme="dark"] .jn-journal-item{
  background:var(--white);
  border-color:rgba(255,255,255,.08);
}
[data-theme="dark"] .jn-textarea{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.10);
  color:var(--ink);
}
[data-theme="dark"] .jn-tag{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.10);
}
[data-theme="dark"] .jn-tag.on{
  background:var(--peach-p);
  border-color:var(--peach);
}
[data-theme="dark"] .jn-delete-btn{
  border-color:rgba(255,255,255,.10);
}
[data-theme="dark"] .jn-privacy{
  background:rgba(255,255,255,.04);
}

/* ── Reduced Motion ── */
@media(prefers-reduced-motion:reduce){
  .jn-hero,
  .jn-tabs,
  .jn-tab-content,
  .jn-card .mood-btn,
  .mood-memo-wrap{
    animation:none !important;
    transition:none !important;
  }
}

/* ══════════════════════════════════════════
   ACCORDION
══════════════════════════════════════════ */
.accordion-item{
  border:1px solid var(--line);
  border-radius:14px;
  margin-bottom:8px;
  overflow:hidden;
}
.accordion-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 18px;
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  background:var(--white);
  transition:background .18s;
}
.accordion-header:hover{ background:linear-gradient(135deg, rgba(123,174,203,.05), rgba(107,168,133,.03)); }
.accordion-arrow{
  font-size:12px;
  transition:transform .3s ease;
  color:var(--ink-l);
}
.accordion-item.open .accordion-arrow{ transform:rotate(180deg); }
.accordion-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  background:var(--white);
}
.accordion-body-inner{
  padding:0 18px 16px;
  font-size:13.5px;
  color:var(--ink-m);
  line-height:1.7;
  word-break:keep-all;
}

/* ══════════════════════════════════════════
   DISTINCTION CARD (번아웃 vs 우울증)
══════════════════════════════════════════ */
.distinction-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}
.distinction-col{
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:16px;
}
.distinction-col-title{
  font-size:13px;
  font-weight:700;
  margin-bottom:10px;
}
.distinction-col.burnout .distinction-col-title{ color:var(--burnout-d); }
.distinction-col.depression .distinction-col-title{ color:#5A4080; }
.distinction-col ul{
  list-style:none;
  font-size:12.5px;
  color:var(--ink-m);
  line-height:1.8;
}
.distinction-col ul li::before{ content:"• "; color:var(--ink-l); }
.distinction-note{
  font-size:12px;
  color:var(--ink-l);
  text-align:center;
  padding:10px;
  background:var(--section-alt);
  border-radius:10px;
}
@media(max-width:640px){
  .distinction-grid{ grid-template-columns:1fr; }
  .emotion-grid{ grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════
   CRISIS PAGE — 위기 화면
══════════════════════════════════════════ */
.crisis-page{
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 48px;
  text-align:center;
}
.crisis-msg{
  font-family:'Gowun Batang',serif;
  font-size:18px;
  line-height:1.9;
  color:var(--ink);
  margin-bottom:32px;
  max-width:420px;
}
.crisis-msg em{
  font-style:normal;
  font-weight:700;
}
.crisis-sub{
  font-size:12.5px;
  color:var(--ink-l);
  line-height:1.7;
  margin-top:24px;
  max-width:360px;
}
@media(max-width:640px){
  .crisis-page{ padding:30px 20px; }
}

/* ══════════════════════════════════════════
   TERM TOOLTIP — 전문 용어 설명 팝업
══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   CARD EDIT MODE — 아이폰 스타일 카드 재배치
══════════════════════════════════════════ */
@keyframes wiggle{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(-1.2deg)}
  75%{transform:rotate(1.2deg)}
}
/* 편집 모드: hero overflow 해제 → 카드 잘림 방지 */
.card-edit-mode .hero{
  overflow:visible;
}
.card-edit-mode .sit-card{
  animation:wiggle .28s ease-in-out infinite !important;
  transition:none !important;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
/* 홈 화면 전체 텍스트 선택 방지 */
.hero, .hero *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.card-edit-mode .sit-card:nth-child(even){animation-delay:.14s;}
.card-edit-mode .sit-card:nth-child(3n){animation-direction:reverse;}
.card-edit-mode .sit-card:hover{transform:none;box-shadow:0 2px 6px rgba(0,0,0,.05);}
.card-edit-mode .sit-card .sit-arrow{display:none;}
.card-edit-mode .sit-card::after{
  content:'⋮⋮';
  position:absolute;
  top:8px;right:10px;
  font-size:14px;color:var(--ink-l);
  letter-spacing:2px;
  opacity:.6;
}
.sit-card.dragging{
  opacity:.25;
  animation:none !important;
}
.drag-ghost{
  position:fixed;
  z-index:9990;
  pointer-events:none;
  opacity:.9;
  transform:scale(1.04) rotate(2deg);
  box-shadow:0 16px 48px rgba(0,0,0,.22);
  border-radius:16px;
  transition:transform .1s;
}
/* 편집 바 */
.card-edit-bar{
  display:none;
  position:fixed;
  bottom:80px;left:50%;transform:translateX(-50%);
  z-index:9980;
  background:rgba(58,58,58,.88);
  color:#F7F3EE;
  border-radius:14px;
  padding:8px 12px 8px 16px;
  align-items:center;gap:10px;
  box-shadow:0 4px 16px rgba(0,0,0,.20);
  font-size:12px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:up .2s ease both;
  white-space:nowrap;
}
.card-edit-mode .card-edit-bar{display:flex;}
.card-edit-hint{opacity:.5;font-size:11px;}
.card-edit-done{
  background:var(--peach);color:#fff;
  border:none;border-radius:10px;
  padding:6px 14px;
  font-family:'Noto Sans KR',sans-serif;
  font-size:12px;font-weight:700;
  cursor:pointer;
  transition:background .15s;
  flex-shrink:0;
}
.card-edit-done:hover{background:var(--peach-d);}
@media(max-width:640px){
  .card-edit-bar{
    bottom:72px;
    padding:6px 10px 6px 14px;
    border-radius:12px;
    gap:8px;
  }
  .card-edit-hint{font-size:10px;}
  .card-edit-done{padding:5px 12px;font-size:11px;border-radius:8px;}
}
/* 편집 뱃지 (헤더 우측 아이콘) */
.card-edit-badge{
  background:none;
  border:none;
  cursor:pointer;
  font-size:15px;
  padding:6px;
  border-radius:8px;
  opacity:.5;
  transition:opacity .15s, background .15s;
  line-height:1;
}
.card-edit-badge:hover{
  opacity:1;
  background:rgba(123,174,203,.12);
}
.card-edit-mode .card-edit-badge{display:none;}
/* 헤더 우측 그룹 */
.hdr-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
}
/* 긴급 → 감정 섹션 간격 */
.emergency-quiet{margin-bottom:12px;}
/* 편집 모드에서 카드 클릭 차단 */
.card-edit-mode .sit-card{pointer-events:auto;}

.term{
  position:relative;
  display:inline;
  border-bottom:1.5px dotted var(--peach);
  color:var(--peach-d);
  cursor:help;
  font-weight:600;
}
.term .term-tip{
  display:none;
}
/* 팝업은 JS가 position:fixed로 배치 */
.term-popup{
  position:fixed;
  z-index:9999;
  max-width:min(300px, calc(100vw - 32px));
  padding:14px 18px;
  background:var(--ink);
  color:#F7F3EE;
  font-size:12.5px;
  font-weight:400;
  line-height:1.75;
  border-radius:14px;
  box-shadow:0 12px 36px rgba(0,0,0,.25);
  word-break:keep-all;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .18s, transform .18s;
  pointer-events:none;
}
.term-popup.on{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.term-popup::after{
  content:'';
  position:absolute;
  border:6px solid transparent;
}
.term-popup.arrow-bottom::after{
  top:100%;
  left:var(--arrow-x, 50%);
  transform:translateX(-50%);
  border-top-color:var(--ink);
}
.term-popup.arrow-top::after{
  bottom:100%;
  left:var(--arrow-x, 50%);
  transform:translateX(-50%);
  border-bottom-color:var(--ink);
}

/* ═══════════════════════════════════════════════
   온보딩 오버레이
═══════════════════════════════════════════════ */
.onboard-overlay{
  position:fixed; inset:0; z-index:10000;
  display:none;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  justify-content:center; align-items:center;
  opacity:0;
  transition:opacity .3s ease;
}
.onboard-overlay.on{
  display:flex;
  opacity:1;
}
.onboard-overlay.out{
  opacity:0;
}
.onboard-card{
  background:var(--white);
  border-radius:24px;
  padding:36px 28px 28px;
  max-width:380px;
  width:calc(100vw - 40px);
  max-height:calc(100vh - 60px);
  overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  text-align:center;
  animation:onboard-pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes onboard-pop{
  from{ opacity:0; transform:scale(.92) translateY(16px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
.onboard-overlay.out .onboard-card{
  animation:onboard-out .25s ease forwards;
}
@keyframes onboard-out{
  to{ opacity:0; transform:scale(.95) translateY(10px); }
}
.onboard-logo{
  font-size:40px;
  margin-bottom:8px;
}
.onboard-title{
  font-family:'Gowun Batang',serif;
  font-size:20px;
  font-weight:700;
  color:var(--ink);
  margin:0 0 6px;
}
.onboard-sub{
  font-size:13px;
  color:var(--ink-m);
  margin:0 0 24px;
  line-height:1.6;
}
.onboard-step-label{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:14px;
}
.onboard-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.onboard-opt{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  border:1.5px solid var(--line);
  border-radius:14px;
  background:var(--white);
  cursor:pointer;
  transition:transform .2s, border-color .2s, box-shadow .2s;
  text-align:left;
}
.onboard-opt:hover,
.onboard-opt:active{
  border-color:var(--peach);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(123,174,203,.15);
}
.onboard-opt-icon{
  font-size:24px;
  flex-shrink:0;
}
.onboard-opt--sm .onboard-opt-icon{
  font-size:20px;
}
.onboard-opt-text{
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  line-height:1.5;
}
.onboard-opt--sm .onboard-opt-text{
  font-size:13px;
}
.onboard-skip{
  display:block;
  margin:20px auto 0;
  padding:10px 20px;
  border:none;
  background:none;
  color:var(--ink-l);
  font-size:13px;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.onboard-skip:hover{ color:var(--ink-m); }
.onboard-back{
  display:block;
  margin:16px auto 0;
  padding:8px 16px;
  border:none;
  background:none;
  color:var(--ink-l);
  font-size:13px;
  cursor:pointer;
}
.onboard-back:hover{ color:var(--ink-m); }
.onboard-fade-in{
  animation:onboard-fadein .25s ease;
}
@keyframes onboard-fadein{
  from{ opacity:0; transform:translateX(12px); }
  to{ opacity:1; transform:translateX(0); }
}

/* ═══════════════════════════════════════════════
   공유 FAB & 메뉴
═══════════════════════════════════════════════ */
.share-fab{
  position:fixed;
  bottom:160px; right:16px;
  width:48px; height:48px;
  border-radius:50%;
  border:none;
  background:var(--peach);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  z-index:999;
  transition:transform .22s, background .22s;
  display:flex; align-items:center; justify-content:center;
}
.share-fab:hover{ transform:scale(1.08); }
.share-fab.on{
  background:var(--peach-d);
  transform:rotate(45deg);
}
.share-fab-icon{
  font-style:normal;
  line-height:1;
}
.share-menu{
  position:fixed;
  bottom:218px; right:16px;
  background:var(--white);
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.14);
  padding:8px;
  z-index:999;
  opacity:0;
  transform:translateY(10px) scale(.95);
  pointer-events:none;
  transition:opacity .22s, transform .22s;
}
.share-menu.on{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.share-menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border:none;
  background:none;
  width:100%;
  cursor:pointer;
  border-radius:10px;
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  transition:background .15s;
  white-space:nowrap;
}
.share-menu-item:hover{
  background:var(--cream);
}
.share-item-icon{
  width:28px; height:28px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  font-weight:800;
  flex-shrink:0;
}

/* ── 공유 토스트 ── */
.share-toast{
  position:fixed;
  bottom:100px; left:50%;
  transform:translateX(-50%) translateY(10px);
  padding:10px 22px;
  background:var(--ink);
  color:#fff;
  font-size:13px;
  font-weight:500;
  border-radius:24px;
  z-index:10001;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s, transform .25s;
}
.share-toast.on{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ── 반응형: SOS 버튼과 공유 FAB 충돌 방지 ── */
@media(max-width:640px){
  .share-fab{
    bottom:76px;
    right:12px;
    width:44px; height:44px;
    font-size:18px;
  }
  .share-menu{
    bottom:130px;
    right:12px;
  }
}
/* 데스크톱 FAB 위치 */
@media(min-width:641px){
  .share-fab{ bottom:24px; }
  .share-menu{ bottom:82px; }
}

/* ── 접근성: 포커스 표시 ── */
:focus-visible{
  outline:2px solid var(--peach);
  outline-offset:2px;
  border-radius:4px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible){
  outline:none;
}
.ninput input:focus-visible{
  outline:none; /* parent .ninput:focus-within handles this */
}

/* ══════════════════════════════════════════
   GUIDE PAGE — 가이드 콘텐츠 공통 컴포넌트
   ADHD · 중독 · 금융 · 향후 신규 가이드 공통
══════════════════════════════════════════ */

/* ── 가이드 히어로 ── */
.guide-hero{
  text-align:center;
  padding:var(--sp-6) var(--sp-3) var(--sp-4);
}
.guide-hero h1{
  font-family:'Gowun Batang',serif;
  font-size:clamp(22px,5vw,28px);
  font-weight:700;
  color:var(--ink);
  margin:0 0 var(--sp-1);
  line-height:1.35;
  letter-spacing:-.3px;
  word-break:keep-all;
}
.guide-hero p{
  font-size:14px;
  color:var(--ink-m);
  line-height:1.72;
  margin:0 0 var(--sp-2);
  word-break:keep-all;
}
.guide-stat{
  display:inline-block;
  padding:var(--sp-1) var(--sp-2);
  border-radius:16px;
  background:var(--peach-p);
  font-size:12px;
  color:var(--peach-d);
  line-height:1.5;
}
.guide-stat strong{
  font-weight:700;
  font-size:13px;
}

/* ── 가이드 섹션 ── */
.guide-section{
  padding:0 var(--sp-3);
  margin-bottom:var(--sp-4);
}
.guide-section h2{
  font-size:17px;
  font-weight:700;
  color:var(--ink);
  margin:0 0 var(--sp-2);
  line-height:1.35;
  letter-spacing:-.2px;
}
.guide-section p{
  font-size:14px;
  color:var(--ink-m);
  line-height:1.75;
  word-break:keep-all;
  margin:0;
}
.guide-section ul{
  padding-left:20px;
  font-size:14px;
  color:var(--ink);
  line-height:1.85;
  word-break:keep-all;
}
.guide-section ul li{
  margin-bottom:6px;
}

/* ── 가이드 카드 (정보 카드) ── */
.guide-cards{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.guide-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:var(--sp-2);
  transition:border-color .2s, box-shadow .2s;
}
.guide-card:hover{
  border-color:var(--peach-l);
  box-shadow:0 4px 16px rgba(123,174,203,.08);
}
.guide-card-inner{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.guide-card-icon{
  font-size:22px;
  flex-shrink:0;
  line-height:1;
  margin-top:2px;
}
.guide-card-body{
  min-width:0;
}
.guide-card-title{
  display:block;
  font-size:14.5px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:4px;
}
.guide-card-text{
  font-size:13.5px;
  color:var(--ink-m);
  line-height:1.65;
  word-break:keep-all;
  margin:0;
}

/* ── 가이드 체크도구 (자가진단) ── */
.guide-check{
  background:var(--white);
  border:1.5px solid rgba(123,174,203,.14);
  border-radius:18px;
  padding:22px var(--sp-3);
  margin:0 var(--sp-3) var(--sp-3);
}
.guide-check-title{
  font-size:14.5px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:var(--sp-2);
}
.guide-check-item{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:11px 14px;
  border-radius:12px;
  margin-bottom:7px;
  cursor:pointer;
  transition:background .15s;
  font-size:13.5px;
  color:var(--ink-m);
  line-height:1.6;
  word-break:keep-all;
}
.guide-check-item:hover{ background:rgba(123,174,203,.06); }
.guide-check-item.checked{
  background:linear-gradient(135deg,rgba(123,174,203,.10),rgba(107,168,133,.06));
  color:var(--ink);
  font-weight:600;
}
.guide-check-box{
  width:22px;height:22px;
  border-radius:6px;
  border:2px solid rgba(123,174,203,.30);
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s var(--calm-ease);
  margin-top:1px;
}
.guide-check-item.checked .guide-check-box{
  background:var(--peach-d);
  border-color:var(--peach-d);
  color:white;
  font-size:13px;font-weight:700;
  box-shadow:0 2px 8px rgba(74,140,170,.30);
}
.guide-check-result{
  margin-top:var(--sp-2);
  padding:var(--sp-2) 18px;
  border-radius:16px;
  font-size:13.5px;
  line-height:1.65;
  word-break:keep-all;
}
.guide-check-result strong{
  display:block;
  font-size:15px;
  margin-bottom:6px;
}
.guide-check-result p{
  font-size:13.5px;
  color:var(--ink-m);
  margin:0;
}

/* ── 가이드 비교표 ── */
.guide-compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  font-size:13px;
  line-height:1.65;
}
.guide-compare-col{
  padding:var(--sp-2);
  border-radius:14px;
  word-break:keep-all;
}
.guide-compare-col strong{
  display:block;
  margin-bottom:8px;
  font-size:14px;
}
.guide-compare-note{
  font-size:13px;
  color:var(--ink-m);
  margin-top:12px;
  line-height:1.65;
  word-break:keep-all;
}

/* ── 가이드 아코디언 (유형별 펼침) ── */
.guide-accordion{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:var(--sp-2);
  margin-bottom:10px;
  transition:border-color .2s;
}
.guide-accordion:hover{ border-color:var(--peach-l); }
.guide-accordion summary{
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  color:var(--ink);
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
}
.guide-accordion summary::-webkit-details-marker{ display:none; }
.guide-accordion summary::after{
  content:'›';
  margin-left:auto;
  font-size:18px;
  color:var(--ink-l);
  transition:transform .25s var(--calm-ease);
}
.guide-accordion[open] summary::after{
  transform:rotate(90deg);
}
.guide-accordion ul{
  padding:12px 0 0 20px;
  font-size:13.5px;
  color:var(--ink-m);
  line-height:1.8;
}

/* ── 모바일 반응형 ── */
@media(max-width:640px){
  .guide-hero{ padding:var(--sp-4) 18px var(--sp-3); }
  .guide-section{ padding:0 18px; }
  .guide-check{ margin:0 18px 18px; padding:18px; }
  .guide-compare{ grid-template-columns:1fr; }
}

/* ── 가이드 진입 애니메이션 (stagger) ── */
.guide-section,
.guide-check,
.guide-hero{
  animation:up .45s var(--calm-ease) both;
}
.guide-hero{ animation-delay:0ms; }
.guide-section:nth-of-type(1){ animation-delay:60ms; }
.guide-section:nth-of-type(2){ animation-delay:120ms; }
.guide-section:nth-of-type(3){ animation-delay:180ms; }
.guide-section:nth-of-type(4){ animation-delay:240ms; }
.guide-section:nth-of-type(5){ animation-delay:300ms; }
.guide-section:nth-of-type(6){ animation-delay:360ms; }
.guide-check{ animation-delay:100ms; }

.guide-card{
  animation:up .4s var(--calm-ease) both;
}
.guide-card:nth-child(1){ animation-delay:0ms; }
.guide-card:nth-child(2){ animation-delay:50ms; }
.guide-card:nth-child(3){ animation-delay:100ms; }
.guide-card:nth-child(4){ animation-delay:150ms; }

/* ── 포커스 & 접근성 ── */
.guide-check-item:focus-visible{
  outline:2px solid var(--peach);
  outline-offset:2px;
}
.guide-card:focus-within{
  border-color:var(--peach);
  box-shadow:0 0 0 3px var(--peach-glow);
}
.guide-accordion:focus-within{
  border-color:var(--peach);
}

/* ── Reduced Motion ── */
@media(prefers-reduced-motion:reduce){
  .guide-section,
  .guide-check,
  .guide-hero,
  .guide-card{
    animation:none;
  }
}

/* ── 공공기관 연결 섹션 ── */
.centers-section{
  margin:32px 20px;padding:24px;
  background:var(--white);border-radius:var(--calm-r);
  border:1px solid var(--line);
}
.centers-header{
  display:flex;align-items:center;gap:8px;margin-bottom:16px;
}
.centers-icon{font-size:20px;}
.centers-title{font-size:16px;font-weight:700;color:var(--ink);}
.centers-list{display:flex;flex-direction:column;gap:8px;}
.center-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-radius:14px;
  background:var(--cream);text-decoration:none;color:var(--ink);
  transition:background .15s;min-height:48px;
}
.center-item:hover{background:var(--peach-p);}
.center-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.center-name{font-size:14px;font-weight:600;}
.center-desc{font-size:12px;color:var(--ink-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.center-phone{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:12px;}
.center-number{font-size:15px;font-weight:700;color:var(--peach-d);}
.center-badge{
  font-size:11px;padding:2px 6px;border-radius:6px;
  background:var(--lavender-p);color:var(--lavender-d);font-weight:600;
}