/* B · 스크랩북 — 이 안 전용 외형. 다른 안과 공유하지 않는다. (색·크기는 원시안에서 추정) */
:root {
  --paper: #f3ecdd;
  --paper-2: #faf6ec;
  --grid: rgba(150, 128, 96, .13);
  --ink: #2f2a24;
  --ink-2: #5c554b;
  --green: #4e6b3b;
  --green-d: #3f5a2f;
  --orange: #c35a1c;      /* 원시안 주황(#e9742b 추정)은 흰 글씨 대비가 부족해 어둡게 조정 */
  --orange-l: #e9742b;
  --mustard: #e8c24a;
  --shadow: 0 1px 2px rgba(60, 40, 20, .18), 0 8px 22px rgba(60, 40, 20, .14);
  --sans: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --pen: "Nanum Pen Script", cursive;
  --brush: "Nanum Brush Script", cursive;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 90px; }
body {
  margin: 0; color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55;
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .24 0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 160px 160px, 26px 26px, 26px 26px;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
.hand { font-family: var(--pen); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid #1f5fbf; outline-offset: 3px; }

/* ---------- 헤더 ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(243, 236, 221, .94); backdrop-filter: blur(4px); border-bottom: 1px solid rgba(120, 100, 70, .14); }
.top-in { max-width: 1360px; margin: 0 auto; height: 80px; padding: 0 44px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.brand b { font-weight: 800; }
.brand-leaf { width: 26px; height: 44px; transform: rotate(28deg); }
.nav { display: flex; gap: 56px; }
.nav a { text-decoration: none; font-size: 18px; font-weight: 600; padding: 6px 2px; position: relative; color: var(--ink-2); }
.nav a[aria-current] { color: var(--ink); }
.nav a[aria-current]::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -4px; height: 3px; border-radius: 3px; background: var(--green); }
.top-cta { justify-self: end; }
.menu-btn, .sheet, .tabbar { display: none; }

.pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 16px; padding: 10px 20px; }
.pill svg { width: 20px; height: 20px; }
.pill-green { background: var(--green); color: #fff; box-shadow: 0 2px 0 var(--green-d); }
.pill-green:hover { background: var(--green-d); }
.pill.big { font-size: 20px; padding: 16px 30px; gap: 10px; }
.pill.big svg { width: 24px; height: 24px; }

/* ---------- 첫 화면 ---------- */
.hero { position: relative; max-width: 1360px; margin: 0 auto; height: 560px; padding: 0 44px; }
.hero-text { position: absolute; left: 44px; top: 46px; width: 440px; z-index: 2; }
.title { margin: 0; font-family: var(--brush); font-weight: 400; font-size: 168px; line-height: .9; letter-spacing: -.01em; display: flex; align-items: flex-end; gap: 6px; }
.title-word { position: relative; z-index: 0; }
.swash { position: absolute; left: 16%; right: 4%; bottom: 8px; height: 34px; z-index: -1; width: 80%; }
.title-leaf { width: 46px; height: 92px; transform: rotate(24deg); margin-bottom: 30px; }
.sub { font-size: 31px; line-height: 1.35; margin: 18px 0 30px; color: #3a332a; }
.cta-row { display: flex; align-items: center; gap: 26px; }
.note { font-size: 22px; line-height: 1.2; margin: 0; transform: rotate(-7deg); color: #4a4237; }
.smile { width: 26px; height: 26px; vertical-align: -6px; }

.collage { position: absolute; left: 470px; top: 0; width: 520px; height: 540px; }
.pola { display: block; padding: 0; border: 0; background: #fffdf8; cursor: zoom-in; box-shadow: var(--shadow); text-align: center; position: relative; }
.pola img { width: 100%; height: auto; }
.pola-cap { display: block; color: #3a332a; line-height: 1.1; }
.pola-main { position: absolute; left: 0; top: 48px; width: 410px; padding: 14px 14px 0; transform: rotate(-4deg); z-index: 2; }
.pola-main .pola-cap { font-size: 30px; padding: 12px 0 14px; }
.pola-s1 { position: absolute; left: 372px; top: 0; width: 214px; padding: 10px 10px 0; transform: rotate(4deg); z-index: 3; }
.pola-s1 .pola-cap { font-size: 23px; padding: 8px 0 10px; }
.pola-s2 { position: absolute; left: 392px; top: 262px; width: 172px; padding: 10px 10px 0; transform: rotate(6deg); z-index: 3; }
.pola-s2 .pola-cap { font-size: 23px; padding: 6px 0 9px; }
.pola:hover { z-index: 5; }
.tape { position: absolute; top: -14px; left: 50%; width: 92px; height: 28px; transform: translateX(-50%) rotate(-5deg); opacity: .82; clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 100%, 4% 96%, 0 70%, 3% 40%); }
.t-orange { background: #e98a4a; left: 18%; }
.t-mint { background: #b9d4b4; }
.t-cream { background: #efdcae; }
.deco { position: absolute; pointer-events: none; z-index: 4; }
.leaf-a { width: 70px; height: 140px; left: -26px; top: 330px; transform: rotate(-38deg); }
.leaf-b { width: 52px; height: 104px; left: 360px; top: 400px; transform: rotate(32deg); }

.memo { position: absolute; right: 44px; top: 56px; width: 300px; background: #fbf8f0; padding: 30px 26px 22px; box-shadow: var(--shadow); transform: rotate(2deg); z-index: 3;
  background-image: linear-gradient(transparent 31px, rgba(140, 120, 90, .16) 32px); background-size: 100% 32px; background-position: 0 66px; }
.pin { position: absolute; right: 52px; top: -12px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9d7a, #d2502f 55%, #9b3214); box-shadow: 2px 4px 4px rgba(0, 0, 0, .25); }
.pin::after { content: ""; position: absolute; left: 11px; top: 22px; width: 3px; height: 10px; background: #8d8d8d; transform: rotate(14deg); }
.memo-h { margin: 0 0 12px; position: relative; display: inline-block; }
.memo-label { display: inline-block; font-family: var(--pen); font-weight: 400; font-size: 34px; line-height: 1; padding: 6px 16px 4px; border: 2px solid var(--ink); border-radius: 6px 10px 6px 12px; background: #f7e6c0; transform: rotate(-3deg); }
.spark { position: absolute; right: -30px; top: -14px; width: 26px; height: 26px; background:
  linear-gradient(var(--orange-l), var(--orange-l)) 4px 12px / 9px 3px no-repeat,
  linear-gradient(var(--orange-l), var(--orange-l)) 12px 0 / 3px 9px no-repeat,
  linear-gradient(var(--orange-l), var(--orange-l)) 16px 16px / 9px 3px no-repeat; transform: rotate(-20deg); }
.memo-list { list-style: none; margin: 0; padding: 0; }
.memo-list button { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; background: none; border: 0; padding: 4px 0; height: 32px; font-size: 15.5px; font-weight: 600; cursor: pointer; text-align: left; }
.memo-list button span::before { content: "•"; margin-right: 8px; color: var(--orange-l); }
.memo-list button:hover span { text-decoration: underline; }
.memo-list time { font-size: 14px; color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.memo-more { display: block; text-align: right; font-size: 14.5px; font-weight: 700; text-decoration: none; margin-top: 12px; }
.memo-more:hover { text-decoration: underline; }
.arrow-note { position: absolute; right: 120px; top: 360px; font-size: 27px; margin: 0; transform: rotate(-4deg); display: flex; flex-direction: column; align-items: flex-start; }
.arrow-note svg { width: 90px; height: 60px; margin-left: 50px; transform: rotate(60deg); }

.torn { position: relative; height: 90px; margin-top: -78px; z-index: 0; }
.torn svg { width: 100%; height: 100%; display: block; }

/* ---------- 사진 구간 ---------- */
.band { position: relative; z-index: 1; max-width: 1360px; margin: -10px auto 0; padding: 0 44px 40px; display: grid; grid-template-columns: 390px 1fr; gap: 26px; align-items: start; }
.card { background: var(--paper-2); border-radius: 8px; box-shadow: 0 1px 2px rgba(60, 40, 20, .12), 0 6px 18px rgba(60, 40, 20, .08); padding: 26px 28px 28px; }
.card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.card-h h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.ico { width: 28px; height: 28px; color: var(--orange-l); flex: none; }
.bubble { margin-left: auto; background: var(--orange-l); color: #2b1608; font-family: var(--pen); font-size: 22px; line-height: 1; padding: 7px 14px 6px; border-radius: 16px 16px 16px 4px; transform: rotate(-3deg); }
.recent-body { display: grid; grid-template-columns: 1fr 140px; gap: 14px; align-items: start; }
.datebox { margin: 0 0 14px; border-left: 4px solid var(--orange-l); padding: 2px 0 2px 14px; font-size: 17px; color: var(--ink-2); }
.datebox b { font-size: 32px; color: var(--ink); letter-spacing: -.02em; }
.recent-title { margin: 0 0 6px; font-size: 26px; font-weight: 800; }
.recent-desc { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.pola-mini { padding: 8px 8px 22px; transform: rotate(5deg); margin-top: 8px; }
.btn-orange { margin-top: 22px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--orange); color: #fff; border: 0; border-radius: 10px; padding: 14px; font-size: 18px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 0 #8f3f10; }
.btn-orange svg { width: 22px; height: 22px; color: #fff; }
.btn-orange:hover { background: #a94b14; }

.photos .count { font-size: 15px; color: var(--ink-2); font-weight: 600; margin-left: 6px; }
.more { margin-left: auto; background: none; border: 0; font-weight: 700; font-size: 15px; cursor: pointer; padding: 6px 2px; }
.more:hover { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 22px; }
.chip { border: 0; cursor: pointer; font-size: 14.5px; font-weight: 600; padding: 7px 14px 6px; color: var(--ink);
  clip-path: polygon(2% 0, 98% 6%, 100% 50%, 97% 100%, 3% 94%, 0 48%); }
.chip small { font-size: 12.5px; color: var(--ink-2); font-weight: 600; margin-left: 2px; }
.chip.c0 { background: #f1dcae; } .chip.c1 { background: #d5e2c5; } .chip.c2 { background: #f3cfb4; } .chip.c3 { background: #e3dccd; }
.chip[aria-pressed="true"] { background: var(--green); color: #fff; }
.chip[aria-pressed="true"] small { color: #e6eedd; }
.pola-grid { list-style: none; margin: 0; padding: 4px 6px 6px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 26px; align-items: start; }
.pola-grid li { transform: rotate(var(--r)); }
.pola-grid .pola { width: 100%; padding: 10px 10px 0; }
.pola-grid .pola img { width: 100%; height: auto; }
.pola-grid .pola-cap { font-size: 25px; padding: 10px 2px 12px; }
.pola-grid .pola-cap small { font-size: 21px; color: var(--ink-2); }

/* ---------- 모임 기록 ---------- */
.events { max-width: 1360px; margin: 0 auto; padding: 10px 44px 60px; }
.events .card-h .count { margin-left: 6px; color: var(--ink-2); font-weight: 600; font-size: 15px; }
.ev-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 26px; }
.ev-list li { display: grid; grid-template-columns: 74px auto 1fr auto; gap: 16px; align-items: center; background: var(--paper-2); border-radius: 8px; padding: 12px 16px; box-shadow: 0 1px 2px rgba(60, 40, 20, .1); }
.ev-date { font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ev-date small { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ev-thumb { background: #fffdf8; padding: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.ev-thumb img { height: 64px; width: auto; }
.ev-text b { display: block; font-size: 17px; }
.ev-text span { font-size: 14px; color: var(--ink-2); }
.ev-go { background: none; border: 1.5px solid var(--green); color: var(--green-d); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 14px; cursor: pointer; }
.ev-go:hover { background: var(--green); color: #fff; }

.foot { position: relative; background: #7f9663; color: #fff; text-align: center; padding: 10px 20px 34px; font-size: 15px; font-weight: 600; }
.torn-top { position: absolute; left: 0; right: 0; top: -40px; height: 60px; margin: 0; }
.foot p { margin: 0; position: relative; }

/* ---------- 확대 보기 (공통 로직, B 외형) ---------- */
.lb { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; overflow: hidden; }
.lb::backdrop { background: rgba(38, 30, 18, .86); }
.lb[open] { display: grid; place-items: center; }
.lb-frame { background: #fffdf8; padding: 16px 16px 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); transform: rotate(-.6deg); max-width: min(92vw, 1100px); }
.lb-fig { margin: 0; }
.lb-img { max-height: calc(100vh - 190px); max-width: calc(92vw - 32px); width: auto; height: auto; margin: 0 auto; }
.lb-cap { font-family: var(--pen); font-size: 30px; text-align: center; margin-top: 8px; line-height: 1.1; }
.lb-meta { margin: 2px 0 2px; text-align: center; color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.lb-btn { position: fixed; width: 54px; height: 54px; border-radius: 50%; border: 0; background: rgba(255, 253, 248, .92); color: var(--ink); font-size: 34px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lb-close { right: 24px; top: 24px; font-size: 30px; }

/* ---------- 태블릿 ---------- */
@media (max-width: 1240px) {
  .hero { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 30px; padding-bottom: 80px; }
  .hero-text, .collage, .memo, .arrow-note { position: relative; left: auto; right: auto; top: auto; }
  .collage { height: 470px; width: 100%; }
  .memo { grid-column: 1; }
  .arrow-note { display: none; }
  .band { grid-template-columns: 1fr; }
  .pola-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 모바일 (원시안 390px 화면 기준) ---------- */
@media (max-width: 720px) {
  html { scroll-padding-top: 64px; }
  body { padding-bottom: 76px; background-size: 160px 160px, 22px 22px, 22px 22px; }
  .top-in { height: 58px; padding: 0 16px; grid-template-columns: 1fr auto; }
  .brand { font-size: 17px; gap: 6px; }
  .brand-leaf { width: 20px; height: 34px; }
  .nav, .top-cta { display: none; }
  .menu-btn { display: grid; gap: 5px; width: 44px; height: 44px; place-content: center; background: none; border: 0; cursor: pointer; }
  .menu-btn span { display: block; width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; }
  .sheet:not([hidden]) { display: grid; background: var(--paper-2); border-top: 1px solid rgba(120, 100, 70, .14); box-shadow: 0 8px 18px rgba(60, 40, 20, .12); }
  .sheet a { padding: 14px 20px; font-size: 17px; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(120, 100, 70, .1); }

  .hero { display: block; padding: 22px 16px 70px; }
  .hero-text { width: auto; }
  .title { font-size: 96px; }
  .title-leaf { width: 30px; height: 60px; margin-bottom: 18px; }
  .swash { bottom: 4px; height: 22px; }
  .sub { font-size: 23px; margin: 10px 0 18px; }
  .pill.big { font-size: 17px; padding: 12px 22px; }
  .note { display: none; }
  .collage { display: none; }
  .memo { width: auto; margin: 30px 6px 0 2px; transform: rotate(-1.5deg); padding: 24px 20px 16px; }
  .pin { right: 30px; }
  .memo-label { font-size: 28px; }

  .torn { height: 60px; margin-top: -54px; }
  .band { padding: 0 12px 24px; gap: 18px; margin-top: 0; }
  .card { padding: 20px 16px 20px; }
  .card-h h2 { font-size: 21px; }
  .recent-body { grid-template-columns: 1fr 124px; }
  .datebox b { font-size: 28px; }
  .recent-title { font-size: 22px; }
  .recent-desc { font-size: 14.5px; }
  .btn-orange { font-size: 16.5px; padding: 13px; }
  .photos .card-h { flex-wrap: wrap; row-gap: 2px; }
  .more { font-size: 14px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: -4px -16px 18px; padding: 2px 16px 6px; scrollbar-width: none; }
  .chip { flex: none; }
  .pola-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; padding: 2px; }
  .pola-grid li { transform: rotate(calc(var(--r) * .55)); }
  .pola-grid .pola { padding: 7px 7px 0; }
  .pola-grid .pola-cap { font-size: 21px; padding: 7px 0 9px; }
  .pola-grid .pola-cap small { font-size: 18px; }

  .events { padding: 6px 12px 40px; }
  .ev-list { grid-template-columns: 1fr; gap: 10px; }
  .ev-list li { grid-template-columns: 52px auto 1fr; gap: 12px; padding: 10px 12px; }
  .ev-date { font-size: 16px; }
  .ev-thumb img { height: 56px; }
  .ev-go { grid-column: 2 / -1; justify-self: start; padding: 5px 12px; font-size: 13.5px; }
  .ev-text b { font-size: 16px; }
  .ev-text span { font-size: 13px; }

  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fffdf8; border-top: 1px solid rgba(120, 100, 70, .2); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { display: grid; justify-items: center; gap: 2px; font-size: 12px; font-weight: 600; text-decoration: none; color: var(--ink-2); padding: 4px 0; }
  .tabbar svg { width: 24px; height: 24px; }
  .tabbar a[aria-current] { color: var(--green); }
  .lb-btn { width: 44px; height: 44px; font-size: 28px; }
  .lb-prev { left: 8px; } .lb-next { right: 8px; } .lb-close { right: 10px; top: 10px; }
  .lb-frame { padding: 8px 8px 6px; }
  .lb-img { max-width: calc(100vw - 32px); max-height: calc(100vh - 170px); }
  .lb-cap { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.band > *, .hero > * { min-width: 0; }
.foot { margin-top: 40px; }
@media (max-width: 720px) {
  .ev-date small { font-size: 11px; letter-spacing: -.03em; }
  .ev-list li { grid-template-columns: 58px auto 1fr; }
}
/* 모바일 첫 화면 압축: 844px 안에 최근 모임 사진이 보이도록 */
@media (max-width: 720px) {
  .hero { padding: 14px 16px 44px; }
  .title { font-size: 72px; }
  .title-leaf { width: 24px; height: 48px; margin-bottom: 12px; }
  .swash { height: 16px; bottom: 2px; }
  .sub { font-size: 19px; line-height: 1.25; margin: 4px 0 12px; }
  .sub br { display: none; }
  .pill.big { font-size: 16px; padding: 10px 18px; }
  .memo { margin: 18px 4px 0 2px; padding: 14px 16px 8px; background-position: 0 50px; background-size: 100% 28px; }
  .memo-h { margin-bottom: 4px; }
  .memo-label { font-size: 22px; padding: 4px 12px 2px; }
  .spark { right: -24px; top: -10px; transform: rotate(-20deg) scale(.8); }
  .pin { width: 20px; height: 20px; top: -9px; }
  .memo-list button { height: 28px; font-size: 14.5px; padding: 2px 0; }
  .memo-more { margin-top: 2px; font-size: 13.5px; }
  .torn { height: 40px; margin-top: -36px; }
  .card.recent { padding-top: 16px; }
  .recent .card-h { margin-bottom: 10px; }
  .recent-body { grid-template-columns: 1fr 172px; gap: 10px; }
  .datebox { margin-bottom: 8px; }
  .datebox b { font-size: 26px; }
  .pola-mini { padding: 7px 7px 18px; margin-top: 0; transform: rotate(3deg); }
  .btn-orange { margin-top: 14px; }
}

/* ===== 수정본: 귤색 관계, 찢긴 종이, 가장자리 잎, 모바일 순서 ===== */
:root { --orange: #e8691f; --orange-l: #f07a2e; }
.ico { color: var(--orange-l); }
.bubble { background: #f08a3c; color: #2b1608; }
.btn-orange { background: var(--orange); font-size: 19px; box-shadow: 0 2px 0 #b9500f; }
.btn-orange:hover { background: #d55d17; }
.chip.c2 { background: #f9cfa8; }
.t-orange { background: #f39a55; }
.torn { height: 96px; margin-top: -84px; }
.torn svg path:first-child { filter: drop-shadow(0 -1px 0 rgba(120, 100, 70, .18)); }
.torn-top { top: -44px; height: 64px; }
.sprigs { position: absolute; pointer-events: none; z-index: 1; }
.sprigs svg { position: absolute; }
.lf { width: 54px; height: 108px; }
.fl { width: 34px; height: 34px; }
.s-l { left: -6px; top: 380px; width: 150px; height: 190px; }
.s-l .l1 { left: 0; top: 30px; transform: rotate(-28deg); }
.s-l .l2 { left: 40px; top: 50px; transform: rotate(12deg); width: 60px; height: 92px; }
.s-l .l3 { left: 84px; top: 84px; transform: rotate(48deg); width: 40px; height: 80px; }
.s-l .f1 { left: 30px; top: 28px; }
.s-r { right: 4px; top: 430px; width: 200px; height: 150px; }
.s-r .l1 { right: 0; top: 0; transform: rotate(-18deg); width: 64px; height: 100px; }
.s-r .l2 { right: 50px; top: 24px; transform: rotate(-58deg); }
.s-r .l3 { right: 120px; top: 50px; transform: rotate(-80deg); width: 50px; height: 80px; }
.s-r .f1 { right: 30px; top: 8px; }
.s-r .f2 { right: 96px; top: 40px; width: 26px; height: 26px; }

@media (max-width: 720px) {
  /* 원시안 모바일 순서: 첫 화면 → 최근 모임 → 날짜·작은 사진 목록 → 사진 */
  main { display: flex; flex-direction: column; }
  .band { display: contents; }
  .hero { order: 1; } .torn { order: 2; }
  .card.recent { order: 3; margin: 0 12px; }
  .events { order: 4; padding: 18px 12px 10px; }
  .card.photos { order: 5; margin: 18px 12px 24px; }
  .events .card-h { margin-bottom: 8px; }
  .ev-list { gap: 0; background: var(--paper-2); border-radius: 8px; box-shadow: 0 1px 2px rgba(60, 40, 20, .12); padding: 2px 12px; }
  .ev-list li { background: none; box-shadow: none; border-radius: 0; border-bottom: 1px dashed rgba(120, 100, 70, .25); padding: 12px 0; grid-template-columns: 46px 96px 1fr; gap: 12px; align-items: start; }
  .ev-list li:last-child { border-bottom: 0; }
  .ev-date { font-size: 15px; padding-top: 2px; }
  .ev-date small { font-size: 10.5px; }
  .ev-thumb { padding: 0; box-shadow: none; border-radius: 4px; overflow: hidden; background: #e9e1d2; width: 96px; height: 62px; display: grid; place-items: center; }
  .ev-thumb img { height: 62px; width: auto; max-width: none; }
  .ev-text b { font-size: 15.5px; }
  .ev-text span { display: block; font-size: 12.5px; }
  .ev-go { grid-column: 3; border: 0; padding: 0; color: var(--orange); font-size: 13.5px; margin-top: -4px; }
  .ev-go:hover { background: none; color: var(--orange); text-decoration: underline; }
  .btn-orange { font-size: 18.7px; }
  /* 가장자리 잎: 제목 오른쪽과 메모지 모서리 */
  .s-l { left: auto; right: -8px; top: 64px; width: 110px; height: 150px; transform: scale(.8); transform-origin: top right; }
  .s-r { right: auto; left: -14px; top: 300px; transform: scale(.7); transform-origin: top left; width: 120px; }
  .s-r .l2, .s-r .f2 { display: none; }
  .torn { height: 50px; margin-top: -40px; }
}

/* ===== 1000px 전후(태블릿) 실제 폭에 맞춘 콜라주 배치 ===== */
@media (max-width: 1240px) and (min-width: 721px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; padding-bottom: 90px; }
  .hero-text { width: auto; }
  .title { font-size: clamp(110px, 13vw, 150px); }
  .collage { width: 100%; height: auto; aspect-ratio: 1 / .92; grid-row: 1 / span 2; grid-column: 2; }
  .pola-main { left: 0; top: 9%; width: 70%; }
  .pola-s1 { left: 57%; top: 0; width: 41%; }
  .pola-s2 { left: 66%; top: 50%; width: 31%; }
  .pola-main .pola-cap { font-size: 26px; }
  .pola-s1 .pola-cap, .pola-s2 .pola-cap { font-size: 20px; }
  .leaf-a { left: 0; top: 62%; }
  .leaf-b { left: 58%; top: 74%; }
  .memo { grid-column: 1; grid-row: 2; width: auto; max-width: 360px; margin-top: 10px; }
  .s-l { top: auto; bottom: 30px; left: 0; }
  .s-r { top: auto; bottom: 20px; right: 0; }
  .band { grid-template-columns: minmax(0, 1fr); }
  .events .ev-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .s-l { right: 0; top: 70px; width: 96px; height: 130px; transform: scale(.72); }
  .s-l .l1 { left: 30px; } .s-l .l3 { left: 70px; }
  .s-r { left: 0; }
}
@media (max-width: 1240px) and (min-width: 721px) { .s-l { left: 26px; } .s-r { right: 30px; } }
@media (max-width: 720px) { .s-l { right: 22px; } .s-r { left: 26px; } }
@media (max-width: 720px) { .s-r .l3 { display: none; } }
@media (max-width: 720px) {
  .s-l { top: 6px; transform: scale(.6); }
  .ev-list li { grid-template-columns: 44px 92px minmax(0, 1fr) auto; align-items: center; padding: 10px 0; }
  .ev-thumb { width: 92px; height: 60px; } .ev-thumb img { height: 60px; }
  .ev-go { grid-column: 4; margin: 0; font-size: 13px; white-space: nowrap; }
  .ev-text span { font-size: 12px; }
}
.ev-long { font-style: normal; }
@media (max-width: 720px) {
  .ev-long { display: none; }
  .s-l { top: -2px; right: 18px; transform: scale(.5); }
}