/* 실타래 버전(yarn.html) 전용.
   실 색 = 앱 데이터 팔레트 CAT_PALETTE(src/core/daily.ts) 값 그대로. 데이터 색이라 테마와 무관하되,
   다크에서 뭉개지는 연필 회색(일기)만 같은 팔레트의 밝은 회색으로 바꾼다. */
:root {
  --dev-frame: #23252b;
  --c-todo: #3B5BDB; --c-cal: #0EA5B7; --c-time: #E0641F; --c-money: #D6409F; --c-habit: #2F9E63;
  --c-book: #8B5E3C; --c-wake: #7A5AF8; --c-study: #D99A06; --c-diary: #495057; --c-search: #8b93a5;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-diary: #8b93a5; --dev-frame: #39404e; } }
:root[data-theme="dark"] { --c-diary: #8b93a5; --dev-frame: #39404e; }

[data-cat="todo"] { --c: var(--c-todo); }
[data-cat="cal"] { --c: var(--c-cal); }
[data-cat="time"] { --c: var(--c-time); }
[data-cat="money"] { --c: var(--c-money); }
[data-cat="habit"] { --c: var(--c-habit); }
[data-cat="book"] { --c: var(--c-book); }
[data-cat="wake"] { --c: var(--c-wake); }
[data-cat="study"] { --c: var(--c-study); }
[data-cat="diary"] { --c: var(--c-diary); }
[data-cat="search"] { --c: var(--c-search); }

/* ── 히어로: 모눈종이 위 그래프 뷰 ─────────────────
   2026-09-22 실타래(3D 털실 공) → 2D 노드·엣지 그래프. 점=기록, 선=이어짐, 라벨=손글씨. */
.yhero { padding-block: 24px 56px; overflow: hidden; }
.yhero-in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 24px; align-items: center; }
.yhero h1 {
  margin: 0 0 16px; font-size: clamp(36px, 5vw, 58px); font-weight: 700;
  line-height: 1.2; letter-spacing: -0.03em; text-wrap: balance;
}
.yarn-wrap { position: relative; padding-top: 16px; }
.yarn-stage {
  position: relative; width: min(600px, 100%); aspect-ratio: 1; margin-inline: auto;
  border-radius: var(--r-card); touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.yarn-stage.grabbing, .yarn-stage.grabbing canvas { cursor: grabbing; }
.yarn-stage:focus-visible { outline: 2px dashed var(--accent); outline-offset: 4px; }
.yarn-stage canvas { position: absolute; inset: 0; display: block; cursor: grab; }
.yarn-tags { position: absolute; inset: 0; pointer-events: none; }
/* 라벨: 상자 없이 점 아래 손글씨 한 줄(종이색 후광으로 선 위에서도 읽히게) */
.ytag {
  position: absolute; left: 0; top: 0;
  max-width: 11em; padding: 2px 6px 3px; border: 0; border-radius: var(--r-tick);
  background: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--sub);
  text-shadow: 0 0 4px var(--bg), 0 0 8px var(--bg), 0 1px 0 var(--bg);
  transition: color 0.15s, background-color 0.15s;
  will-change: transform, opacity;
}
.ytag:hover { color: var(--ink); background: var(--accent-soft); }
.ytag.on { color: var(--ink); }
.yarn-hint { position: absolute; left: 0; top: 8px; z-index: 2; width: 200px; font-size: 16px; pointer-events: none; }
.yarn-caption {
  max-width: 600px; min-height: 3.8em; margin: 4px auto 0; text-align: center;
  font-size: 14px; line-height: 2; color: var(--sub); text-wrap: balance;
}
.ychip {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: var(--r-tick);
  background: color-mix(in srgb, var(--c) 13%, var(--panel)); color: var(--ink);
  font-size: 13px; font-weight: 600; line-height: 1.6; white-space: nowrap;
}
.ychip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }

/* ── 히어로 기기 3대: 모니터 뒤, 폰 둘이 앞 ──────────
   비율은 전부 무대 폭 기준. 화면 이미지가 높이를 정하고, 폰은 %로 겹쳐 놓는다. */
