/* 버짓리스트 공통 셸 — 상단 바, 소개 영역, 카드, 푸터
   (assets/base.css 다음에 읽습니다. 앱 화면도 상단 바를 위해 이 파일을 씁니다.) */

/* 상단 바 */
.topbar{border-bottom:1px solid var(--line);background:var(--sheet)}
.topbar-inner{
  max-width:var(--shell);margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:10px 20px;
}
.brand{
  display:inline-flex;align-items:center;gap:4px;
  font-weight:700;font-size:16px;letter-spacing:-0.02em;
  color:var(--ink);text-decoration:none;flex:none;
}
.brand svg{width:24px;height:24px;flex:none}
.topbar nav{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px}
.topbar nav a{color:var(--muted);text-decoration:none;padding:4px 2px}
.topbar nav a:hover{color:var(--ink)}
.topbar nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.topbar .spacer{flex:1}
.topbar .top-cta{
  flex:none;background:var(--ink);color:var(--sheet);text-decoration:none;
  font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:7px;white-space:nowrap;
}
.topbar .top-cta:hover{filter:brightness(1.18)}
@media (max-width:640px){
  .topbar nav{display:none}
}

/* 푸터 */
footer{border-top:1px solid var(--line);background:var(--sheet);margin-top:56px}
.foot-inner{
  max-width:var(--shell);margin:0 auto;padding:0 20px 32px;
  color:var(--muted);font-size:13.5px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
.foot-note{max-width:var(--shell);margin:0 auto;padding:22px 20px 14px;color:var(--muted);font-size:12px;line-height:1.6;word-break:keep-all}

/* 소개 영역과 카드 (홈) */
/* 소개 영역 */
.hero{background:none}
.hero-inner{max-width:var(--wrap);margin:0 auto;padding:44px 20px 36px}
.hero-kicker{color:var(--muted);font-size:13.5px;font-weight:600;margin:0 0 10px}
.hero h1{
  font-size:clamp(26px,4.4vw,38px);line-height:1.28;letter-spacing:-0.02em;
  margin:0 0 12px;max-width:22ch;
}
.hero-lead{color:var(--muted);margin:0;max-width:62ch;line-height:1.7}
/* 소개 글을 건네는 캐릭터와 말풍선 */
.hero-talk{display:flex;align-items:center;gap:18px;margin-top:6px;max-width:760px}
.mascot{
  flex:none;width:104px;height:104px;padding:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mascot svg{width:100%;height:100%;display:block;overflow:visible}
.mascot:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:24px}
.m-shadow{fill:rgba(40,36,32,.14);transform-box:fill-box;transform-origin:center;animation:m-shadow 3.2s ease-in-out infinite}
.m-body{transform-box:fill-box;transform-origin:50% 60%;animation:m-float 3.2s ease-in-out infinite}
.m-eyes{transform-box:fill-box;transform-origin:center;animation:m-blink 4.6s infinite}
.m-pupil{animation:m-look 7s ease-in-out infinite}
/* 한 바퀴: 살짝 웅크렸다가 돌고 착지 */
.mascot.spin .m-body{animation:m-spin .9s cubic-bezier(.45,.05,.3,1)}
@keyframes m-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes m-shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.82);opacity:.6}}
@keyframes m-blink{0%,44%,50%,92%,100%{transform:scaleY(1)}47%,95%{transform:scaleY(.08)}}
@keyframes m-look{0%,30%{transform:translateX(0)}38%,58%{transform:translateX(22px)}66%,82%{transform:translateX(-8px)}90%,100%{transform:translateX(0)}}
@keyframes m-spin{
  0%{transform:translateY(0) rotate(0) scale(1)}
  15%{transform:translateY(4px) rotate(0) scale(1.06,.92)}
  70%{transform:translateY(-22px) rotate(360deg) scale(1)}
  85%{transform:translateY(2px) rotate(360deg) scale(1.05,.95)}
  100%{transform:translateY(0) rotate(360deg) scale(1)}
}
@media (prefers-reduced-motion:reduce){.m-shadow,.m-body,.m-eyes,.m-pupil,.mascot.spin .m-body{animation:none}}
/* 소개 글: 말풍선 없이 글만. 타자 치듯 한 글자씩 나와요.
   자리는 처음부터 다 잡아 두고(흐린 글자 대신 투명), 그 위에 친 글자를 겹쳐서 줄이 밀리지 않아요. */
