@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

/* =========================================================================
   우리의 다이어리 — 편집 디자인 시스템
   White + Black + 제한된 Red accent / Editorial · Planning Desk

   《Bullshit on Wagen》 관리자 페이지(/admin/style.css)와 같은 규칙입니다.
   · 종이는 «흰색». 그 위에 옅은 회색 판과 또렷한 선으로 층을 나눕니다. 그림자 없음
   · 이모지를 쓰지 않습니다. 아이콘은 nav.js 안에 선(SVG)으로 그려 두었습니다
   · 글꼴은 Pretendard 하나. **명조는 쓰지 않습니다** (2026-08-30)
   · 색은 이 파일 맨 위 :root 한 곳에서 관리합니다

   이 파일은 각 페이지의 <style> 뒤에 실려서 그 위를 덮습니다.
   ========================================================================= */

/* =========================================================================
   0. 색과 크기 — 여기 한 곳만 고치면 세 화면이 다 바뀝니다
   ========================================================================= */
:root{
  /* 바탕 — 종이는 «흰색», 그 위에 옅은 회색 판을 얹어 층을 나눕니다.
     예전에는 바탕(#FAFAF9)과 카드(#FFF)가 2% 밖에 차이가 안 나서
     눈이 층을 못 읽고 피로했습니다. 지금은 흰색 / 회색판 / 진한 선 셋으로 나눕니다. */
  --bg:#FFFFFF;
  --ground:#FFFFFF;
  --paper:#FFFFFF;
  --surface:#FFFFFF;      /* 카드 — 흰색 + 또렷한 테두리 */
  --card:#FFFFFF;
  --surface-2:#F3F3F0;    /* 카드 «안» 의 회색 판 (안내·메모·입력칸) */
  --paper-2:#EBEBE7;
  --subtle:#F3F3F0;
  --subtle-2:#EBEBE7;
  --rail:#FAFAF9;         /* 왼쪽 메뉴 — 본문 흰색과 구분되게 살짝 어둡게 */

  /* 글자 — 보조 글씨를 한 단계씩 진하게 했습니다 */
  --ink:#111111;
  --ink-1:#111111;
  --ink-2:#555555;
  --ink-3:#7E7E7A;
  --black:#111111;

  /* 선 — 흰 바탕에서도 카드 모서리가 보이도록 진하게 */
  --line:#DCDCD7;
  --line-2:#B9B9B2;

  /* 강조 — 빨강은 «지금·오늘·중요» 에만 씁니다 */
  --accent:#E8332C;
  --accent-soft:#FFF4F3;
  --accent-line:#F6C4C1;

  /* 페이지들이 이미 쓰고 있는 이름에 새 값을 얹습니다.
     이 이름들을 그대로 두어야 달력·카드·지도가 한꺼번에 따라옵니다. */
  --sea:#111111;     /* 으뜸 단추 · 브랜드 */
  --tide:#111111;    /* 링크 · 눌린 상태 · 테두리 강조 */
  --ember:#E8332C;   /* 오늘 · 남은 날 · 고른 탭 · 일요일 */
  --gold:#B0791A;    /* 별점 · 카페 */
  --ok:#177C48;      /* 다녀옴 · 확인 */
  --warn:#8A6410;
  --warn-bg:#FBF6EA;
  --warn-line:#E8DCC0;

  /* 일정 종류 색 — 작은 점·띠에만 (브레멘의 역할 색과 같은 결) */
  --k-food:#E8332C;
  --k-cafe:#B0791A;
  --k-spot:#111111;
  --k-play:#177C48;
  --k-stay:#2F5FD0;
  --k-move:#999999;

  --shadow:none;
  --shadow-lift:none;

  --side-w:224px;
  --top-h:60px;
  --pad-x:36px;
  --max:1180px;

  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  /* ⚠️ 명조는 쓰지 않습니다. 큰 글씨가 궁서체처럼 보인다는 이야기를 듣고 2026-08-30 에
     전부 Pretendard 로 바꿨습니다. 이 값을 명조로 되돌리지 마세요. */
  --serif:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","D2Coding",Menlo,Consolas,monospace;

  /* 옛 이름들 — 지워진 스크랩북 파일이 쓰던 것. 남겨 두어야 빈 값이 안 됩니다 */
  --f-body:var(--sans);
  --f-hand:var(--sans);
  --f-title:var(--sans);
  --wc-rose:#F1F1EF; --wc-sage:#F1F1EF; --wc-sky:#F1F1EF;
  --wc-peach:#F1F1EF; --wc-lav:#F1F1EF; --wc-gold:#F1F1EF;
  --rose:#666666; --sage:#666666; --sky:#666666; --peach:#666666; --lav:#666666;
}

/* 밤 모드는 쓰지 않습니다 — 브레멘 관리자 화면과 같습니다.
   [라이트/다크] 단추는 감춰 두었고, 눌러도 화면이 바뀌지 않게 값을 같게 둡니다. */
:root[data-theme="dark"],
:root[data-theme="light"]{
  --bg:#FFFFFF; --ground:#FFFFFF; --paper:#FFFFFF;
  --surface:#FFFFFF; --card:#FFFFFF; --surface-2:#F3F3F0; --paper-2:#EBEBE7;
  --subtle:#F3F3F0; --subtle-2:#EBEBE7; --rail:#FAFAF9;
  --ink:#111111; --ink-1:#111111; --ink-2:#555555; --ink-3:#7E7E7A;
  --line:#DCDCD7; --line-2:#B9B9B2;
  --sea:#111111; --tide:#111111; --ember:#E8332C;
  --gold:#B0791A; --ok:#177C48;
  --warn:#8A6410; --warn-bg:#FBF6EA; --warn-line:#E8DCC0;
  --shadow:none; --shadow-lift:none;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#FFFFFF; --ground:#FFFFFF; --paper:#FFFFFF;
    --surface:#FFFFFF; --card:#FFFFFF; --surface-2:#F3F3F0; --paper-2:#EBEBE7;
    --subtle:#F3F3F0; --subtle-2:#EBEBE7; --rail:#FAFAF9;
    --ink:#111111; --ink-1:#111111; --ink-2:#555555; --ink-3:#7E7E7A;
    --line:#DCDCD7; --line-2:#B9B9B2;
    --sea:#111111; --tide:#111111; --ember:#E8332C;
    --gold:#B0791A; --ok:#177C48;
    --warn:#8A6410; --warn-bg:#FBF6EA; --warn-line:#E8DCC0;
    --shadow:none; --shadow-lift:none;
  }
}