.dvs {
  --frame: var(--dev-frame);     /* 기기 테두리: 다크에서도 어두운 기기로 보이게 고정색 */
  --screen: #fcfbf6; --screen-line: #e9e6dc;   /* 앱이 열릴 때 나오는 종이색(iOS Splash와 같은 값) */
  position: relative; width: min(640px, 100%); margin-inline: auto; aspect-ratio: 100 / 84;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dvs { --screen: #1a1d25; --screen-line: #262a35; } }
:root[data-theme="dark"] .dvs { --screen: #1a1d25; --screen-line: #262a35; }
.dv { position: absolute; }
.dv img { display: block; width: 100%; height: auto; }

.dv-mon { left: 7%; width: 86%; top: 0; }
.mon-body {
  padding: 9px 9px 20px; border-radius: 14px; background: var(--frame);
  box-shadow: var(--shadow);
}
.mon-body img { border-radius: 4px; }
.mon-neck { width: 11%; height: 5.6%; margin: 0 auto; background: var(--frame); }
.mon-foot { width: 30%; height: 1.4%; min-height: 7px; margin: 0 auto; border-radius: 4px; background: var(--frame); }

.dv-ph { width: 21.5%; }
.ph-body {
  padding: 7px; border-radius: 26px; background: var(--frame);
  box-shadow: var(--shadow);
}
.ph-body img { border-radius: 20px; }
/* 스플래시 화면: 종이 한 장에 로고만 */
.ph-splash {
  display: grid; place-items: center; aspect-ratio: 780 / 1688;
  background: var(--frame);
}
.ph-splash .wordmark { width: 58%; height: 11%; }
.ph-splash::before {
  content: ""; position: absolute; inset: 7px; border-radius: 20px;
  background-color: var(--screen);
  background-image: linear-gradient(var(--screen-line) 1px, transparent 1px), linear-gradient(90deg, var(--screen-line) 1px, transparent 1px);
  background-size: 9px 9px, 9px 9px;
}
.ph-splash .wordmark { position: relative; background: var(--ink); }
.dv-a { left: 0.5%; top: 28%; transform: rotate(-3.5deg); }
.dv-b { right: 0; top: 20%; transform: rotate(3.5deg); }

/* ── 실 한 가닥 따라가기 ─────────────────────────── */
.thread-wrap { position: relative; margin-top: 48px; }
.thread-line { position: absolute; left: 0; top: 34px; width: 100%; height: 160px; color: var(--accent); overflow: visible; pointer-events: none; }
.thread-line .pencil { stroke-width: 2.4; opacity: 0.8; }
.tsteps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.tstep { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tstep:nth-child(even) { margin-top: 56px; }
.tnum { font-size: 36px; line-height: 1; color: var(--c); }
.tstep b { font-size: 13px; font-weight: 700; color: var(--sub); }
.tcard {
  position: relative; padding: 12px 14px; transform: rotate(-1.5deg);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl); box-shadow: var(--shadow-1);
  font-size: 15px; font-weight: 600; line-height: 1.35;
}
.tstep:nth-child(even) .tcard { transform: rotate(1.5deg); }
/* 실이 매듭지어지는 자리 */
.tcard::before {
  content: ""; position: absolute; left: 50%; top: -6px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--c); transform: translateX(-50%); box-shadow: 0 1px 2px rgba(35, 37, 43, 0.18);
}
.tstep small { font-size: 14px; color: var(--sub); }

/* ── 기능 카드: 아이콘 + 한 줄 ──────────────────── */
.fcards { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fcard {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start;
  padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1);
}
.fic {
  grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-panel); background: color-mix(in srgb, var(--c) 13%, var(--panel)); color: var(--c);
}
.fic .ic { width: 22px; height: 22px; }
.fcard h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; }
.fcard h3 a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.fcard p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--sub); }

/* ── 기능 카드: 눌러서 폰 화면 보기 / 오픈 예정 ──── */
.fcard { position: relative; }
/* 카드 전체를 덮는 투명 버튼(글은 스크린리더용). 카드 안에 또 테두리를 만들지 않는다 */
.fhit {
  position: absolute; inset: 0; z-index: 1;
  border: 0; background: none; padding: 0; cursor: pointer; border-radius: var(--r-card);
  font-size: 0; color: transparent;
}
.fcard:has(.fhit):hover { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); box-shadow: var(--shadow); }
.fcard:has(.fhit:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.fhit:focus-visible { outline: none; }
/* 누를 수 있는 카드에만 들어오는 꺾쇠 */
.fcard:has(.fhit)::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px;
  border-right: 2px solid var(--faint); border-top: 2px solid var(--faint);
  transform: translateY(-50%) rotate(45deg); opacity: 0; transition: opacity 0.15s, right 0.15s;
}
.fcard:has(.fhit):hover::after, .fcard:has(.fhit:focus-visible)::after { opacity: 1; right: 13px; }
.soon-tag {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-tick);
  background: var(--panel2); color: var(--sub); font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  vertical-align: 2px;
}
.fcard.soon .fic { opacity: 0.55; }
.fcard.soon p { color: var(--faint); }