.hero-bubble{position:relative;flex:1;min-width:0;font-size:15.5px;line-height:1.7}
.tw-ghost{visibility:hidden}
.tw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.tw-live{position:absolute;inset:0}
.tw-live::after{
  content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;
  background:currentColor;animation:tw-caret 1s steps(1) infinite;
}
.tw-live.done::after{animation:tw-caret 1s steps(1) 3;opacity:0}
@keyframes tw-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (max-width:640px){
  .hero-talk{gap:12px;align-items:flex-start}
  .mascot{width:72px;height:72px;margin-top:6px}
  .hero-bubble{font-size:14.5px}
}
/* 한국어 제목·소개는 어절 단위로 줄을 바꿉니다 ("많으니 / 까" 처럼 끊기지 않게) */
.hero h1,.hero-lead,.hero .lead{word-break:keep-all}
.hero-points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.hero-points li{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--paper)}
.hero-points b{display:block;font-size:14.5px;margin-bottom:4px}
.hero-points span{color:var(--muted);font-size:13.5px;line-height:1.6}
.hero-cta{
  display:inline-block;margin-top:18px;
  background:var(--ink);color:var(--sheet);text-decoration:none;
  font-weight:600;padding:11px 20px;border-radius:8px;
}
.hero-cta:hover{filter:brightness(1.18)}
.hero-cta:active{filter:brightness(0.94)}
.hero-note{color:var(--muted);font-size:13px;margin:10px 0 0}
.card-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.card-links a{
  font-size:13px;text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:var(--sheet);
  transition:border-color .15s;
}
.card-links a:hover{background:var(--hover)}

/* 아래쪽 안내 */
.about{max-width:var(--wrap);margin:0 auto;padding:8px 20px 0}
.about h2{font-size:19px;margin:32px 0 10px}
.about h3{font-size:15.5px;margin:18px 0 4px}
.about p{color:var(--muted);margin:0;max-width:66ch;line-height:1.7}
.about ol{color:var(--muted);margin:8px 0 0;padding-left:20px;line-height:1.8;max-width:66ch}
.hero-aff{margin:14px 0 0;word-break:keep-all}
.hero-aff a{white-space:nowrap}

/* 랜딩 페이지 */

.hero{background:none}
.hero-inner{max-width:var(--wrap);margin:0 auto;padding:48px 20px 40px}
.hero-kicker{color:var(--muted);font-size:13.5px;font-weight:600;margin:0 0 10px}
h1{font-size:clamp(26px,4.4vw,38px);line-height:1.28;letter-spacing:-0.02em;margin:0 0 12px;max-width:24ch}
.lead{color:var(--muted);margin:0;max-width:64ch}
.cta{
  display:inline-block;margin-top:24px;
  background:var(--ink);color:var(--sheet);text-decoration:none;
  font-weight:600;padding:12px 22px;border-radius:8px;
}
.cta:hover{filter:brightness(1.18)}
.cta:active{filter:brightness(0.94)}
.note{color:var(--muted);font-size:13px;margin:10px 0 0}

main{max-width:var(--wrap);margin:0 auto;padding:8px 20px 64px}
h2{font-size:21px;margin:42px 0 10px;letter-spacing:-0.015em}
h3{font-size:16px;margin:22px 0 4px}
main p{color:var(--muted);margin:0 0 10px;max-width:66ch}
main ol,main ul{color:var(--muted);margin:6px 0 16px;padding-left:20px;line-height:1.85;max-width:66ch}

.cards{list-style:none;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding:0;margin:20px 0 0}
.cards li{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--sheet)}
.cards b{display:block;font-size:14.5px;margin-bottom:4px;color:var(--ink)}
.cards span{color:var(--muted);font-size:13.5px}