/* =========================================================================
   1. 바탕글
   ========================================================================= */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.7;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
.mono, .dt, .dates, .dday, .saved{ font-family:var(--mono); }
.serif{ font-family:var(--serif); }

/* 왼쪽 메뉴가 끼워지기 전 한순간 깜빡이는 것을 막습니다 */
body{ opacity:0; }
body.laid{ opacity:1; transition:opacity .12s ease; }

a{ color:var(--ink); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:4px; }

/* 손글씨 글꼴은 쓰지 않습니다 */
.hand{
  font-family:var(--sans) !important;
  font-weight:700;
  letter-spacing:-.03em;
}

/* 옛 줄(.homebar)은 자리만 남기고 감춥니다 — 지우면 일정 화면이 멈춥니다 */
.homebar{ display:none !important; }

/* 밤 모드 단추는 쓰지 않습니다 */
#btn-theme{ display:none !important; }

/* =========================================================================
   2. 뼈대 — 왼쪽 메뉴 · 위쪽 줄
   ========================================================================= */
.app{ min-height:100vh; }

.side{
  position:fixed; left:0; top:0; bottom:0; width:var(--side-w);
  background:var(--rail); border-right:1px solid var(--line-2);
  display:flex; flex-direction:column;
  /* ⚠️ 일정 화면의 머리글(.top)이 z-index:70 이라 그보다 위여야 합니다.
     낮추면 좁은 화면에서 메뉴가 머리글에 가려집니다. */
  z-index:130;
  transition:width .16s ease, transform .2s ease;
}
.side-brand{
  display:block; padding:22px 20px 20px; text-decoration:none; flex:none;
}
.side-brand .bb{
  font-size:10px; font-weight:700; letter-spacing:.16em;
  color:var(--ink-3); display:block; margin-bottom:6px;
}
.side-brand .bt{
  font-size:18px; font-weight:700; line-height:1.25; letter-spacing:-.045em;
  color:var(--accent); display:block;
}

.side-nav{ flex:1; overflow-y:auto; padding:2px 12px 14px; }
.side-sec{
  font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
  padding:12px 8px 7px; font-weight:700;
}
.side-nav a{
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; margin-bottom:2px; border-radius:8px;
  text-decoration:none; color:var(--ink); font-size:13.5px; font-weight:500;
  transition:background .15s; letter-spacing:-.02em;
}
.side-nav a[hidden]{ display:none; }
.side-nav a svg{ width:17px; height:17px; flex:none; stroke:currentColor; opacity:.5; }
.side-nav a span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-nav a:hover{ background:var(--subtle); }
.side-nav a.on{ background:var(--black); color:#fff; font-weight:600; }
.side-nav a.on svg{ opacity:1; }
.side-div{ height:1px; background:var(--line); margin:12px 8px; }

.side-foot{ flex:none; padding:16px 22px 20px; display:flex; flex-direction:column; gap:3px; border-top:1px solid var(--line); }
.side-foot .fb{ font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--ink-2); }
.side-foot .fy{ font-size:10.5px; letter-spacing:-.01em; color:var(--ink-3); line-height:1.5; }

/* 메뉴를 아이콘만 남기고 접었을 때 */
body.nav-mini{ --side-w:62px; }
body.nav-mini .side-brand{ padding:20px 4px 18px; text-align:center; overflow:hidden; }
body.nav-mini .side-brand .bb{
  font-size:8px; letter-spacing:.02em; margin:0; white-space:nowrap;
}
body.nav-mini .side-brand .bt,
body.nav-mini .side-sec,
body.nav-mini .side-nav a span,
body.nav-mini .side-foot{ display:none; }
body.nav-mini .side-nav{ padding:6px 10px; }
body.nav-mini .side-nav a{ justify-content:center; padding:10px 0; }

.nav-scrim{ display:none; }

.doc{ margin-left:var(--side-w); min-height:100vh; display:flex; flex-direction:column; transition:margin-left .16s ease; }

