/* PETHEALTH T3b — 스타일가이드 (설계 §4-B 디자인원칙 그대로)
   화이트/오프화이트 단일배경 + 포인트컬러 1개(민트) · 화면당 핵심액션 1개 ·
   장식최소(아이콘=상태표시용만) · 여백중심 · 필수입력 최소화(날짜+종류 2개뿐) */

/* ★T3c 서체 — SUIT(선정근거는 round/evidence/pethealth-t3a/T3C_FONT_SELECTION_20260902.md).
   로컬 번들 woff2 서브셋(한글 완성형 전체+라틴+숫자+기본구두점) — 외부 CDN 요청 없음. */
@font-face {
  font-family: "SUIT";
  src: url("../fonts/SUIT-RegularSubset.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SUIT";
  src: url("../fonts/SUIT-BoldSubset.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ★T3f(확장) 서체 선택지 2종 — 둘 다 SIL OFL 1.1(재배포·임베딩·서브셋 명시허용),
   선정근거·라이선스 원문 인용은 round/evidence/pethealth-t3a/T3F_FONT_CHOICE_20260902.md.
   출처: Google Fonts 공식 저장소(github.com/google/fonts) ofl/ 디렉터리에서 원본 TTF를
   직접 받아 SUIT와 동일한 방식(fonttools, 한글완성형 전체+라틴+구두점)으로 서브셋.
   GamjaFlower는 원본 자체가 Regular 1종뿐 — 굵게 표시가 필요한 곳은 브라우저 합성굵게
   (synthetic bold)로 자연 대체된다(폰트 추가제작 없이 감수 가능한 범위, 표준 웹 동작). */
@font-face {
  font-family: "Gaegu";
  src: url("../fonts/Gaegu-RegularSubset.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Gaegu";
  src: url("../fonts/Gaegu-BoldSubset.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "GamjaFlower";
  src: url("../fonts/GamjaFlower-RegularSubset.woff2") format("woff2");
  font-weight: 400 700; /* 가변범위 선언 — 굵게 요청시 이 한 얼굴을 합성굵게로 사용 */
  font-display: swap;
}

/* ★T3g 서체확장 — 나눔4종+마루부리(전부 네이버 발행 SIL OFL 1.1, Reserved Font Name 등재
   확인·나눔스퀘어만 등재목록 부재 결측치를 noonnu.cc+상표권자 산돌 자사몰 2중 교차확인으로
   보강) + 네이버 클로바 나눔손글씨 2종(다시시작해·우리딸손글씨 — 갤럭시 전용이라는 추정과
   달리 클로바 공식 109종 컬렉션 소속, 무료사용+유상배포금지 조항으로 자유수정 명시조항은
   SUIT류보다 약하나 산돌 자사몰이 "나눔글꼴과 동일 저작권 규정"이라 교차확인). 라이선스
   원문 전량은 round/evidence/pethealth-t3a/T3G_FONT_EXPANSION_20260902.md 참조. */
@font-face {
  font-family: "NanumGothic";
  src: url("../fonts/NanumGothic-RegularSubset.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "NanumGothic";
  src: url("../fonts/NanumGothic-BoldSubset.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "NanumMyeongjo";
  src: url("../fonts/NanumMyeongjo-RegularSubset.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "NanumMyeongjo";
  src: url("../fonts/NanumMyeongjo-BoldSubset.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "NanumBarunGothic";
  src: url("../fonts/NanumBarunGothic-RegularSubset.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "NanumBarunGothic";
  src: url("../fonts/NanumBarunGothic-BoldSubset.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "NanumSquare";
  src: url("../fonts/NanumSquare-RegularSubset.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "NanumSquare";
  src: url("../fonts/NanumSquare-BoldSubset.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "MaruBuri";
  src: url("../fonts/MaruBuri-RegularSubset.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "MaruBuri";
  src: url("../fonts/MaruBuri-BoldSubset.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "DaSiSiJagHae";
  src: url("../fonts/DaSiSiJagHae-RegularSubset.woff2") format("woff2");
  font-weight: 400 700; /* 원본 Regular 1종뿐 — 굵게는 합성굵게(GamjaFlower와 동일 패턴) */
  font-display: swap;
}
@font-face {
  font-family: "UriDdal";
  src: url("../fonts/UriDdal-RegularSubset.woff2") format("woff2");
  font-weight: 400 700; /* 원본 Regular 1종뿐 — 굵게는 합성굵게 */
  font-display: swap;
}

/* ★T3f 테마 — CSS 변수화(라이트 기본값). --accent(민트)는 양쪽 테마 공통(포인트컬러 1개
   원칙은 테마와 무관하게 유지). 다크 값은 아래 두 블록(시스템 기본값 추종 + 명시선택)에서
   덮어쓴다 — 토글 로직은 js/theme.js. */
:root {
  --bg: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #4fc7a8;        /* 포인트컬러 1개 — 연한 민트, 라이트/다크 공통 */
  --line: #e5e7eb;
  --card: #f3f4f6;          /* 아바타 원형 배경 등 카드/서피스 톤 */
  --surface: #ffffff;       /* 입력창 배경 */
  --warn: #b45309;
  /* ★[2026-09-02 T3g] 제이크 지시로 기본서체를 Gaegu→DaSiSiJagHae(다시시작해)로 변경 —
     라이선스 확보 성공(T3G_FONT_EXPANSION 참조)에 따른 지시대로 반영. data-font로 덮어씀. */
  --font-main: "DaSiSiJagHae";
}

/* ★T3f/T3g 서체 선택 — data-font 속성으로 전환(테마와 동일한 패턴, 별개 축). 값이 없으면
   :root 기본값(DaSiSiJagHae)이 적용되고, 있으면 아래 규칙이 덮어쓴다. */
:root[data-font="suit"] { --font-main: "SUIT"; }
:root[data-font="gaegu"] { --font-main: "Gaegu"; }
:root[data-font="gamja"] { --font-main: "GamjaFlower"; }
:root[data-font="nanumgothic"] { --font-main: "NanumGothic"; }
:root[data-font="nanummyeongjo"] { --font-main: "NanumMyeongjo"; }
:root[data-font="nanumbarungothic"] { --font-main: "NanumBarunGothic"; }
:root[data-font="nanumsquare"] { --font-main: "NanumSquare"; }
:root[data-font="maruburi"] { --font-main: "MaruBuri"; }
:root[data-font="dasisijaghae"] { --font-main: "DaSiSiJagHae"; }
:root[data-font="uriddal"] { --font-main: "UriDdal"; }
/* 손글씨풍 4종(기본 DaSiSiJagHae 포함)만 고딕/명조류보다 자간이 넓어 보정한다
   (폰트 자체는 무수정 — CSS 레이아웃 보정만). 나머지(SUIT·나눔4종·마루부리)는 보정 없음. */
:root:not([data-font]) body,
:root[data-font="gaegu"] body,
:root[data-font="gamja"] body,
:root[data-font="dasisijaghae"] body,
:root[data-font="uriddal"] body {
  letter-spacing: -0.01em;
}

/* 명시적 선택이 없을 때만 시스템 다크모드를 기본값으로 따른다(요구2: 기본값=시스템 추종) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #121212;          /* 순흑 지양 */
    --text: #e5e7eb;
    --muted: #9ca3af;
    --line: #2d2d2d;
    --card: #1e1e1e;
    --surface: #1a1a1a;
    --warn: #fbbf24;
  }
}
/* 사용자가 명시적으로 다크를 선택하면(localStorage) 시스템 설정과 무관하게 적용 */
:root[data-theme="dark"] {
  --bg: #121212;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --line: #2d2d2d;
  --card: #1e1e1e;
  --surface: #1a1a1a;
  --warn: #fbbf24;
}

/* ★다크 배경에서 잉크색(#1f2937) 선화 아이콘이 뭉개지는 문제(제이크 지시로 실화면 확인
   후 확정) — 아이콘 자체(제이크 승인 -color판)는 다시 만들지 않고, 다크 테마에서만
   반전(invert)해 밝은 선화로 보이게 한다. 라이트 테마는 원본 그대로.
   ★주의: .avatar-is-default 클래스가 붙은 것만 반전한다(js/app.js가 토글) — 사용자가
   업로드한 실제 사진(base64 JPEG)까지 반전시키면 포토네거티브가 되므로 반드시 제외해야
   한다(기본아바타 vs 실사진을 같은 <img> 엘리먼트가 번갈아 쓰기 때문에 필요한 구분). */
:root[data-theme="dark"] .type-icon,
:root[data-theme="dark"] .record-icon img,
:root[data-theme="dark"] .record-empty img,
:root[data-theme="dark"] .avatar-is-default {
  filter: invert(0.92) hue-rotate(180deg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .type-icon,
  :root:not([data-theme]) .record-icon img,
  :root:not([data-theme]) .record-empty img,
  :root:not([data-theme]) .avatar-is-default {
    filter: invert(0.92) hue-rotate(180deg);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-main), -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.view { max-width: 480px; margin: 0 auto; min-height: 100vh; }

.topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.topbar-title { font-size: 17px; font-weight: 700; margin: 0; flex: 1; }
.topbar-title.as-link {
  background: none; border: none; color: var(--text); text-align: left;
  padding: 0; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 8px;
}
.timeline-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.icon-btn {
  background: none; border: none; font-size: 16px; color: var(--text);
  cursor: pointer; padding: 4px 8px;
}

.screen-body { padding: 20px 16px 40px; }

.photo-thumb {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--card); display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin: 0 auto 24px;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ★T3e 프로필 사진 업로드 — 파일 input은 시각적으로 숨기고 라벨을 절제된 텍스트링크로 */
.photo-picker-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.photo-picker-label {
  display: block; text-align: center; font-size: 13px; color: var(--accent);
  font-weight: 700; margin: -16px auto 24px; cursor: pointer;
}

/* ★T3d 이미지반영 — 화면3 종류 라디오 옆 카테고리 아이콘 */
.type-icon { width: 20px; height: 20px; vertical-align: middle; margin: 0 2px 0 4px; }

.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input[type="text"],
.field input[type="date"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%; padding: 10px 12px; font-size: 15px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text);
}
.field textarea { resize: vertical; }

fieldset.field { border: none; padding: 0; margin: 0 0 18px; }
fieldset.field legend { font-size: 13px; color: var(--muted); margin-bottom: 6px; padding: 0; }
fieldset.field label { margin-right: 14px; font-size: 14px; }

.badge-soon {
  font-style: normal; font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; margin-left: 6px;
}

/* 화면당 핵심액션 1개 */
.btn-primary {
  display: block; width: 100%; padding: 13px; margin-top: 8px;
  background: var(--accent); color: #fff; border: none; border-radius: 10px;
  font-size: 15px; font-weight: 700; cursor: pointer;
}
.btn-accent {
  background: var(--accent); color: #fff; border: none; border-radius: 16px;
  padding: 6px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
}

.section-label {
  font-size: 13px; color: var(--muted); font-weight: 700;
  margin: 24px 0 10px; letter-spacing: 0.02em;
}
.section-label:first-child { margin-top: 0; }

.record-list { list-style: none; margin: 0 0 8px; padding: 0; }
.record-item {
  display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line);
  cursor: default; align-items: flex-start;
}
.record-item.clickable { cursor: pointer; }
.record-icon { font-size: 16px; line-height: 1.4; }
.record-icon img { width: 20px; height: 20px; display: block; }
.record-main { flex: 1; min-width: 0; }
.record-date { font-size: 12px; color: var(--muted); }
.record-title { font-size: 14.5px; font-weight: 600; }
.record-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.record-warn { font-size: 12px; color: var(--warn); margin-top: 2px; }
.record-empty { color: var(--muted); font-size: 13.5px; padding: 6px 0; text-align: center; }
.record-empty img { width: 80px; height: 80px; display: block; margin: 4px auto 8px; opacity: 0.9; }

/* ★T3f(개정) 화면4(설정) — 테마행 + 준비중 목록 */
.settings-row { padding: 4px 0 8px; }
.theme-toggle {
  display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text);
  cursor: pointer;
}
.theme-toggle input { accent-color: var(--accent); width: 18px; height: 18px; }

/* ★T3f(확장) 서체선택 라디오행 — theme-toggle과 같은 톤, 세로배열(라벨이 길어서) */
.font-choice { border: none; padding: 0; margin: 0; }
.font-choice legend { font-size: 13px; color: var(--muted); margin-bottom: 8px; padding: 0; }
.font-choice label {
  display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text);
  cursor: pointer; padding: 6px 0;
}
.font-choice input { accent-color: var(--accent); width: 18px; height: 18px; }

.settings-list { list-style: none; margin: 0; padding: 0; }
.settings-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.settings-item.disabled { color: var(--muted); }