.cat-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px;background:var(--sheet)}
.cat-table th,.cat-table td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.cat-table th{background:var(--paper);font-weight:600;white-space:nowrap}
.cat-table td{color:var(--muted)}

.end{margin-top:52px;padding:28px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--sheet);text-align:center}
.end p{margin-left:auto;margin-right:auto}
.end h2{margin:0 0 8px}
.end .cta{margin-top:16px}


/* 홈: 내 책상 — 흰 바탕에 색 유리판 하나를 얹습니다.
   뒤에 비칠 것이 없으므로 유리의 존재감은 색과 테두리, 그림자가 만듭니다. */
.desk{position:relative;max-width:var(--wrap);margin:0 auto;padding:30px 20px 0}
.desk-head{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:0 0 14px;padding:0 4px}
.desk-head h2{font-size:21px;margin:0 auto 0 0;letter-spacing:-0.02em}  /* 휴지통·새 파일은 오른쪽 끝으로 */
.trash-btn{
  display:inline-flex;align-items:center;gap:6px;border:0;background:none;
  color:var(--muted);font-size:13.5px;padding:7px 10px;border-radius:var(--radius);
}
.trash-btn[hidden]{display:none}
.trash-btn svg{width:15px;height:15px}
.trash-btn:hover{background:var(--hover);color:var(--ink)}
.btn-ink{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--ink);color:var(--sheet);border:0;
  font-size:14px;font-weight:600;padding:8px 14px;border-radius:var(--radius);
}
.btn-ink svg{width:15px;height:15px}
.btn-ink:hover{filter:brightness(1.35)}
.new-menu .menu-pop{left:auto;right:0;min-width:250px}

/* 유리판 — 자기 색이 없습니다. 뒤에 있는 것을 흐리게 만들 뿐이고,
   색은 그 뒤 무늬에서 옵니다. 두께는 가장자리 한 겹으로 만듭니다. */
.desk-board{
  position:relative;isolation:isolate;
  min-height:360px;padding:28px;
  border-radius:28px;
  border:1px solid rgba(64,62,58,.08);
  /* 뒤에 아무것도 없으니 아주 옅은 회색으로만 존재를 알립니다 */
  background:linear-gradient(162deg,
    rgba(96,94,88,.045) 0%,
    rgba(96,94,88,.075) 52%,
    rgba(96,94,88,.05) 100%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:
    /* 바닥에 놓인 판. 그림자를 멀리 던지면 공중에 떠 보입니다. */
    0 1px 2px rgba(40,36,32,.07),
    0 5px 12px -5px rgba(40,36,32,.15),
    0 14px 26px -16px rgba(40,36,32,.2),
    /* 윗면·바닥면의 빛 */
    /* 단면. 띠로 그리면 선이 뚜렷하게 보여서, 가장자리에서 안쪽으로
       번지는 빛으로 둡니다. 두께는 얇게, 경계는 흐리게. */
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(64,62,58,.05),
    inset 0 0 14px -5px rgba(255,255,255,.95),
    inset 0 0 44px rgba(255,255,255,.22);
  display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));
  align-content:start;
  transition:height .18s ease;
}
/* 윗면에 비치는 반사광 */
.desk-board::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg,
    rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 10%, transparent 24%);
}
/* 자유 배치일 때는 격자를 끄고 자석을 좌표로 놓습니다 */
.desk-board.free{display:block;padding:0}

/* 자석 */
/* 기울기와 뜨는 동작을 카드 전체에 겁니다. .file-open 에만 걸어 두면
   D-day 표와 ⋯ 버튼이 제자리에 남아 따로 놉니다. */
.file{
  position:relative;z-index:1;width:100%;
  transform:rotate(var(--tilt,0deg));
  transition:transform .16s ease;
}
.file:hover{transform:rotate(0deg) translateY(-2px)}
.file.dragging{transform:rotate(0deg) scale(1.04);transition:none;z-index:5}
/* 카드마다 제 쌓임 맥락이 있어서, 메뉴를 펼쳐도 뒤에 있는 카드가 그 위를 덮습니다.
   펼친 카드를 통째로 끌어올립니다. */