.topbar{
  position:sticky; top:0; z-index:100; height:var(--top-h); flex:none;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:0 var(--pad-x);
}
.top-burger{
  display:inline-flex; background:none; border:none; cursor:pointer; padding:7px;
  border-radius:6px; color:var(--ink); flex:none;
}
.top-burger:hover{ background:var(--subtle); }
.top-burger svg{ width:20px; height:20px; stroke:currentColor; display:block; }
.top-title{
  font-size:16px; font-weight:600; letter-spacing:-.03em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.top-right{ margin-left:auto; display:flex; align-items:center; gap:6px; flex:none; }

/* 껍데기는 언제나 화면 폭을 다 씁니다.
   (페이지의 main{max-width:940px; margin:0 auto} 이 여기까지 닿지 않도록 못 박습니다) */
.doc > .main{
  flex:1; width:100%; max-width:none; margin:0; padding:0; align-self:stretch;
}
.sitefoot{
  margin-top:56px; border-top:1px solid var(--line);
  padding:22px var(--pad-x) 30px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:11px; color:var(--ink-3); letter-spacing:.02em;
}
.sitefoot .sf-b{ font-weight:700; letter-spacing:.14em; color:var(--ink-2); }
.sitefoot .sf-s{ width:1px; height:11px; background:var(--line-2); }

@media (max-width:900px){
  :root{ --pad-x:18px; }
  .side{ transform:translateX(-100%); box-shadow:0 0 0 100vmax rgba(0,0,0,0); }
  body.nav-open .side{ transform:none; }
  body.nav-mini{ --side-w:224px; }
  body.nav-mini .side-brand{ padding:22px 20px 20px; text-align:left; }
  body.nav-mini .side-brand .bt,
  body.nav-mini .side-sec,
  body.nav-mini .side-nav a span,
  body.nav-mini .side-foot{ display:block; }
  body.nav-mini .side-nav a{ justify-content:flex-start; padding:9px 12px; }
  .doc{ margin-left:0; }
  body.nav-open .side{ box-shadow:0 0 40px rgba(0,0,0,.16); }
  body.nav-open .nav-scrim{
    display:block; position:fixed; inset:0; z-index:125; background:rgba(17,17,17,.38);
  }
}

/* =========================================================================
   3. 글 폭 — 화면이 넓어져도 글줄이 길어지지 않게
   ========================================================================= */
.wrap,
.main > main,
.top-in,
.dock-in{
  max-width:var(--max) !important;
  margin-left:auto; margin-right:auto;
  padding-left:var(--pad-x) !important; padding-right:var(--pad-x) !important;
}
.main > main{ padding-top:26px !important; padding-bottom:96px !important; }
header.top{ background:var(--bg); border-bottom:1px solid var(--line); }

/* =========================================================================
   4. 스크랩북 장식을 걷어냅니다
      (마스킹테이프 · 스티커 · 일러스트 · 빨랫줄 · 종이 질감)
   ========================================================================= */
.washi, .sticker, .donemark, .grow, .clip, .decor, .sprig-l, .sprig2,
.cornerflower, .heroart, .headart, .sticker-plant, .daychk,
.clothes .line{
  display:none !important;
}
.paper-card, .cal, .tcard, .ev, .note, .wxbox, .budwrap, .pinned .pl{
  background-image:none !important;
  box-shadow:none !important;
}
/* 사진이 없을 때 깔리던 파스텔 종이는 회색 판으로 */
img[src*="/06-photos/"]{ display:none !important; }

/* =========================================================================
   5. 홈 — 머리글
   ========================================================================= */
.hero{
  padding:34px 0 26px; display:block; position:static;
  border-bottom:1px solid var(--line);
}
.hero h1{
  font-family:var(--sans) !important; font-weight:700 !important;
  font-size:36px !important; letter-spacing:-.055em; line-height:1.15; color:var(--ink);
}
.hero h1 .dname{ color:var(--ink); }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero p{
  margin:10px 0 0; font-size:12.5px; color:var(--ink-3);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.renamebtn{
  background:none; border:1px solid var(--line); border-radius:6px;
  padding:3px 9px; font-size:11px; font-weight:600; color:var(--ink-2);
}
.renamebtn:hover{ border-color:var(--ink); color:var(--ink); }

.quote{
  font-family:var(--sans) !important; font-weight:500 !important;
  position:relative; margin:44px 0; padding:0 0 0 20px;
  border-left:2px solid var(--accent);
  font-size:18px; line-height:1.7; color:var(--ink-2); letter-spacing:-.03em;
}
.quote em{ font-style:normal; display:block; }
.quote .by{
  display:block; margin-top:12px; font-weight:400; font-size:11px;
  letter-spacing:.02em; color:var(--ink-3);
}

/* =========================================================================
   6. 구역 머리 — 브레멘식 작은 대문자 라벨
   ========================================================================= */
.sec{ margin-top:40px; }
.sechead{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
  padding-bottom:9px; border-bottom:1px solid var(--ink);
}
.sechead h2{
  font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--ink);
  text-transform:uppercase;
}
.sechead .n{ font-size:11px; color:var(--ink-3); margin-left:auto; }
.sec > h3{
  font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--ink);
  padding-bottom:9px; border-bottom:1px solid var(--ink); text-transform:uppercase;
}

/* =========================================================================
   7. 단추
   ========================================================================= */
.gbtn, .hbtn, .sbtn, .dbtn, .updbtn, .sheetbtn{
  border-radius:7px; font-weight:600; letter-spacing:-.01em;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  transition:border-color .15s, color .15s, background .15s;
}
.gbtn:hover, .hbtn:hover, .sbtn:hover, .dbtn:hover, .updbtn:hover, .sheetbtn:hover{
  border-color:var(--ink); color:var(--ink); background:var(--surface);
}
.sbtn.go, .sbtn2, .updbtn:not(.ghost){
  background:var(--black); border-color:var(--black); color:#fff;
}
.sbtn.go:hover, .sbtn2:hover, .updbtn:not(.ghost):hover{
  background:#000; border-color:#000; color:#fff;
}
.sbtn.go:disabled{ opacity:.35; }
.dbtn.hi{ border-color:var(--ink); color:var(--ink); font-weight:700; }
.sechead .newbtn{
  margin-left:auto; border-color:var(--black); background:var(--black); color:#fff; font-weight:600;
}
.sechead .newbtn:hover{ background:#000; border-color:#000; color:#fff; }
.addbtn{
  border-radius:8px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-2); font-weight:600;
}
.addbtn:hover{ border-color:var(--ink); color:var(--ink); }
.linkish{
  background:none; border:0; border-bottom:1px solid var(--ink-3);
  padding:0; color:var(--ink); font-weight:600; border-radius:0;
}

.syncstate{ border-radius:5px; background:var(--subtle); font-size:10.5px; letter-spacing:-.01em; }
.syncstate.ok{ color:var(--ok); background:#EDF7F1; }
.syncstate.bad{ color:var(--accent); background:var(--accent-soft); }
.syncstate.warn{ color:var(--warn); background:var(--warn-bg); }

/* =========================================================================
   8. 달력
   ========================================================================= */
.cal{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:20px; overflow:visible;
}
.calbar{ margin-bottom:16px; }
.calbar h3{ font-size:19px; font-weight:600; letter-spacing:-.03em; }
.navb button{
  width:30px; height:30px; border-radius:6px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2);
}
.navb button:hover{ border-color:var(--ink); color:var(--ink); }
.navb .today{ font-weight:600; }

.dow span{ font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--ink-3); }
.dow span:first-child{ color:var(--accent); }
.dow span:last-child{ color:var(--ink-2); }

.days, .dow{ gap:4px; }
.day{
  border-radius:6px; border:1px solid var(--line);
  background:var(--surface); position:relative;
}
.day.out{ background:transparent; border-color:transparent; opacity:.3; }
.day .d{ font-size:11.5px; font-weight:600; color:var(--ink-2); }
.day.sun .d{ color:var(--accent); }
.day.sat .d{ color:var(--ink-2); }
.day.has{ background:var(--surface); border-color:var(--line-2); }
.day.today{
  border-color:var(--accent) !important;
  background:var(--accent-soft) !important;
  box-shadow:inset 0 0 0 1px var(--accent);
}
.day.today .d{ color:var(--accent); font-weight:700; }
.day.add:hover{ border-color:var(--ink); }
.day.add:hover .plus{ color:var(--ink); }

