/* 홈페이지·기분기록지와 같은 '책상 위 크림색 수첩' 테마 (styles.css, patient.css 뒤에 읽힌다) */
@import url("vendor/fonts/pretendard.css?v=20261028g");
@import url("vendor/fonts/maruburi.css?v=20261029a");

:root {
  --nb-paper: #fbf8f1;
  --nb-paper-2: #f4efe4;
  --nb-desk: #e6e1d9;
  --nb-ink: #33353d;
  --nb-soft: #6f6a62;
  --nb-accent: #9b2f35;
  --nb-accent-dark: #7a2228;
  --nb-leather: #1c1c20;
  --nb-gold: #c9a85a;
  --nb-line: rgba(60, 58, 70, 0.16);
  --nb-rule: rgba(60, 58, 70, 0.075);
  --nb-print: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --nb-serif: 'MaruBuri', 'AppleMyungjo', 'Batang', serif;
  --nb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='l' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeDiffuseLighting surfaceScale='1.6' lighting-color='%23ffffff'%3E%3CfeDistantLight azimuth='235' elevation='48'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.9 0 0 0 -0.72'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23l)'/%3E%3C/svg%3E");

  /* styles.css (설문·가입·로그인) */
  --primary: #2c3445;
  --primary-h: #1c1c20;
  --accent: var(--nb-accent);
  --accent-light: rgba(155, 47, 53, 0.08);
  --bg-base: var(--nb-desk);
  --bg-card: var(--nb-paper);
  --border: var(--nb-line);
  --text-main: var(--nb-ink);
  --text-sub: var(--nb-soft);
  --radius: 12px;

  /* patient.css (생활습관·기분안정성 기록 앱) */
  --background: var(--nb-desk);
  --foreground: var(--nb-ink);
  --card: var(--nb-paper);
  --card-foreground: var(--nb-ink);
  --popover: var(--nb-paper);
  --popover-foreground: var(--nb-ink);
  --primary-foreground: #fff;
  --secondary: var(--nb-paper-2);
  --secondary-foreground: var(--nb-ink);
  --muted: var(--nb-paper-2);
  --muted-foreground: var(--nb-soft);
  --accent-foreground: var(--nb-accent);
  --input: var(--nb-line);
  --ring: var(--nb-gold);
  --sidebar: var(--nb-leather);
  --sidebar-foreground: #e3ddd0;
  --sidebar-primary: var(--nb-gold);
  --sidebar-primary-foreground: var(--nb-leather);
  --sidebar-accent: #2a2a30;
  --sidebar-accent-foreground: #fff;
  --sidebar-border: #34343a;
  --sidebar-ring: var(--nb-gold);
}

html body {
  font-family: var(--nb-print);
  color: var(--nb-ink);
  background-color: var(--nb-desk);
  background-image: radial-gradient(90% 60% at 18% 0%, rgba(255, 252, 245, 0.85), rgba(255, 252, 245, 0) 60%);
  background-repeat: no-repeat; background-attachment: fixed; min-height: 100vh;
  word-break: keep-all;
}
h1, h2, .survey-section-title, .signup-header h1, .auth-header h1 { font-family: var(--nb-serif); letter-spacing: -0.2px; }
:focus-visible { outline: 3px solid var(--nb-gold); outline-offset: 2px; }