.file:has(.file-menu[open]){z-index:30}
.desk-board.free .file{position:absolute;width:208px}
.file-open{
  position:relative;display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;grid-template-rows:auto auto auto;
  column-gap:12px;row-gap:1px;align-items:center;
  padding:13px 14px 11px;border-radius:14px;min-height:96px;
  text-decoration:none;color:var(--ink);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 4px 14px rgba(70,64,80,.13), 0 1px 2px rgba(70,64,80,.08);
  transform:rotate(var(--tilt,0deg));
  transition:transform .16s ease, box-shadow .16s ease;
}
.desk-board.free .file-open{cursor:grab}
.file-open:hover{
  transform:rotate(0deg) translateY(-2px);
  box-shadow:0 10px 24px rgba(70,64,80,.18), 0 2px 4px rgba(70,64,80,.1);
  text-decoration:none;
}
.file.dragging .file-open{
  cursor:grabbing;transform:rotate(0deg) scale(1.04);
  box-shadow:0 18px 38px rgba(70,64,80,.26);transition:none;
}
.file.dragging{z-index:5}
.file-ico{grid-row:1 / span 2;width:40px;height:40px}
.file-name{grid-column:2 / span 2;font-weight:600;font-size:14.5px;align-self:end;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-meta{grid-column:2 / span 2;color:var(--muted);font-size:12px;align-self:start}
/* 이름을 .file-bar 로 두면 체크리스트 화면의 경로 줄(.file-bar)과 부딪힙니다 */
.file-progress{grid-column:1 / 3;grid-row:3;height:4px;border-radius:99px;background:rgba(70,64,80,.12);margin-top:9px;overflow:hidden}
.file-progress > span{display:block;height:100%;border-radius:99px;background:var(--accent-fill);transition:width .2s}
.file-count{grid-column:3;grid-row:3;color:var(--muted);font-size:11px;margin-top:9px;font-variant-numeric:tabular-nums}

/* D-day 표 */
.file-dday{
  position:absolute;top:-8px;left:-6px;z-index:2;
  font-size:11.5px;font-weight:700;letter-spacing:-0.01em;
  padding:3px 8px;border-radius:99px;
  background:var(--ink);color:var(--sheet);
  box-shadow:0 2px 6px rgba(70,64,80,.28);
  transform:rotate(calc(var(--tilt,0deg) * -1.6));
  border:0;
  transition:filter .12s;
}
.file-dday:hover{filter:brightness(1.3)}
.file-dday:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.file-dday.soon{background:#C2603F}
.file-dday.past{background:rgba(70,64,80,.45)}

/* 메뉴 자체를 카드 모서리에 붙입니다. summary 만 띄우면 .menu 의 position:relative
   때문에 details 가 기준이 돼서 버튼이 카드 밖으로 떨어져요. */
.file .file-menu{position:absolute;top:7px;right:7px;z-index:2}
.file-more{
  width:26px;height:26px;border-radius:var(--radius);display:grid;place-items:center;
  color:var(--muted);opacity:0;transition:opacity .12s;
}
.file-more svg{width:15px;height:15px;fill:currentColor}
.file:hover .file-more,.file-menu[open] .file-more,.file-more:focus-visible{opacity:1}
.file-more:hover,.file-menu[open] .file-more{background:var(--hover-strong);color:var(--ink)}
.file-menu .menu-pop{min-width:170px}
.file-colors{display:flex;gap:5px;padding:2px 10px 6px}
/* .menu-pop button 이 더 구체적이라, 칩도 그만큼 구체적으로 적어야 배경이 살아납니다 */
.menu-pop .color-chip{
  width:20px;height:20px;flex:none;border-radius:50%;border:1px solid rgba(0,0,0,.08);padding:0;
  background:var(--swatch,var(--accent-fill));
}
.menu-pop .color-chip:hover{transform:scale(1.12);background:var(--swatch,var(--accent-fill))}

/* 빈 책상 */
.desk-empty{position:relative;z-index:1;grid-column:1 / -1;padding:14px 4px}
.desk-empty p{color:var(--muted);margin:0 0 14px;word-break:keep-all}
.start-cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.start-card{
  display:flex;flex-direction:column;gap:4px;text-align:left;
  border:1px solid rgba(255,255,255,.9);border-radius:14px;padding:15px 16px;
  background:rgba(255,255,255,.9);color:var(--ink);
  box-shadow:0 3px 10px rgba(70,64,80,.1);
}
.start-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(70,64,80,.15)}
.start-card b{font-size:15px}
.start-card span{color:var(--muted);font-size:13px;line-height:1.55}
.start-blank{background:rgba(255,255,255,.62)}
.desk-note{color:var(--muted);font-size:13px;margin:26px 4px 0}

/* 날짜 정하기 */
.dday-field{display:flex;align-items:center;gap:10px;margin-top:2px}
.dday-field span{color:var(--muted);font-size:13px;width:3em;flex:none}
.dday-field input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 11px;background:var(--paper);color:var(--ink);font-size:14px;
}
.dday-save{justify-content:center;margin-top:10px;padding:11px 16px}