/* ── 폰 화면 모달 ───────────────────────────────── */
.shotbox {
  width: min(420px, 92vw); max-height: 92vh; padding: 20px 20px 16px;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow);
  overflow: visible;
}
.shotbox::backdrop { background: rgba(20, 22, 28, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.shot-head { display: flex; align-items: flex-start; gap: 12px; }
.shot-head h2 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.shot-sub { margin: 4px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--sub); }
.shot-x {
  flex: none; margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: var(--r-ctl); background: none; color: var(--sub); cursor: pointer;
}
.shot-x:hover { background: var(--panel2); color: var(--ink); }
.shot-x svg { width: 19px; height: 19px; }
.shot-stage { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 14px; }
.shot-nav {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: none; color: var(--sub); cursor: pointer;
}
.shot-nav:hover { background: var(--panel2); color: var(--ink); }
.shot-nav svg { width: 20px; height: 20px; }
.shot-ph {
  padding: 7px; border-radius: 26px; background: var(--dev-frame); box-shadow: var(--shadow);
  line-height: 0;
}
.shot-ph img { display: block; width: auto; max-width: 100%; max-height: min(58vh, 520px); border-radius: 20px; }
.shot-foot { min-height: 1.6em; margin: 12px 0 0; text-align: center; font-size: 14px; }
@media (max-width: 480px) {
  .shotbox { padding: 16px 14px 12px; }
  .shot-nav { width: 30px; height: 30px; }
  .shot-ph img { max-height: 52vh; }
}

/* ── 반응형 ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .yhero { padding-block: 16px 40px; }
  .yhero-in { grid-template-columns: 1fr; gap: 8px; }
  .yarn-stage { width: min(440px, 100%); }
  .dvs { width: min(460px, 100%); }
  .mon-body { padding: 6px 6px 14px; border-radius: 10px; }
  .ph-body { padding: 5px; border-radius: 20px; }
  .ph-body img, .ph-splash::before { border-radius: 15px; }
  .ph-splash::before { inset: 5px; }
  .yarn-hint { font-size: 15px; top: 0; }
  .ytag { font-size: 14px; }
  .thread-line { display: none; }
  .tsteps { grid-template-columns: 1fr; gap: 20px; padding-left: 28px; }
  /* 좁은 화면: 바느질 선처럼 세로로 잇는다 */
  .tsteps::before { content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; border-left: 2px dashed var(--accent); opacity: 0.6; }
  .tstep:nth-child(even) { margin-top: 0; }
}
@media (max-width: 480px) {
  .fcards { grid-template-columns: 1fr; }
  .fcard { padding: 16px; }
}

/* ── 타임블럭 이야기: 계획 열 vs 실제 열 ─────────────── */
.tbstory-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.tb-anno { margin: 0 0 8px; font-size: 17px; font-weight: 700; display: inline-block; }
.tbstory h2 { margin: 0 0 12px; font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.tbstory > .wrap > div > p { margin: 0 0 16px; font-size: 17px; color: var(--sub); max-width: 28em; }
.tbdemo {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px;
  padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1);
}
.tbhead { padding-bottom: 8px; font-size: 12.5px; font-weight: 700; color: var(--sub); text-align: center; }
.tbrail { position: relative; height: 240px; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.tbrail span { position: absolute; right: 0; transform: translateY(-50%); }
.tbcol { position: relative; height: 240px; border-left: 1px solid var(--line2); }
.tbblk {
  --c: var(--accent);
  position: absolute; left: 6px; right: 6px; overflow: hidden; padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent); border-radius: var(--r-tick);
  background: color-mix(in srgb, var(--c) 13%, var(--panel));
  font-size: 12px; line-height: 1.3;
}
.tbblk b { margin-right: 4px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tbblk.done { --c: var(--c-habit); }
.tbblk.mark { padding: 1px 8px; font-size: 11.5px; }
@media (max-width: 860px) {
  .tbstory-in { grid-template-columns: 1fr; gap: 24px; }
}

/* ── 히어로 약속 한 줄 ── */
.hero-promo { margin: 18px 0 0; font-size: 18px; display: inline-block; }

/* ── AI 비서: 앱 데스크의 'loglog AI 메모' 종이 한 장 ── */
.aistory-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
/* .aistory-in > div > p(0,1,2)가 손글씨 크기·색을 덮지 않게 한 단계 올린다 */
.aistory-in > div > p.ai-anno { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--accent); display: inline-block; max-width: none; }
.aistory h2 { margin: 0 0 12px; font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; }
.aistory-in > div > p { margin: 0 0 16px; font-size: 17px; color: var(--sub); max-width: 28em; }
.aimemo {
  position: relative; margin: 0; padding: 30px 26px 14px;
  background: color-mix(in srgb, var(--hl) 86%, var(--panel)); box-shadow: var(--shadow);
  transform: rotate(1.2deg);
}
.aimemo .tape { top: -13px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
.aim-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; font-size: 12.5px; color: var(--sub); }
.aim-head .hand { font-size: 17px; line-height: 1.4; color: var(--ink); }
.aim-sec { padding: 10px 0 8px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.aim-head + .aim-sec { border-top: 0; }
.aim-top { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 2px; }
.aim-top b { font-size: 11.5px; font-weight: 600; color: var(--sub); }
.aim-top span { font-size: 13px; font-weight: 600; color: var(--accent); }
.aim-row { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; line-height: 30px; }
.aim-row .ring { flex: none; width: 15px; height: 15px; border: 1.6px solid color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 50%; }
.aim-row em { margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--sub); text-align: right; line-height: 1.35; }
.aim-row em.late { color: var(--warn, #d64545); }
.aim-row .t { flex: none; width: 42px; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
.aim-row .stamp { flex: none; font-size: 13px; font-weight: 700; line-height: 1.5; padding: 1px 8px; border-radius: var(--r-tick); background: var(--accent-soft); color: var(--accent); }
@media (max-width: 860px) {
  .aistory-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .aimemo { transform: none; }
}
@media (max-width: 480px) {
  .aimemo { padding-inline: 18px; }
  .aim-row { font-size: 14.5px; }
}