/* 일정이 있는 날 — 수채 얼룩 대신 얇은 회색 판 */
.day.tinted{
  background-color:var(--subtle) !important;
  border-color:var(--line-2) !important;
  border-radius:6px !important;
}
.day.tinted.span-start{ border-radius:6px 2px 2px 6px !important; }
.day.tinted.span-mid{ border-radius:2px !important; }
.day.tinted.span-end{ border-radius:2px 6px 6px 2px !important; }
.day.visited{ background-color:var(--subtle-2) !important; }

.sched .li{ font-size:9.5px; color:var(--ink-2); }
.sched .li b{ color:var(--ink); font-weight:700; }
.sched .li.ok{ color:var(--ink-3); }

/* 달력 칸의 일정 이름표 */
.day .chip{
  border-radius:4px; font-size:10px; font-weight:600; padding:2px 5px;
  background:var(--black); color:#fff; border:0;
}
.day .chip.past{ background:var(--subtle-2); color:var(--ink-2); }
.day .chip.mine{ background:var(--surface); color:var(--ink); border:1px solid var(--ink); }

/* =========================================================================
   9. 일정 카드 (다가오는 일정)
   ========================================================================= */
.cards{ gap:14px; }
.tcard{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px 17px; overflow:visible;
  transition:border-color .15s;
}
.tcard:hover{ border-color:var(--ink); transform:none; }
.tcard .when{ font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--ink-3); }
.tcard h3{
  font-family:var(--sans) !important; font-weight:700 !important;
  margin:8px 0 5px; font-size:19px; letter-spacing:-.035em; color:var(--ink);
}
.tcard p{ font-size:13px; color:var(--ink-2); }
.tcard .foot{ margin-top:14px; padding-top:11px; border-top:1px solid var(--line); font-size:11.5px; }
.tcard .go{ color:var(--ink); font-weight:600; }

.tag{
  font-size:9.5px; font-weight:700; letter-spacing:.09em; padding:2px 7px;
  border-radius:4px; background:var(--subtle-2); color:var(--ink-2); text-transform:uppercase;
}
.tag.soon{ background:var(--accent); color:#fff; }
.tag.done{ background:var(--subtle-2); color:var(--ink-2); }
.tag.plan{ background:var(--black); color:#fff; }

.byname{
  position:absolute; top:12px; right:14px; font-size:9.5px; font-weight:700;
  letter-spacing:.06em; color:var(--ink-2); background:var(--subtle-2);
  border-radius:4px; padding:2px 7px;
}
.delbtn{
  position:absolute; top:9px; right:10px; width:22px; height:22px; padding:0;
  border:1px solid var(--line); background:var(--surface); border-radius:6px;
  color:var(--ink-3); font-size:11px; line-height:1; opacity:0; transition:opacity .15s;
}
.tcard:hover .delbtn, .tcard:focus-within .delbtn,
.pinned:hover .delbtn, .pinned:focus-within .delbtn{ opacity:1; }
.delbtn:hover{ border-color:var(--accent); color:var(--accent); }

/* =========================================================================
   10. 지난 일정 — 빨랫줄 폴라로이드를 «사진 카드»로
   ========================================================================= */
.clothes{ position:static; padding:0; }
.pins{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:14px; padding-top:0;
}
.pinned{
  position:relative; width:auto; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  overflow:hidden; transition:border-color .15s;
}
.pinned:hover{ border-color:var(--ink); }
.pinned .pl{
  transform:none !important; background:var(--surface) !important;
  padding:0; border:0; border-radius:0; box-shadow:none !important;
}
.pinned:hover .pl{ transform:none !important; }
.pinned .phwrap{
  display:block; position:relative; background:var(--subtle-2);
  aspect-ratio:4/3; overflow:hidden;
}
.pinned .phwrap::after{ display:none; }
.pinned .phwrap::before{
  content:"사진 없음"; position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:10.5px; letter-spacing:.1em; color:var(--ink-3);
}
.pinned .ph{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover; display:block;
  height:auto; aspect-ratio:4/3;
  filter:none !important; border-radius:0;
}
.pinned:hover .ph{ filter:none !important; }
.pinned .cap{
  font-family:var(--sans) !important; font-weight:700 !important;
  display:block; text-align:left; padding:12px 14px 0;
  font-size:14.5px !important; letter-spacing:-.03em; color:var(--ink);
  line-height:1.35;
}
.pinned .dt{
  display:block; text-align:left; padding:4px 14px 13px;
  font-size:10.5px; color:var(--ink-3); margin-top:0;
}
.pinned .setph{
  position:absolute; top:8px; left:8px; z-index:3;
  border:1px solid var(--line); background:rgba(255,255,255,.94);
  border-radius:5px; padding:3px 8px; font-size:10.5px; font-weight:600;
  color:var(--ink-2); opacity:0; transition:opacity .15s;
}
.pinned:hover .setph, .pinned:focus-within .setph{ opacity:1; }
.pinned .setph:hover{ border-color:var(--ink); color:var(--ink); }
.pinned .byname{ top:8px; right:8px; z-index:3; }
.pinned .delbtn{ top:8px; right:8px; z-index:3; }

/* =========================================================================
   11. 메모 · 빈 자리 · 안내
   ========================================================================= */
.notes{ gap:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface); }
.notes:empty{ display:none; }
.note{
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  padding:12px 16px; background:var(--surface);
}
.note:last-child{ border-bottom:0; }
.note .dt{ font-size:11px; color:var(--ink-3); min-width:80px; }
.note .tt{ font-size:14px; font-weight:500; letter-spacing:-.02em; }
.note .tt:focus{ background:var(--subtle); border-radius:4px; }
.note .x{ border-radius:5px; }
.note .x:hover{ background:var(--subtle); color:var(--accent); }

.empty, .empty-msg{
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  padding:34px 22px; text-align:center; font-size:13px; color:var(--ink-3);
}
.howto, .hint{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:16px 18px; font-size:13px; color:var(--ink-2); line-height:1.75;
}
.howto b, .hint b{ color:var(--ink); }
.howto code{
  font-family:var(--mono); font-size:12px; background:var(--subtle);
  border:1px solid var(--line); border-radius:4px; padding:1px 6px;
}
.hiddenbox{ margin-top:20px; }
.hrestore{
  border:1px solid var(--line); background:var(--surface); border-radius:7px;
  padding:5px 11px; font-size:12px; color:var(--ink-2); font-weight:600;
}
.hrestore:hover{ border-color:var(--ink); color:var(--ink); }

/* =========================================================================
   12. 창(모달) · 로그인
   ========================================================================= */
.modal{ background:rgba(17,17,17,.45); }
.modal .sheet{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.28); padding:28px;
}
.modal .sheet h3{
  font-size:20px; font-weight:600; letter-spacing:-.035em;
  padding-bottom:12px; border-bottom:1px solid var(--ink); margin-bottom:14px;
}
.modal .sheet .lead{ font-size:13px; color:var(--ink-2); line-height:1.75; }