/* 휴지통 */
.trash-list{margin:4px 0 2px;max-height:50vh;overflow:auto}
.trash-row{display:flex;align-items:center;gap:9px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:14px}
.trash-row:last-child{border-bottom:0}
.trash-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trash-left{color:var(--muted);font-size:12px;white-space:nowrap}
.trash-row button{border:0;background:none;color:var(--muted);font-size:13px;padding:5px 8px;border-radius:var(--radius)}
.trash-row button:hover{background:var(--hover);color:var(--ink)}
.trash-row .danger:hover{color:var(--warn)}
.trash-empty{color:var(--muted);font-size:13.5px;padding:14px 2px}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .page-glow{opacity:.5}
  :root:not([data-theme="light"]) .desk-board{
    background:rgba(40,40,42,.44);border-color:rgba(255,255,255,.1);
    box-shadow:0 18px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  }
  :root:not([data-theme="light"]) .file-open,
  :root:not([data-theme="light"]) .start-card{
    background:rgba(46,46,48,.92);border-color:rgba(255,255,255,.08);
    box-shadow:0 4px 14px rgba(0,0,0,.35);
  }
}

@media (max-width:640px){
  .desk{padding-top:22px}
  .desk-head h2{font-size:19px}
  .desk-board{padding:16px;border-radius:18px;gap:10px;grid-template-columns:1fr}
}