/* 머리띠: 검은 가죽 */
#mainHeader, .topbar, .sidebar {
  background-color: var(--nb-leather) !important;
  background-image: var(--nb-grain), radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.08), transparent 55%) !important;
  border-bottom: 0 !important;
  box-shadow: 0 6px 16px rgba(30, 20, 10, 0.25);
}
#mainHeader h1, .topbar, .topbar .breadcrumb, .topbar .breadcrumb strong { color: #f1ebdf !important; }
.topbar .icon-button, .topbar .mode-badge { color: #e3ddd0; background: rgba(255, 255, 255, 0.08); }

/* 종이 카드 */
.card, .signup-card, .auth-card, .gate-card, .panel, .metric-card, .patient-bar, .review-card, .empty-panel, .history-item, .result-table-wrap {
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 31px, var(--nb-rule) 31px 32px), var(--nb-paper) !important;
  border: 1px solid var(--nb-line) !important;
  box-shadow: 0 1px 0 #fff inset, 0 14px 30px -18px rgba(40, 30, 20, 0.5), 0 2px 6px rgba(40, 30, 20, 0.1) !important;
}
.signup-header h1, .auth-header h1 { color: #23252c !important; }

/* 버튼 */
.btn.primary, .button.primary, button.primary, .btn-login, #btnLogin, #btnSignup, .search-submit {
  background: var(--nb-accent) !important; border-color: var(--nb-accent) !important; color: #fff !important;
}
.btn.primary:hover, .button.primary:hover, #btnLogin:hover, #btnSignup:hover { background: var(--nb-accent-dark) !important; }
.btn.accent { background: var(--nb-gold) !important; color: var(--nb-leather) !important; }
.btn.secondary { background: #fffdf8 !important; color: var(--nb-ink) !important; border: 1px solid var(--nb-line) !important; }
.opt-chip input:checked + span, .opt-chip.selected, .opt-list-item.selected, .month-chip.selected {
  border-color: var(--nb-accent) !important; background: rgba(155, 47, 53, 0.08) !important; color: var(--nb-accent-dark) !important;
}
.progress-bar { background: var(--nb-accent) !important; }
input[type="text"], input[type="password"], input[type="number"], input[type="tel"], input[type="month"], input[type="date"], select, textarea {
  background: #fffdf8; border-color: var(--nb-line) !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--nb-accent) !important; }

/* 로그인·가입·확인 화면: 수첩 표지 위 종이 */
body.gate-page, body:has(.signup-wrapper), body:has(.auth-card) { background-color: var(--nb-desk) !important; }
.gate-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.gate-card { max-width: 420px; width: 100%; padding: 28px 24px; border-radius: 14px; text-align: center; }
.gate-card h1 { font-size: 22px; margin-bottom: 10px; }
#turnstileBox { margin: 16px auto 0; display: flex; justify-content: center; }

.signup-card a, .auth-card a, .auth-link a, .gate-card a { color: var(--nb-accent) !important; }
.signup-wrapper { padding: 0 4px; }

/* 홈페이지(snumood.com)와 같은 머리띠: 모든 설문 화면에 항상 */
.snb-bar {
  --bar-h: 60px; --paper: #fbf8f1; --ink: #33353d; --accent-dark: #7a2228; --line: rgba(60, 58, 70, 0.16); --rule: rgba(60, 58, 70, 0.075);
  --tape-mood: #e8c1bf; --tape-scale: #eadcb6; --tape-body: #cfe0d1; --tape-event: #d3d9ee;
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--bar-h);
  background-color: var(--nb-leather);
  background-image: var(--nb-grain), radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.08), transparent 55%);
  box-shadow: 0 6px 16px rgba(30, 20, 10, 0.25); font-family: var(--nb-print);
}
.snb-in { height: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 10px; }
.snb-brand { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; color: #f1ebdf; }
.snb-logo { width: 32px; height: 32px; border-radius: 8px; flex: none; background: url("data:image/png;base64,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") center / cover no-repeat; }
.snb-name { font-family: var(--nb-serif); font-size: 15px; letter-spacing: 0.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snb-short { display: none; }
.snb-name small { display: block; font-family: 'Cormorant Garamond', 'Times New Roman', serif; color: var(--nb-gold); letter-spacing: 2px; font-size: 12px; }
.snb-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.snb-nav a { color: #e3ddd0; text-decoration: none; font-size: 15px; font-weight: 600; padding: 8px 12px; border-radius: 18px; white-space: nowrap; }
.snb-nav a:hover, .snb-nav a[aria-current="true"] { background: rgba(255, 255, 255, 0.1); color: #fff; }
.snb-btn, .mssi-lang-btn {
  flex: none; min-width: 44px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 20px;
  background: rgba(255, 255, 255, 0.06); color: #f1ebdf; font: 600 14px/1 var(--nb-print); cursor: pointer; padding: 0 12px;
}
.snb-btn:hover, .mssi-lang-btn:hover { background: rgba(255, 255, 255, 0.14); }
.snb-menu { display: none; }
.snb-menu .bars { display: inline-block; width: 18px; height: 12px; position: relative; vertical-align: middle; }
.snb-menu .bars::before, .snb-menu .bars::after, .snb-menu .bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 1px; transition: transform .2s, opacity .2s;
}
.snb-menu .bars::before { top: 0; } .snb-menu .bars span { top: 5px; } .snb-menu .bars::after { top: 10px; }
.snb-menu[aria-expanded="true"] .bars::before { transform: translateY(5px) rotate(45deg); }
.snb-menu[aria-expanded="true"] .bars span { opacity: 0; }
.snb-menu[aria-expanded="true"] .bars::after { transform: translateY(-5px) rotate(-45deg); }
.snb-nav .snb-logout-m { display: none; }
.snb-account { font-weight: 700; }
.snb-who { margin-left: 6px; font-weight: 400; font-size: .85em; opacity: .75; }
.snb-who::before { content: '· '; }
@media (max-width: 900px) {
  .snb-brand { margin-right: auto; flex: 0 1 auto; min-width: 0; }
  .snb-menu { display: inline-flex; align-items: center; justify-content: center; }
  .snb-in > .snb-logout { display: none; }
  .snb-nav {
    position: fixed; top: var(--bar-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 16px 18px; background: var(--paper);
    background-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 47px, var(--rule) 47px 48px);
    box-shadow: 0 18px 30px rgba(30, 20, 10, 0.25);
    max-height: calc(100dvh - var(--bar-h)); overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform .2s, opacity .2s, visibility 0s .2s;
  }
  .snb-nav.open { transform: none; opacity: 1; visibility: visible; transition: transform .2s, opacity .2s; }
  .snb-nav a, .snb-nav .snb-logout-m { color: var(--ink); font-size: 17px; padding: 12px 8px 12px 18px; border-radius: 0; border-left: 5px solid var(--tab, var(--line)); margin: 2px 0; text-align: left; }
  .snb-nav .snb-logout-m { display: block; width: 100%; background: none; border-top: 0; border-right: 0; border-bottom: 0; font: 600 17px/1.4 var(--nb-print); cursor: pointer; }
  .snb-nav a:hover, .snb-nav a[aria-current="true"] { background: rgba(155, 47, 53, 0.06); color: var(--accent-dark); }
}
/* 글자가 다 들어가지 않으면(영어, 로그인 아이디) i18n.js 가 로그아웃 단추(.fit-nologout, '내 계정' 화면에도 있다) → 아이디(.fit-noid) 순으로 숨기고,
   그래도 넘치면 메뉴를 접는다(.collapsed). 브랜드명은 줄이지 않는다. 접힌 배치는 위 900px 규칙과 같다. */
.snb-bar.no-anim .snb-nav { transition: none !important; }
.snb-bar.fit-nologout .snb-in > .snb-logout { display: none; }
.snb-bar.fit-noid .snb-who { display: none; }
/* 접힌 배치에는 브랜드와 단추뿐이라, 아주 좁은 화면(영어 320px)에서만 브랜드가 줄어든다 */
.snb-bar.collapsed .snb-brand { margin-right: auto; flex: 0 1 auto; min-width: 0; }
.snb-bar.collapsed .snb-menu { display: inline-flex; align-items: center; justify-content: center; }
.snb-bar.collapsed .snb-in > .snb-logout { display: none; }
.snb-bar.collapsed .snb-nav {
  position: fixed; top: var(--bar-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
  padding: 8px 16px 18px; background: var(--paper);
  background-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 47px, var(--rule) 47px 48px);
  box-shadow: 0 18px 30px rgba(30, 20, 10, 0.25);
  max-height: calc(100dvh - var(--bar-h)); overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform .2s, opacity .2s, visibility 0s .2s;
}
.snb-bar.collapsed .snb-nav.open { transform: none; opacity: 1; visibility: visible; transition: transform .2s, opacity .2s; }
.snb-bar.collapsed .snb-nav a, .snb-bar.collapsed .snb-nav .snb-logout-m { color: var(--ink); font-size: 17px; padding: 12px 8px 12px 18px; border-radius: 0; border-left: 5px solid var(--tab, var(--line)); margin: 2px 0; text-align: left; }
.snb-bar.collapsed .snb-nav .snb-logout-m { display: block; width: 100%; background: none; border-top: 0; border-right: 0; border-bottom: 0; font: 600 17px/1.4 var(--nb-print); cursor: pointer; }
.snb-bar.collapsed .snb-nav a:hover, .snb-bar.collapsed .snb-nav a[aria-current="true"] { background: rgba(155, 47, 53, 0.06); color: var(--accent-dark); }
.snb-bar.collapsed .snb-who { display: inline; }
@media (max-width: 560px) { .snb-full { display: none; } .snb-short { display: inline; } .snb-name small { display: none; } }
@media (max-width: 1180px) and (min-width: 561px) { .snb-full { display: none; } .snb-short { display: inline; } }
@media (max-width: 380px) { .snb-name { font-size: 13.5px; } }
@media print { .snb-bar { display: none !important; } }
html body.has-snb-bar { padding-top: 76px !important; }
/* 예전 머리띠는 쓰지 않는다 (설문 화면 #mainHeader, 기록 앱 .clinic-header) */
#mainHeader, .clinic-header { display: none !important; }

/* 언어 전환 버튼 */
.mssi-lang-btn.floating {
  position: fixed; top: 12px; right: 12px; z-index: 1000;
  background: var(--nb-leather); background-image: var(--nb-grain); box-shadow: 0 6px 14px rgba(30, 20, 10, 0.3);
}
@media print { .mssi-lang-btn { display: none !important; } }

/* 생활습관·기분안정성 기록 앱 (patient.html): 홈페이지와 같은 종이·버건디 */
html body .self-app { background: transparent; }
.survey-progress, .survey-progress span { color: var(--nb-soft); }
html body .self-app .self-body {
  max-width: 1080px; margin: 18px auto 40px; padding: 28px clamp(16px, 4vw, 44px) 10px; border-radius: 10px;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 31px, var(--nb-rule) 31px 32px), var(--nb-paper);
  box-shadow: 0 1px 0 #fff inset, 0 18px 36px -20px rgba(40, 30, 20, 0.45), 0 2px 6px rgba(40, 30, 20, 0.12);
}
@media (max-width: 760px) { .self-app .self-body { margin: 10px 8px 24px; padding: 20px 14px 6px; } }
.self-tabs { border-bottom-color: var(--nb-line) !important; }
.self-tabs button { color: var(--nb-soft) !important; }
.self-tabs button:hover, .self-tabs button[aria-current] { color: var(--nb-accent-dark) !important; }
.self-tabs button[aria-current]:after { background: var(--nb-accent) !important; }
.patient-section-heading h1 { font-family: var(--nb-serif); color: #23252c !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
.patient-section-heading p, .self-privacy, .patient-disclaimer, .survey-context, .record-time, .self-footer, .preview-note { color: var(--nb-soft) !important; }
.self-app .eyebrow { color: var(--nb-accent) !important; font-family: 'Cormorant Garamond', serif; font-style: italic; letter-spacing: 0.12em !important; }
.self-privacy, .self-footer, .survey-subquestions { border-color: var(--nb-line) !important; }
.survey-card, .self-app .metric-card, .self-app .panel, .patient-change > div {
  background: #fffdf8 !important; border-color: var(--nb-line) !important; box-shadow: 0 6px 14px -10px rgba(40, 30, 20, 0.35) !important;
}
.survey-card legend { color: #23252c !important; }
.survey-card legend > span, .survey-progress strong, .patient-change strong { color: var(--nb-accent) !important; }
.survey-progress { background: var(--nb-paper) !important; border-color: var(--nb-line) !important; top: 64px !important; }
.survey-progress > div { background: rgba(60, 58, 70, 0.1) !important; }
.survey-progress > div > span { background: var(--nb-accent) !important; }
.survey-choice { border-color: var(--nb-line) !important; color: var(--nb-ink) !important; background: #fffdf8; }
.survey-choice:hover { border-color: rgba(155, 47, 53, 0.4) !important; background: rgba(155, 47, 53, 0.03) !important; }
.survey-choice.checked { border-color: var(--nb-accent) !important; background: rgba(155, 47, 53, 0.07) !important; color: var(--nb-accent-dark) !important; }
.survey-choice [role=radio] { border-color: rgba(60, 58, 70, 0.35) !important; color: var(--nb-accent) !important; }
.survey-subquestions h3 { color: var(--nb-ink) !important; }
.survey-submit { background: var(--nb-accent) !important; }
.survey-submit:hover:not(:disabled) { background: var(--nb-accent-dark) !important; }
.self-success { background: rgba(127, 165, 138, 0.15) !important; border-color: rgba(127, 165, 138, 0.5) !important; color: #2f5a3a !important; }
.self-app .metric-card.mssi { border-top-color: var(--nb-accent) !important; }
.self-app .metric-card.lifestyle { border-top-color: #7fa58a !important; }
.self-app .metric-card.mssi .metric-top svg, .self-app .habit-score, .self-app .teal-text, .self-app .text-button { color: var(--nb-accent) !important; }
.self-app .metric-card.lifestyle .metric-top svg { color: #5f8a6b !important; }
.self-app .legend-dot.mssi { background: var(--nb-accent) !important; }
.self-app .legend-dot.lifestyle { background: #7fa58a !important; }
.self-app .habit-track { background: rgba(60, 58, 70, 0.08) !important; }
.self-app .habit-track > span { background: #7fa58a !important; }
.self-app .symptom-cell { background: rgba(155, 47, 53, 0.04) !important; }
.self-app [stroke="#4769d9"], .self-app [stroke="#3182bd"] { stroke: var(--nb-accent); }
.self-app [fill="#4769d9"], .self-app [fill="#3182bd"] { fill: var(--nb-accent); }
.self-app [stroke="#04968b"] { stroke: #5f8a6b; }
.self-app [fill="#04968b"] { fill: #5f8a6b; }
.self-app button:focus-visible, .self-app a:focus-visible { outline-color: var(--nb-gold) !important; }