/* 감사일기 — 수기마을이사 DESIGN.md 규격 그대로 (본문 17px · 딥그린 · 4px 배수 여백) */

/* 더존 본문체 — **서버에서 내려보낸다.** 폰트가 깔려 있지 않은 PC·휴대폰에서도 그대로 보인다.
   🔴 라이선스 — 폰트 파일의 `fsType` 은 **4(Preview & Print)** 이고 「자유 임베딩(0)」이 아니다.
      제작사는 윤디자인(www.YoonDesign.com/license)이다. 수기마을이사에서 이 사실을 보고드렸고
      **개인 사이트임을 근거로 수석님이 진행을 결정**하셨다. 감사일기도 같은 조건으로 쓴다(2026-09-08 선택 D-4).
      약관이 달라지면 이 두 줄만 지우면 local() 로 돌아간다.
   ⚠️ local() 을 앞에 둔다 — 폰트가 이미 깔린 PC 는 내려받지 않는다. */
@font-face{font-family:'DZ';font-weight:400;font-display:swap;
  src:local('[더존] 본문체 10'),local('DOUZONEText10'),url('/fonts/DouzoneText10.woff2') format('woff2')}
@font-face{font-family:'DZ';font-weight:700;font-display:swap;
  src:local('[더존] 본문체 50'),local('DOUZONEText50'),url('/fonts/DouzoneText50.woff2') format('woff2')}

:root{
  --ink:#163300; --body:#333733; --sub:#6a6c6a; --muted:#9a9d99;
  --canvas:#f2f4f0; --card:#fff; --line:#e3e6e0; --line-strong:#c9cec6;
  --brand:#2f6b4f; --brand-deep:#24543e; --brand-soft:#e8f1ec;
  --red:#cb272f; --red-soft:#fbeceb; --amber:#b45309; --amber-soft:#fdf4e7;
  --shadow-pop:0 6px 20px rgba(0,0,0,.08);
  --side-w:240px; --tab-h:56px;

  --on-brand:#fff;              /* 진한 바탕 위의 글자 */
  --panel:#fff;                 /* 옆 메뉴·상단바·아래 탭처럼 카드가 아닌 판 */
  --fill:#e6e9e3;
  --soft:#f7f8f6;
  --scrim:rgba(22,51,0,.45);    /* 확인창 뒤 어둡게 */
  --toast-bg:var(--ink); --toast-fg:#fff;
}

/* 어두운 화면 (2026-09-08 선택 D-3) — 수기마을이사에 정의된 색을 그대로 쓴다.
   🔴 `html[data-theme="dark"]` 이 붙었을 때만 적용된다 — 붙지 않으면 위 밝은 색 그대로다. */
html[data-theme="dark"]{
  --ink:#e8efe9; --body:#dfe4e0; --sub:#a8b0aa; --muted:#7f877f;
  --canvas:#161a17; --card:#1e2320; --line:#2f3733; --line-strong:#414a45;
  --brand:#6fb992; --brand-deep:#8fd4ac; --brand-soft:#22322a;
  --red:#f08a8a; --red-soft:#3a2323; --amber:#e0a95c; --amber-soft:#33291a;
  --shadow-pop:0 6px 20px rgba(0,0,0,.5);

  --on-brand:#12271c;           /* 다크에서는 초록이 밝아져 그 위 글자를 어둡게 해야 읽힌다 */
  --panel:#1a1f1c;
  --fill:#2a312d;
  --soft:#232926;
  --scrim:rgba(0,0,0,.62);
  --toast-bg:#e8efe9; --toast-fg:#161a17;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--canvas);color:var(--body);
  font-family:'DZ','Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  font-size:17px;font-weight:400;line-height:1.55;letter-spacing:-.01em;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{font-family:'DZ','Pretendard',sans-serif;font-weight:700;color:var(--ink);margin:0}
b,strong{font-weight:700}
.hidden{display:none !important}
button,input,select,textarea{font-family:inherit;font-size:17px;color:inherit}
svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ic16{width:16px;height:16px}
.num{font-variant-numeric:tabular-nums}

/* ═══════════ 로그인 ═══════════ */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
#login .box{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:48px 32px;max-width:420px;width:100%;text-align:center}
#login h1{font-size:28px;letter-spacing:-.02em;margin-bottom:8px}
#login p{font-size:17px;color:var(--sub);margin:0 0 24px}
#login small{display:block;margin-top:20px;font-size:15px;color:var(--sub);line-height:1.6}
.kbtn{width:100%;min-height:52px;border:0;border-radius:8px;background:#fee500;color:#191600;
  font-size:17px;font-weight:700;cursor:pointer}
.err{background:var(--red-soft);color:var(--red);border-radius:8px;padding:12px 16px;
  font-size:15px;margin-bottom:16px;text-align:left}

/* ═══════════ 레이아웃 ═══════════ */
#app{display:flex;min-height:100vh;min-height:100dvh}
.side{width:var(--side-w);flex:0 0 auto;background:var(--panel);border-right:1px solid var(--line);
  padding:24px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  overflow-y:auto;overscroll-behavior:contain}
.side .brand{font-family:'DZ','Pretendard',sans-serif;font-size:19px;font-weight:700;color:var(--ink);
  line-height:1.4;text-align:center;margin-bottom:16px}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav button{display:flex;align-items:center;gap:12px;padding:12px;border:0;border-radius:8px;
  background:none;color:var(--body);font-size:17px;text-align:left;cursor:pointer;min-height:44px;width:100%}
.side nav button.on{background:var(--brand-soft);color:var(--brand-deep);font-weight:700}
.side .foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:15px;color:var(--sub);
  text-align:right}