/* 로그인 버튼과 창 */
.auth-slot{flex:none;display:flex;align-items:center}
.auth-btn{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);background:var(--sheet);color:var(--ink);
  font-size:13.5px;padding:6px 12px;border-radius:7px;list-style:none;cursor:pointer;
}
.auth-btn::-webkit-details-marker{display:none}
.auth-btn:hover{background:var(--hover)}
.auth-btn img{border-radius:50%}
.auth-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-fill)}
.auth-name{max-width:8em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-menu{position:relative}
.auth-pop{
  position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:180px;padding:8px;
  background:var(--sheet);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 24px rgba(15,15,14,.14);
}
.auth-hint{color:var(--muted);font-size:12px;margin:2px 4px 6px}
.auth-pop button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:6px;font-size:14px}
.auth-pop button:hover{background:var(--hover)}
.auth-danger{color:var(--warn)}
.login-inner a{color:inherit}
.login-danger{background:var(--warn);color:#fff;margin-top:8px}
.login-danger:hover{filter:brightness(0.94)}
.login-danger:disabled{opacity:.6}

.login-dialog{
  border:0;border-radius:14px;padding:0;background:var(--sheet);color:var(--ink);
  max-width:380px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(15,15,14,.22);
}
.login-dialog::backdrop{background:rgba(15,15,14,.45)}
.login-inner{padding:26px 24px 20px;display:flex;flex-direction:column;gap:10px}
.login-inner h2{margin:0;font-size:19px}
.login-inner p{color:var(--muted);font-size:13.5px;margin:0;line-height:1.6}
.login-inner button{border:0;border-radius:8px;padding:12px 16px;font-size:15px;font-weight:600}
.login-kakao{background:#FEE500;color:#191600;margin-top:8px}
.login-google{background:var(--sheet);color:var(--ink);border:1px solid var(--line) !important;font-weight:500 !important}
.login-kakao:hover,.login-google:hover{filter:brightness(0.97)}
.login-note{font-size:12px !important;margin-top:4px !important}
.login-close{background:none;color:var(--muted);font-weight:400 !important;font-size:13.5px !important;padding:6px !important}

/* 같이 쓰기 링크 창 */
.share-dialog{
  border:0;border-radius:14px;padding:0;background:var(--sheet);color:var(--ink);
  max-width:440px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(15,15,14,.22);
}
.share-dialog::backdrop{background:rgba(15,15,14,.45)}
.share-inner{padding:24px;display:flex;flex-direction:column;gap:10px}
.share-inner h2{margin:0;font-size:18px}
.share-inner p{color:var(--muted);font-size:13.5px;margin:0;line-height:1.6}
.share-inner input{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  background:var(--paper);color:var(--ink);font-size:13px;
}
.share-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.share-actions .btn-primary{border:0;border-radius:8px;padding:10px 16px;font-weight:600;background:var(--ink);color:var(--sheet)}
.share-actions .btn-ghost{border:1px solid var(--line);border-radius:8px;padding:10px 16px;background:none;color:var(--muted)}

/* 드롭다운 메뉴 — 책상과 체크리스트가 같이 씁니다 */
.menu{position:relative}
.menu > summary{list-style:none;cursor:pointer}
.menu > summary::-webkit-details-marker{display:none}
.menu-pop{
  color:var(--ink);text-align:left;font-weight:400;
  position:absolute;right:0;top:calc(100% + 4px);z-index:20;
  min-width:180px;padding:6px;
  background:var(--sheet);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 10px 28px rgba(15,15,14,.13);
}
.menu-pop button{
  display:block;width:100%;text-align:left;
  border:0;background:none;padding:9px 12px;border-radius:var(--radius);font-size:14px;
}
.menu-pop button:hover{background:var(--hover)}
.menu-pop .danger{color:var(--warn)}
.menu-pop small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.menu-pop hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
.menu-note{color:var(--muted);font-size:12px;padding:6px 12px 4px}

/* 알림 한 줄 (되돌리기 포함) */
.toast{
  position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(10px);
  background:var(--ink);color:var(--sheet);padding:11px 18px;border-radius:var(--radius-lg);font-size:14px;
  opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;z-index:40;max-width:90vw;
  display:flex;align-items:center;gap:14px;box-shadow:0 10px 28px rgba(15,15,14,.22);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.show.has-action{pointer-events:auto}
.toast button{border:0;background:none;color:var(--sheet);font-weight:600;text-decoration:underline;padding:0;white-space:nowrap;flex:none}

/* 손가락으로 쓰는 기기에는 호버가 없으니 파일 메뉴를 늘 보여 줍니다 */
@media (hover:none){
  .file-more{opacity:1}
}
@media (max-width:640px){
  .desk{padding-top:28px}
  .desk-head h2{font-size:18px}
}

/* 홈은 상단 바·책상·푸터가 같은 폭으로 서도록 본문도 셸 폭을 씁니다.
   (글줄은 h1 과 .hero-lead 의 ch 제한이 잡아 주므로 길어지지 않아요.) */
body.desk-page .hero-inner,
body.desk-page .desk{max-width:var(--shell)}

/* 홈에서는 소개 영역도 흰 바탕에 그대로 얹혀, 뒤의 빛 얼룩이 비쳐 보이게 둡니다 */
/* 링크 줄 오른쪽 끝에 붙입니다. 좁은 화면에서는 아래로 내려가요. */
.foot-copy{margin-left:auto;font-size:12px}