.gate{ background:var(--bg); }
.gatebox{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:36px 32px; box-shadow:none; width:min(420px,100%);
}
.gatebox h1{
  font-family:var(--sans) !important; font-weight:700 !important;
  font-size:31px !important; letter-spacing:-.055em; margin-bottom:6px;
}
.gatebox h1 em{ font-style:normal; color:var(--accent); }
.glead{ font-size:12.5px; color:var(--ink-3); margin-bottom:24px; }
.gtabs{ gap:0; border-bottom:1px solid var(--line); margin-bottom:20px; }
.gtab{
  flex:1; border:0; border-bottom:2px solid transparent; border-radius:0;
  background:none; padding:9px 4px; font-size:12px; font-weight:600; color:var(--ink-3);
}
.gtab[aria-selected="true"]{
  background:none; border-color:var(--accent); color:var(--ink);
}
.gpane label{ font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase; }
.gpane .opt{ text-transform:none; letter-spacing:0; font-weight:400; }
.gpane input{
  border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink);
}
.gpane input:focus{ outline:0; border-color:var(--ink); }
.gerr{ color:var(--accent); font-size:12px; }
.gnote{ font-size:12px; color:var(--ink-3); }
.phrase{
  background:var(--subtle); border:1px solid var(--line); border-radius:8px;
  font-family:var(--mono); font-size:15px; letter-spacing:.01em; color:var(--ink);
}

/* 같이 보기 */
.shbox{ border-top:1px solid var(--line); padding-top:18px; margin-bottom:20px; }
.shbox h4{ font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--ink); text-transform:uppercase; margin-bottom:12px; }
.chips{ gap:0; border:1px solid var(--line); border-radius:7px; overflow:hidden; width:max-content; }
.chips .chip{
  border:0; border-right:1px solid var(--line); border-radius:0;
  padding:7px 14px; font-size:12px; font-weight:600; color:var(--ink-2); background:var(--surface);
}
.chips .chip:last-child{ border-right:0; }
.chips .chip.on{ background:var(--black); color:#fff; }
.picklist{ border:1px solid var(--line); border-radius:8px; }
.shrow{ border-bottom:1px solid var(--line); }
.shrow .who{ font-weight:700; }
.shrow .what{ font-size:11.5px; color:var(--ink-3); }

/* 표지 사진 고르기 */
.covopt{ border-radius:6px; border:1px solid var(--line); background:var(--subtle-2); }
.covopt:hover{ border-color:var(--ink); }
.covopt.on{ border-color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }

/* 입력칸 */
.fld label{ font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase; }
.fld input, .sheet textarea, .sheet input{
  background:var(--surface); border:1px solid var(--line); border-radius:7px; color:var(--ink);
}
.fld input:focus, .sheet textarea:focus{ outline:0; border-color:var(--ink); background:var(--surface); }
.sheet .exam{
  background:var(--subtle); border:1px solid var(--line); border-radius:8px;
  font-size:12px; color:var(--ink-2);
}
.sheet .exam b{ color:var(--ink); }
.drop{
  border:1px dashed var(--line-2); border-radius:10px; background:var(--surface);
  padding:28px 18px; text-align:center; color:var(--ink-2);
}
.drop.on{ border-color:var(--ink); background:var(--subtle); }
.sheetlist{ display:flex; flex-direction:column; gap:4px; }

/* 새 일정 미리보기 */
.pv{ border-top:1px solid var(--ink); padding-top:16px; }
.pvday h4{ font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--ink); text-transform:uppercase; }
.pvi .t{ color:var(--ink); font-weight:700; }
.pvi .k{ background:var(--subtle-2); color:var(--ink-2); border-radius:3px; }

/* =========================================================================
   13. 일정 화면 — 머리글 · 탭
   ========================================================================= */
.top{ top:var(--top-h) !important; background:var(--bg) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
.top-in{ padding-top:20px !important; }
.brandrow{ align-items:baseline; }
.brand{
  font-family:var(--sans) !important; font-weight:700 !important;
  font-size:27px !important; letter-spacing:-.05em; color:var(--ink);
}
.brand em{ font-style:normal; color:var(--accent); }
.dates{ font-size:11px; color:var(--ink-3); letter-spacing:.03em; }
.dday{
  margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.09em;
  color:#fff; background:var(--accent); border:0; border-radius:4px; padding:3px 9px;
}
.tabs{ gap:0; margin-top:16px; border-bottom:1px solid var(--line); }
.tab{
  border-bottom:2px solid transparent; padding:9px 14px 10px;
  font-size:13px; font-weight:600; color:var(--ink-3);
}
.tab:hover{ color:var(--ink); }
.tab[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--accent); }

/* 넓은 화면에서는 왼쪽 메뉴가 탭을 대신합니다 */
@media (min-width:901px){
  .top .tabs{ display:none; }
}
.side-tabs{ display:block; }

.updbar{ background:var(--accent-soft); border-bottom:1px solid var(--accent-line); }
.updbar-in{ max-width:var(--max); margin:0 auto; padding:12px var(--pad-x); }

/* =========================================================================
   14. 일정 카드(ev) — 타임라인
   ========================================================================= */
.tl{ padding-left:24px; }
.tl::before{ background:var(--line); width:1px; left:5px; }
.leg::before{ background:var(--surface); border:1px solid var(--line-2); }
.leg .way{
  border-radius:4px; font-size:11.5px; font-weight:700; padding:3px 9px;
  letter-spacing:-.01em;
}
/* 이동 수단 — 색으로 칠하지 않고 «작은 점 + 흰 알약» 으로.
   빨강을 여기까지 쓰면 정작 오늘·중요 표시가 묻힙니다. */