.lnk{background:none;border:0;color:var(--brand);font-size:15px;font-weight:700;padding:4px 0;cursor:pointer}

.topbar{display:none}

main{flex:1;min-width:0;padding:32px;display:flex;flex-direction:column}
main > section{width:100%;display:flex;flex-direction:column;flex:1}
main > section > *{flex:0 0 auto}
main > section > *:last-child{flex:1 1 auto;min-height:0}

/* ═══════════ 공통 조각 ═══════════ */
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.ph h2{font-size:28px;letter-spacing:-.02em}
.ph .sub2{font-size:17px;color:var(--sub);margin-top:4px}
.ph-btns{display:flex;gap:8px;flex-wrap:wrap}
/* 밝게/어둡게 단추 — 손가락으로 누르는 것이라 44px 을 지킨다 */
.thm{width:44px;height:44px;min-width:44px;border:1px solid var(--line-strong);border-radius:8px;
  background:var(--card);color:var(--sub);display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;flex:0 0 auto}
.thm:hover{color:var(--ink);border-color:var(--ink)}
.topbar .thm{width:40px;height:40px;min-width:40px}

.c{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px}
.mb16{margin-bottom:16px}
.lbl{font-size:13px;color:var(--sub);font-weight:700;letter-spacing:.03em;margin-bottom:16px;
  display:flex;justify-content:space-between;align-items:center;gap:8px}
.empty{font-size:17px;color:var(--muted);padding:16px 0}

/* 버튼 */
.btn{min-height:44px;border-radius:8px;padding:12px 20px;font-size:17px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.pri{background:var(--brand);color:var(--on-brand);border:0;font-weight:700}
.btn.sec{background:var(--card);color:var(--ink);border:1px solid var(--line-strong)}
.btn.dgr{background:var(--card);color:var(--red);border:1px solid var(--red);font-weight:700}
.btn.wide{width:100%}
/* 저장 + 취소를 한 칸에 나란히. 그리드라 두 칸이 정확히 같은 폭을 받는다 */
.btn2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn2 .btn{width:100%}
/* 취소는 삭제와 같은 색으로 (수기마을이사 DESIGN §5-1 Danger 규격) */
.btn.sec[onclick^="cancel"],
.btn.cxl{color:var(--red);border-color:var(--red);font-weight:700}
/* 아이콘만 든 작은 단추 */
.cbtn{background:none;border:0;color:var(--sub);cursor:pointer;padding:4px;display:inline-flex;
  align-items:center;gap:4px;font-size:15px}
.cbtn:hover{color:var(--ink)}
.cbtn.del:hover{color:var(--red)}

/* 입력 */
input,select,textarea{border:1px solid var(--line-strong);border-radius:8px;padding:12px 16px;
  background:var(--card);min-height:44px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:-2px;border-color:var(--brand)}
textarea{resize:vertical;line-height:1.55}

/* ═══════════ 글 쓰는 칸 ═══════════ */
/* 사실 · 감정 · 욕구를 위에서 아래로 한 줄씩 (2026-09-08 선택 C-3) */
.wform{display:flex;flex-direction:column;gap:16px}
.wf-item{display:flex;flex-direction:column;gap:6px}
.wf-item > label{font-size:15px;font-weight:700;color:var(--ink)}

/* ═══════════ 글 카드 ═══════════ */
.entry{border:1px solid var(--line);border-radius:8px;padding:16px;background:var(--card);margin-bottom:12px}
.entry:last-child{margin-bottom:0}
.entry .eh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
.entry .et{font-size:15px;color:var(--sub)}
.entry .acts{display:flex;gap:4px}
.entry .fld{margin-bottom:12px}
.entry .fld:last-child{margin-bottom:0}
.entry .fld .k{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:2px}
.entry .fld .v{font-size:17px;color:var(--body);white-space:pre-wrap}

/* ═══════════ 달력 ═══════════ */
.calbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px}
.calbar .ym{font-family:'DZ','Pretendard',sans-serif;font-size:21px;font-weight:700;color:var(--ink)}
.calbar button{width:44px;height:44px;min-width:44px;border:1px solid var(--line-strong);border-radius:8px;
  background:var(--card);color:var(--sub);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calgrid .hd{text-align:center;font-size:15px;color:var(--sub);padding:4px 0;font-weight:700}
.calgrid .day{aspect-ratio:1/1;border:1px solid var(--line);border-radius:8px;background:var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:17px;color:var(--body);cursor:pointer;padding:0;min-height:44px}
.calgrid .day.off{color:var(--muted);background:var(--soft);cursor:default}
.calgrid .day.has{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-deep);font-weight:700}
.calgrid .day.today{outline:2px solid var(--brand);outline-offset:-2px}
.calgrid .day .n{font-size:13px;color:var(--brand);font-weight:400}

