:root{--green:#174D43;--apricot:#F2BD95;--paper:#fdfdfb;--ink:#1E2420;--muted:#6E7268;--line:#E2DED3;--white:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;
  font-family:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  word-break:keep-all;overflow-wrap:anywhere}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--apricot);outline-offset:3px}
.i{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.bar{position:sticky;top:0;z-index:40;background:rgba(253,253,251,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar-in{max-width:1360px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:14px}
.logo{font:750 26px/1.1 "Arial Rounded MT Bold","Segoe UI",sans-serif;letter-spacing:-1.6px;color:#222;text-decoration:none}
.logo span{color:#2e5d46}
@media(max-width:560px){.where .other{display:none}}
.where{font-size:14px;color:var(--muted)}.where a{color:#2e5d46;text-decoration:none}
.wrap{max-width:1360px;margin:0 auto;padding:28px 24px 0}

/* 표지 */
.cover{position:relative;overflow:hidden;background:var(--white);color:var(--ink);border:1px solid #e1e7df;border-radius:32px;padding:56px 56px 48px;
  display:grid;grid-template-columns:1fr auto;gap:24px 40px;align-items:end}
.cover::after{content:none}
.dmark{position:absolute;right:48px;top:40px;width:84px;height:84px}
.js .dmark path:first-child{stroke-dasharray:120;animation:dk-draw 1s cubic-bezier(.6,0,.3,1) both}
.js .dmark path:nth-child(2){animation:dk-pop .35s cubic-bezier(.3,1.6,.5,1) .9s both;transform-origin:17px 11px}
@keyframes dk-draw{from{stroke-dashoffset:120}}@keyframes dk-pop{from{transform:scale(0)}}
.cover .eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 14px}
.cover h1{margin:0;color:var(--green);font-size:clamp(40px,5.4vw,76px);letter-spacing:-.04em;line-height:1.08}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid #e1e7df;background:#f1f5f1;color:#2e5d46;border-radius:999px;padding:4px 14px;font-size:14px;font-weight:700}
.cover p{margin:16px 0 0;color:var(--muted);font-size:16px;max-width:620px}
.stats{display:flex;gap:28px;margin:26px 0 0;padding:0;list-style:none}
.stats b{display:block;font-size:30px;letter-spacing:-.03em;color:var(--green)}
.stats span{font-size:13px;color:var(--muted)}
.save{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 26px;border:0;border-radius:999px;
  background:var(--apricot);color:var(--green);font-weight:800;font-size:16px;box-shadow:0 18px 40px -18px rgba(0,0,0,.5);transition:transform .2s}
.save:hover{transform:translateY(-2px)}
.save .i{width:20px;height:20px;stroke-width:1.8}
.save-note{grid-column:2;margin:-12px 0 0;font-size:12px;color:var(--muted);text-align:right}

/* 하루 줄 */
.day{margin:44px 0 0}
.dh{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 18px;padding:0 4px}
.dh h2{margin:0;font-size:30px;letter-spacing:-.03em;color:var(--green)}
.dh p{margin:0;color:var(--muted);font-size:15px}
.sum{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--green);background:#E6EFEB;border-radius:999px;padding:4px 12px}
.line{list-style:none;margin:0;padding:0;display:flex;align-items:stretch}
.stop{flex:1 1 0;min-width:0;display:flex}
.move{flex:0 0 78px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;color:var(--green);text-align:center}
.move::before{content:"";position:absolute;left:4px;right:4px;top:50%;border-top:1.5px dashed #2e5d46;opacity:.55;z-index:0;transform-origin:left}
.js .day .move::before{transform:scaleX(0);transition:transform .45s cubic-bezier(.6,0,.3,1) var(--d,0s)}
.js .day.on .move::before{transform:none}
.js .day .move b,.js .day .move small,.js .day .move .i{opacity:0;transition:opacity .3s ease calc(var(--d,0s) + .3s)}
.js .day.on .move b,.js .day.on .move small,.js .day.on .move .i{opacity:1}
.js .day .dot{transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1) var(--d,0s)}
.js .day.on .dot{transform:none}
.move .i,.move b,.move small{position:relative;z-index:1;background:var(--paper);padding:0 4px}
.move .i{width:22px;height:22px;margin-bottom:-2px}
.move b{font-size:14px;line-height:1.3}
.move small{font-size:11px;color:var(--muted);line-height:1.3}

/* 카드 */
.card{position:relative;flex:1;display:flex;flex-direction:column;background:var(--white);border-radius:22px;overflow:hidden;
  box-shadow:0 18px 40px -26px rgba(23,77,67,.45);border:1px solid #ECE8DE}
.dot{position:absolute;z-index:2;left:12px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--apricot);color:var(--green);
  display:grid;place-items:center;font-weight:800;font-size:14px}
.ph{margin:0;aspect-ratio:4/3;background:#E9E6DD}
.ph img{width:100%;height:100%;object-fit:cover}
.band{display:flex;align-items:center;justify-content:flex-end;gap:6px;height:54px;padding:0 16px;background:var(--green);color:var(--apricot);font-size:13px;font-weight:700}
.band .ki{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.bd{flex:1;display:flex;flex-direction:column;padding:16px 16px 18px}
.kind{font-size:12px;font-weight:700;color:var(--muted);margin:0 0 2px}
.card h3{margin:0 0 8px;font-size:20px;line-height:1.3;letter-spacing:-.02em}
.card.txt h3{font-size:22px;color:var(--green)}
.addr{display:flex;gap:5px;align-items:flex-start;margin:0 0 8px;font-size:13px;color:var(--muted)}
.addr .i{margin-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--green);background:#E6EFEB;border-radius:8px;padding:4px 9px;line-height:1.4}
.chip .i{width:14px;height:14px}
.nw{white-space:nowrap}
.chip{max-width:100%;overflow-wrap:anywhere}
.hatch{margin:0 0 12px;font-size:12px;line-height:1.5;color:#6B6458;background:repeating-linear-gradient(135deg,#F1EDE3 0 6px,#E6E0D2 6px 7px);border:1px dashed #CFC6B3;border-radius:8px;padding:6px 10px}
.hatch b{display:block;color:#4F493F;font-weight:700}
.credit{margin:0 0 10px;font-size:11px;color:var(--muted)}
.credit a{color:inherit;white-space:nowrap}
.go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;align-self:flex-start;color:var(--green);font-weight:700;font-size:14px;text-decoration:none;
  border-bottom:1px solid transparent}
.go:hover{border-bottom-color:var(--green)}
.go .i{width:15px;height:15px}

.how{margin:36px 0 0;padding:20px 24px;border:1px solid var(--line);border-radius:18px;background:#FAF9F5;font-size:14px;color:var(--muted)}
.how b{color:var(--ink)}
.credits{max-width:1360px;margin:0 auto;padding:36px 24px 70px;font-size:12px;color:var(--muted)}
.credits h3{font-size:14px;color:var(--ink);margin:18px 0 6px}
.credits .proto{font-size:14px;font-weight:700;color:var(--green);margin:0 0 6px}
.credits ul{margin:6px 0 0;padding-left:18px}
.credits a{color:inherit}

/* 움직임: 휴대폰에서 카드가 아래서 떠오름 */
.js .rise{opacity:0;transform:translateY(36px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rise.on{opacity:1;transform:none}

/* 세로 타임라인: 태블릿·휴대폰 */
@media (max-width:1100px){
  .line{max-width:760px}
  .line{flex-direction:column;padding-left:28px;position:relative}
  .line::before{content:"";position:absolute;left:11px;top:16px;bottom:16px;border-left:1px solid #B8C6BF}
  .stop{display:block}
  .dot{left:-29px;top:14px;width:24px;height:24px;font-size:12px;box-shadow:0 0 0 4px var(--paper)}
  .card{overflow:visible}
  .card>.ph,.card>.band{border-radius:22px 22px 0 0;overflow:hidden}
  .ph{aspect-ratio:16/10}
  .move{flex:none;flex-direction:row;justify-content:flex-start;gap:8px;padding:14px 0 14px 4px;text-align:left}
  .move::before{display:none}
  .js .day .line::before{transform:scaleY(0);transform-origin:top;transition:transform 1.6s cubic-bezier(.4,0,.2,1)}
  .js .day.on .line::before{transform:none}
  .move .i,.move b,.move small{background:none;padding:0}
  .move .i{margin:0}
}
@media (max-width:760px){
  .wrap{padding:18px 16px 0}
  .cover{grid-template-columns:1fr;padding:34px 24px 28px;border-radius:26px}
  .dmark{position:static;width:46px;height:46px;margin:0 0 10px}
  .cover::after{width:260px;height:260px;right:-110px;top:-110px}
  .save{width:100%;justify-content:center}
  .save-note{grid-column:1;text-align:left;margin:-14px 0 0}
  .stats{gap:20px}
  .stats b{font-size:24px}
  .dh h2{font-size:26px}
  .sum{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none}
  .js .day *,.js .day .line::before,.js .day .move::before{transform:none!important;opacity:1!important;transition:none!important}
  .js .dmark *{animation:none!important}
  .save{transition:none}
}