.leg .way{
  background:#fff; color:var(--ink); border:1px solid var(--line-2);
  padding:3px 11px 3px 9px;
}
.leg .way::before{
  content:""; flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--ink-3); display:inline-block;
}
.leg.walk .way::before{ background:#111111; }
.leg.bus  .way::before{ background:var(--k-food); }
.leg.boat .way::before{ background:var(--k-stay); }
.leg.taxi .way::before{ background:var(--k-cafe); }
.leg .alt2{ font-size:11.5px; color:var(--ink-3); }
.leg .rt{ border:1px solid var(--line); border-radius:5px; color:var(--ink-2); font-size:11px; }
.leg .rt:hover{ border-color:var(--ink); color:var(--ink); }

.ev{
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  box-shadow:none !important; margin-bottom:12px; overflow:visible;
}
.ev:hover{ border-color:var(--line-2); }
.ev::before{
  width:9px; height:9px; margin-top:-4.5px; top:26px; left:-24px;
  background:var(--kc,var(--ink)); box-shadow:0 0 0 3px var(--bg);
}
.ev::after{ width:3px; background:var(--kc,var(--ink)); border-radius:10px 0 0 10px; }
.ev.is-done{ opacity:1; background:var(--subtle); }
.ev.is-done .evtitle{ text-decoration:line-through; color:var(--ink-3); }
.ev.dragover{ border-color:var(--ink); box-shadow:0 0 0 2px var(--ink) !important; }

/* 종류 색 — 카드에 박혀 있는 값보다 이 규칙이 우선입니다 */
.ev[data-kind="food"]{ --kc:var(--k-food) !important; }
.ev[data-kind="cafe"]{ --kc:var(--k-cafe) !important; }
.ev[data-kind="spot"]{ --kc:var(--k-spot) !important; }
.ev[data-kind="play"]{ --kc:var(--k-play) !important; }
.ev[data-kind="stay"]{ --kc:var(--k-stay) !important; }
.ev[data-kind="move"]{ --kc:var(--k-move) !important; }
.ev[data-kind]{ background-color:var(--surface) !important; }

.evtitle{
  font-family:var(--sans) !important; font-weight:700 !important;
  font-size:17.5px; letter-spacing:-.04em; color:var(--ink);
}
.evwhere{ font-size:11px; color:var(--ink-3); font-weight:500; letter-spacing:.01em; }
.clock .st{ font-size:18px; font-weight:700; letter-spacing:-.05em; color:var(--ink); }
.clock .en{ color:var(--ink-2); }
.kind{
  font-size:9.5px; font-weight:700; letter-spacing:.09em; padding:3px 8px;
  border-radius:4px; color:#fff; background:var(--kc,var(--ink));
}
.chk{ border-radius:5px; border:1px solid var(--line-2); }
.chk[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); }
.desc{ font-size:13px; color:var(--ink-2) !important; line-height:1.75 !important; }
.thumb{
  border-radius:7px; border:1px solid var(--line); background:var(--subtle-2);
}
.thumb img.ph, .thumb .maptile{ border-radius:0; }
.thumb .maptile{ filter:grayscale(1) contrast(.95); }
.thumb .mappin{ background:var(--kc,var(--ink)); border:2px solid #fff; }
.thumb .badge{ background:linear-gradient(transparent, rgba(17,17,17,.8)); font-weight:600; }
.thumb .tadd{ background:rgba(17,17,17,.7); border-radius:5px; }
.lnk{ border:1px solid var(--line); border-radius:6px; color:var(--ink-2); font-size:11px; }
.lnk:hover{ border-color:var(--ink); color:var(--ink); }
.lnk.nmap{ color:var(--ink-2); border-color:var(--line); }
.lnk.nmap:hover{ color:var(--ink); border-color:var(--ink); }
.ico{ border-radius:5px; color:var(--ink-3); }
.ico:hover{ background:var(--subtle); color:var(--ink); }
.ico.del:hover{ color:var(--accent); }
.star{ color:var(--line-2); }
.star.on{ color:var(--gold); }
.memo{
  background:var(--subtle); border:1px solid var(--line); border-radius:7px;
  font-size:13px; color:var(--ink);
}
.memo:focus{ border-color:var(--ink); background:var(--surface); }
.shot{ border-radius:7px; border:1px solid var(--line); background:var(--subtle-2); }
.shot .rm{ background:rgba(17,17,17,.72); border-radius:4px; }
.addrow{
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  color:var(--ink-2); font-weight:600;
}
.addrow:hover{ border-color:var(--ink); color:var(--ink); }

/* 주소 고치기 상자 */
.addrbox, .addrwrap{ border:1px solid var(--line); border-radius:8px; background:var(--subtle); }
.addrline, .addrmsg{ font-size:12px; color:var(--ink-2); }
.addrin{ border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.addrres .addropt{ border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.addrres .addropt:hover{ border-color:var(--ink); }

/* =========================================================================
   15. 날씨 · 지도 · 예산
   ========================================================================= */
.wxbox{ border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.wxicon{ font-size:28px; filter:grayscale(1); opacity:.85; }
.wxnow > b{ font-size:19px; font-weight:700; letter-spacing:-.04em; }
.wxrain{ border-left:1px solid var(--line); }
.wxrain b{ font-size:16px; font-weight:700; }
.wxmain.wet .wxrain b{ color:var(--accent); }
.wxfoot, .wxfoot b{ color:var(--ink-3); }

.mapwrap{ border:1px solid var(--line); border-radius:10px; background:var(--subtle-2); }
.tiles img{ filter:grayscale(1) contrast(.92) brightness(1.04); }
.ovl .rline.walk{ stroke:#111111; }
.ovl .rline.bus{ stroke:#E8332C; stroke-dasharray:13 9; }
.ovl .rline.boat{ stroke:#2F5FD0; stroke-dasharray:3 9; }
.ovl .rline.taxi{ stroke:#B0791A; stroke-dasharray:18 7 4 7; }
.ovl .mklbl{ fill:#111111; }
.mapctl button{ border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink-2); }
.mapctl button:hover{ border-color:var(--ink); color:var(--ink); }
.attr{ background:rgba(255,255,255,.9); color:var(--ink-3); }
.maplegend{ font-size:11.5px; color:var(--ink-3); }
.maplegend i.walk{ border-color:#111111; }
.maplegend i.bus{ border-color:#E8332C; }
.maplegend i.boat{ border-color:#2F5FD0; }
.maplegend i.taxi{ border-color:#B0791A; }

.budwrap{ border:1px solid var(--line); border-radius:10px; background:var(--surface); }
table.bud th{ font-size:10px; letter-spacing:.11em; color:var(--ink-3); text-transform:uppercase; }
table.bud td{ border-bottom:1px solid var(--line); }
.total{ border-top:1px solid var(--ink); }
.total b{ font-size:10.5px; letter-spacing:.12em; color:var(--ink-3); text-transform:uppercase; }
.total .n{ font-size:22px; font-weight:700; letter-spacing:-.04em; }

.checks .ci{ border-radius:6px; font-size:13.5px; }
.ci:hover{ background:var(--subtle); }
.ci .box{ border-radius:4px; border:1px solid var(--line-2); }
.ci[aria-pressed="true"] .box{ background:var(--ink); border-color:var(--ink); }

/* 구글 캘린더 */
.calnum{ background:var(--black); border-radius:5px; font-size:12px; font-weight:700; }
.calbody h4{ font-size:15px; font-weight:700; letter-spacing:-.03em; }
.calbody h4 em{ background:var(--accent); color:#fff; border-radius:4px; font-size:9.5px; letter-spacing:.09em; }
.calurl{ background:var(--subtle); border:1px solid var(--line); border-radius:8px; }
.calurl code{ font-family:var(--mono); color:var(--ink-2); }
.calnote{ background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:8px; color:var(--ink-2); }
.calrow{ border:1px solid var(--line); border-radius:7px; background:var(--surface); }
.calrow .t{ color:var(--ink); font-weight:700; }
.lnk.gcal{ color:var(--ink-2); border-color:var(--line); font-weight:600; }
.lnk.gcal:hover{ background:var(--subtle); color:var(--ink); border-color:var(--ink); }

/* =========================================================================
   16. 아래쪽 단추 줄 (일정 화면)
   ========================================================================= */
.dock{
  left:var(--side-w); background:rgba(255,255,255,.95);
  border-top:1px solid var(--line); backdrop-filter:blur(8px);
  transition:left .16s ease;
}
@media (max-width:900px){ .dock{ left:0; } }
.saved{ font-size:10.5px; color:var(--ink-3); }
.saved.flash{ color:var(--ok); }

.lightbox{ background:rgba(17,17,17,.94); z-index:300; }
.lightbox img{ border-radius:4px; }
.lightbox button{ background:rgba(255,255,255,.16); border-radius:6px; font-weight:600; }

/* 남이 열어준 일정임을 알리는 띠 */
.robar{
  background:var(--black); color:#fff; font-size:12px; font-weight:600;
  padding:9px var(--pad-x); letter-spacing:-.01em;
}
.robar a{ color:#fff; }

/* =========================================================================
   17. 좁은 화면
   ========================================================================= */
@media (max-width:560px){
  .hero h1{ font-size:26px !important; }
  .brand{ font-size:21px !important; }
  .cal{ padding:14px; }
  .day{ min-height:56px; }
  .pins{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .modal .sheet{ padding:20px; }
  .gatebox{ padding:26px 20px; }
}

/* =========================================================================
   19. 옛 스크랩북 파일이 챙기던 나머지 — 새 디자인으로 다시 씁니다
       ⚠️ 여기 아래 «남이 열어준 일정» 부분은 꾸밈이 아니라 «기능»입니다.
          지우면 남의 일정에서 고치기 단추가 다시 보입니다.
   ========================================================================= */

/* 달력 칸의 수채 얼룩 — 쓰지 않습니다 */
.day .bloom{ display:none !important; }

/* 새 일정 만들기 — 입력 방식 고르기 */
.intabs{
  display:flex; gap:0; margin:6px 0 16px; width:max-content; max-width:100%;
  border:1px solid var(--line); border-radius:7px; overflow:hidden; flex-wrap:nowrap;
}
.intab{
  border:0; border-right:1px solid var(--line); border-radius:0;
  background:var(--surface); color:var(--ink-2);
  padding:8px 15px; font-size:12.5px; font-weight:600; white-space:nowrap;
}
.intab:last-child{ border-right:0; }
.intab:hover{ background:var(--subtle); color:var(--ink); }
.intab[aria-selected="true"]{ background:var(--black); color:#fff; }
.inpane[hidden]{ display:none; }

/* 파일 끌어다 놓기 */
.drop{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:32px 20px; text-align:center;
  border:1px dashed var(--line-2); border-radius:10px; background:var(--surface);
  color:var(--ink-2); transition:border-color .15s, background .15s;
}
.drop.over{ border-color:var(--ink); border-style:solid; background:var(--subtle); }
.drop b{ font-size:14.5px; color:var(--ink); font-weight:600; }
.drop span{ font-size:12.5px; }
.drop small{ font-size:11px; color:var(--ink-3); }

/* 시트 고르기 */
.sheetlist{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.sheetbtn{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  border:1px solid var(--line); background:var(--surface); border-radius:8px;
  padding:9px 13px; font-size:13px; font-weight:600; color:var(--ink); text-align:left;
}
.sheetbtn:hover{ border-color:var(--ink); background:var(--subtle); }
.sheetbtn small{ font-size:10.5px; font-weight:400; color:var(--ink-3); }
.sheetbtn.weak{ opacity:.6; }
.sheetbtn.weak small{ color:var(--accent); }
#n-sheets{ border-radius:8px; padding:2px 10px 12px; transition:background .3s, box-shadow .3s; }
#n-sheets.flash{ background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent); }
#n-sheets > label{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.08em;
  color:var(--ink-3); margin-top:14px; text-transform:uppercase;
}
#n-sheets > label em{
  font-style:normal; font-weight:600; color:var(--accent);
  letter-spacing:0; margin-left:6px; text-transform:none;
}
#n-tsv{ min-height:200px; font-family:var(--mono); font-size:12px; }

/* 숨긴 일정 되돌리기 */
.hlabel{
  font-size:10.5px; font-weight:700; letter-spacing:.09em;
  color:var(--ink-3); text-transform:uppercase; margin-right:8px;
}
.pvmore{
  margin:10px 0 0; padding:10px 13px; border-radius:8px;
  background:var(--subtle); font-size:12.5px; color:var(--ink-2);
}

/* ── 남이 열어준 일정 — 보기 전용 (기능. 지우지 마세요) ── */
.robar{ position:sticky; top:var(--top-h); z-index:120; text-align:center; }
body.readonly [contenteditable="true"]{ pointer-events:none; }
body.readonly .legedit,
body.readonly .tadd,
body.readonly .chk,
body.readonly .stars,
body.readonly .rm,
body.readonly [data-act="up"],
body.readonly [data-act="down"],
body.readonly [data-act="del"],
body.readonly [data-act="addphoto"],
body.readonly [data-act="addurl"],
body.readonly [data-act="findpic"],
body.readonly [data-act="addropen"],
body.readonly .addrbox,
body.readonly #addbud,
body.readonly #addpack{ display:none !important; }
body.readonly .memo{ pointer-events:none; opacity:.85; }

/* ── 이름 아래 주소 줄 ── */
.addrwrap{ margin-top:5px; }
.addrline{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.addr{
  font-size:12px; line-height:1.55; color:var(--ink-3);
  word-break:break-word; flex:1; min-width:0;
}
.addr.none{ opacity:.6; font-style:italic; }
.addrbtn{
  flex:none; padding:2px 8px; font-size:11px; line-height:1.6;
  border:1px solid var(--line); border-radius:5px;
  background:var(--surface); color:var(--ink-3); cursor:pointer; text-decoration:none;
}
.addrbtn:hover{ border-color:var(--ink); color:var(--ink); }
.addrbox{ margin-top:9px; padding:12px; }
.addrbox[hidden]{ display:none; }
.addrin{ width:100%; padding:8px 10px; font:inherit; font-size:13px; }
.addrbtns{ display:flex; gap:5px; flex-wrap:wrap; margin-top:9px; }
.addrbtns .sbtn{ padding:5px 11px; font-size:12px; }
.addrres{ margin-top:9px; display:flex; flex-direction:column; gap:4px; }
.addropt{
  text-align:left; padding:8px 10px; font-size:12px; line-height:1.55;
  color:var(--ink-2); cursor:pointer; word-break:break-word;
}
.addropt:hover{ color:var(--ink); }
.addrmsg{ margin:0; font-size:12px; line-height:1.6; color:var(--ink-3); }

/* ── 누가 올린 일정인지 ── */
.chip.shared{ border-left:3px solid var(--ink) !important; }
.chip .who{ font-weight:700; opacity:.7; font-size:.92em; margin-right:2px; }

/* =========================================================================
   20. 다듬기
   ========================================================================= */
/* 머리글 밑줄이 두 겹으로 겹치던 것 */
.hero{ border-bottom:0; }
/* 빈 자리 알림은 칸 하나가 아니라 줄 전체로 */
.cards .empty{ grid-column:1/-1; }
/* 첫 구역은 위 여백을 줄입니다 */
.main > main > .sec:first-of-type{ margin-top:14px; }
/* 남은 날 배지 — 빨강은 «오늘»에만 쓰고, 여기는 검정으로 */
.dday{ background:var(--black); color:#fff; }

/* =========================================================================
   22. 가시성 — 흰 바탕 위에서 층이 또렷하게 보이도록 (2026-08-30)

   "배경색과 글씨, 본문 박스 색이 다 유사해서 눈이 피로하다" 는 이야기를 듣고
   층을 셋으로 갈랐습니다.
     ① 종이   흰색 #FFFFFF
     ② 카드   흰색 + 또렷한 테두리(#DCDCD7). 큰 덩어리는 테두리로 나눕니다
     ③ 회색판 #F3F3F0. 카드 «안» 의 안내문·메모·입력칸
   ========================================================================= */

/* 위쪽 줄·바닥 — 흰 종이 위에서 경계가 보이게 */
.topbar{ background:#fff; border-bottom:1px solid var(--line-2); }
.sitefoot{ border-top:1px solid var(--line-2); }

/* 구역 머리 — 검은 줄을 조금 더 또렷하게 */
.sechead{ border-bottom:1.5px solid var(--ink); }
.sec > h3{ border-bottom:1.5px solid var(--ink); }

/* ── 달력 ─────────────────────────────
   빈 칸은 흰색, 일정이 있는 날만 회색 판이 깔려 «오늘 · 일정 있음 · 빈 날» 이
   한눈에 갈립니다. */
.cal{ border:1px solid var(--line-2); }
.days, .dow{ gap:5px; }
.day{
  border:1px solid var(--line);
  background:#fff;
}
.day.out{ background:transparent; border-color:transparent; opacity:.28; }
.day.has,
.day.tinted{
  background-color:#F1F1ED !important;
  border-color:var(--line-2) !important;
}
.day.visited{ background-color:#E7E7E1 !important; }
.day.today{
  border-color:var(--accent) !important;
  background:var(--accent-soft) !important;
  box-shadow:inset 0 0 0 1.5px var(--accent);
}
.dow span{ color:var(--ink-2); }

/* ── 카드 ─────────────────────────────
   흰 종이 위의 흰 카드라서, 테두리가 카드의 전부입니다. 흐리게 하지 마세요. */
.tcard, .pinned, .cal, .wxbox, .budwrap, .ev, .notes, .mapwrap,
.gatebox, .modal .sheet, .calrow, .empty, .empty-msg{
  border-color:var(--line-2);
}
.tcard:hover, .pinned:hover, .ev:hover{ border-color:var(--ink); }

/* ── 카드 안의 회색 판 ─────────────────── */
.hint, .howto, .sheet .exam, .memo, .calurl, .addrbox, .addrwrap,
.pvmore, .drop, .phrase, .fld input, .sheet textarea, .addrin{
  background:var(--surface-2);
}
.hint, .howto{ border:1px solid var(--line); }
.fld input, .sheet textarea, .gpane input, .addrin{
  border:1px solid var(--line-2); background:#fff;
}

/* 본문 글씨 — 한 단계 진하게 */
.desc, .tcard p, .daylead p, .hint, .howto, .modal .sheet .lead{ color:var(--ink-2); }
.evwhere, .dates, .tcard .when, .note .dt{ color:var(--ink-3); }

/* 지난 일정 사진 자리 */
.pinned .phwrap{ background:var(--subtle-2); }

/* 일정 카드 왼쪽 색띠를 조금 더 굵게 — 종류가 한눈에 */
.ev::after{ width:4px; }

/* =========================================================================
   21. 인쇄
   ========================================================================= */
@media print{
  .side, .topbar, .nav-scrim, .dock, .sitefoot, .tools, .addrow, .chk, .ico, .mapctl{
    display:none !important;
  }
  .doc{ margin-left:0 !important; }
  body{ background:#fff; opacity:1 !important; }
  .ev{ box-shadow:none; break-inside:avoid; }
  .panel[hidden]{ display:block !important; }
}