/* 🔴 확인창 — 지우거나 고치기 전에 반드시 거친다.
   브라우저 기본 대화상자 대신 앱이 직접 그린다(기기마다 다르게 뜨거나 아예 안 뜨는 것을 막는다). */
.ask-back{position:fixed;inset:0;background:var(--scrim);z-index:900;
  display:flex;align-items:center;justify-content:center;padding:20px}
.ask{background:var(--card);border-radius:16px;padding:28px;width:min(460px,100%);
  box-shadow:0 18px 48px rgba(0,0,0,.22)}
.ask-ti{font-family:'DZ','Pretendard',sans-serif;font-size:21px;font-weight:700;color:var(--ink);line-height:1.4}
/* 무엇을 지우는지 그대로 보여 준다 — 「정말 지울까요?」만으로는 무엇인지 알 수 없다 */
.ask-what{margin-top:12px;padding:12px 16px;background:var(--brand-soft);border-radius:10px;
  font-size:17px;color:var(--body);line-height:1.6;word-break:break-all}
.ask-what:empty{display:none}
.ask-note{margin-top:14px;font-size:15px;color:var(--sub);line-height:1.6}
.ask-note.warn{color:var(--red)}
/* 🔴 취소가 **왼쪽**이다 — 오른쪽 끝은 엄지가 먼저 닿는 자리라 위험한 단추를 두지 않는다 */
.ask-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.ask-btns .btn{min-height:48px;font-size:17px}
@media (max-width:520px){
  .ask{padding:22px}
  .ask-ti{font-size:19px}
}

/* 알림 */
/* 🔴 width:max-content 가 핵심이다. position:fixed + left:50% 는 쓸 수 있는 폭이
   '화면의 절반' 으로 계산되고, max-width 는 상한일 뿐 그 폭을 넓히지 못한다. */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tab-h) + 24px);
  background:var(--toast-bg);color:var(--toast-fg);padding:12px 20px;border-radius:8px;font-size:15px;z-index:80;
  box-shadow:var(--shadow-pop);width:max-content;max-width:min(90vw,420px);text-align:center}

/* ═══════════ 반응형 ═══════════ */
@media (max-width:767px){
  #app{display:block}
  .side{display:none}
  .topbar{display:flex;position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--line);
    padding:16px;justify-content:space-between;align-items:center}
  .topbar .t{font-family:'DZ','Pretendard',sans-serif;font-size:22px;font-weight:700;color:var(--ink)}
  .topbar .u{font-size:15px;color:var(--sub);display:flex;align-items:center;gap:12px}
  main{padding:16px 16px calc(var(--tab-h) + 32px)}
  main > section{display:block}
  .c{padding:20px}
  .ph{margin-bottom:16px}
  .ph h2{display:none}          /* 상단바에 이미 제목이 있다 */
  .ph .sub2{margin-top:0}
  /* 🔴 휴대폰에서는 상단 막대에 이미 단추가 있다 — 제목 줄 단추를 숨기지 않으면 두 개로 보인다 */
  .ph .thm{display:none}
  .calgrid{gap:4px}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--panel);border-top:1px solid var(--line);
    display:flex;padding:8px 0 calc(8px + env(safe-area-inset-bottom));
    transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
  .tabbar button{flex:1;border:0;background:none;font-size:13px;font-weight:700;color:var(--sub);
    display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0;cursor:pointer}
  .tabbar button.on{color:var(--brand)}
}
@media (min-width:768px){
  .tabbar{display:none}
}

/* ══════════════ 터치 규격 ══════════════
   기준을 '화면 폭' 이 아니라 '손가락' 으로 잡는다. 768~1024px 태블릿도 손가락으로 쓴다.
   수기마을이사 DESIGN.md §5-1·§6 = 터치 대상 최소 44×44px. */
@media (hover:none), (pointer:coarse){
  .cbtn{min-width:44px;min-height:44px;justify-content:center}
}