/* Phase 6 (#1): 我的韩国生活墙 */
.lw { max-width: 560px; margin: 0 auto; padding: 20px 16px 96px; display: grid; gap: 14px; }
.lw__head { display: grid; gap: 6px; }
.lw__title { margin: 0; font-size: 1.5rem; }
.lw__intro { margin: 0; color: #374151; line-height: 1.55; }
.lw__private { margin: 0; color: #6b7280; font-size: 0.86rem; }
.lw__local { margin: 0; padding: 10px 12px; border-radius: 12px; background: #fef9c3; color: #713f12; font-size: 0.9rem; line-height: 1.5; }
.lw__local a { color: #1d4ed8; font-weight: 600; }
.lw__status { margin: 0; color: #6b7280; }
.lw__status:empty { display: none; }
.lw__progress { margin: 0; color: #92400e; font-weight: 700; font-size: 0.95rem; }

/* Route (PO 2026-10-23): stops zig-zag left / right, joined by curvy lines (drawn in #lwLines). */
.lw-route { position: relative; }
.lw-lines { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.lw-line { fill: none; stroke: #cbd5e1; stroke-width: 3; stroke-dasharray: 7 7; stroke-linecap: round; }
.lw-line--on { stroke: #f59e0b; stroke-width: 4; stroke-dasharray: none; }
.lw-line__tip { fill: #f59e0b; }
.lw-stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; position: relative; }
.lw-part { justify-self: center; padding: 3px 12px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 0.78rem; font-weight: 700; position: relative; }
.lw-milestone { justify-self: center; padding: 8px 14px; border-radius: 14px; background: linear-gradient(135deg, #fde68a, #fbcfe8); font-weight: 700; position: relative; }
.lw-stop { width: 64%; position: relative; }
.lw-stop--l { justify-self: start; }
.lw-stop--r { justify-self: end; }
.lw-stop__card { appearance: none; width: 100%; padding: 0; border: 1px solid #e5e7eb; border-radius: 18px; background: #fff; font: inherit; color: #111827; cursor: pointer; text-align: left; overflow: hidden; display: grid; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); transition: transform 0.15s ease; }
.lw-stop__card:active { transform: scale(0.98); }
.lw-stop__photo { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: #f1f5f9; overflow: hidden; }
.lw-stop__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lw-stop__icon { font-size: 2.2rem; filter: grayscale(0.6); opacity: 0.6; }
.lw-stop__plus { font-size: 2.2rem; color: #94a3b8; line-height: 1; }
.lw-stop__n { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.9); color: #fff; font-size: 0.72rem; font-weight: 700; }
.lw-stop__body { display: grid; gap: 3px; padding: 9px 11px 11px; }
.lw-stop__title { font-size: 0.92rem; line-height: 1.3; overflow-wrap: anywhere; }
.lw-stop__feeling { font-size: 0.84rem; color: #334155; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lw-stop__feeling--draft { color: #94a3b8; }
.lw-stop__date { font-size: 0.74rem; color: #64748b; font-weight: 600; }
.lw-stop__todo { font-size: 0.8rem; color: #b45309; font-weight: 600; }
.lw-stop--lit .lw-stop__card { border-color: #fbbf24; box-shadow: 0 6px 18px rgba(245, 158, 11, 0.28); }
.lw-stop--lit .lw-stop__photo { background: #fde68a; }
.lw-stop--lit .lw-stop__icon { filter: none; opacity: 1; }
.lw-stop--lit .lw-stop__n { background: #f59e0b; }
.lw-stop--add .lw-stop__card { border-style: dashed; background: #fafaf9; }
.lw-stop--next .lw-stop__card { border: 2px dashed #f59e0b; animation: lw-glow 2.2s ease-in-out infinite; }
@keyframes lw-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.0); } 50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.18); } }
@media (prefers-reduced-motion: reduce) { .lw-stop--next .lw-stop__card { animation: none; } }
@media (min-width: 640px) { .lw-stop { width: 56%; } }
.lw-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 2000; }

/* photo framing (drag + zoom) */
.lw-crop { display: grid; gap: 6px; }
.lw-crop__frame { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #0f172a; touch-action: none; cursor: grab; }
.lw-crop__frame:active { cursor: grabbing; }
.lw-crop__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.lw-crop__zoom-row { display: flex; align-items: center; gap: 8px; }
.lw-crop__zoom { flex: 1; }
.lw-need { margin: 0; padding: 8px 10px; border-radius: 10px; background: #fffbeb; color: #92400e; font-size: 0.85rem; line-height: 1.45; }
.lw__share { justify-content: center; }

.lw-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lw-spacer { flex: 1; }
.lw-btn { appearance: none; border: 1px solid #d1d5db; background: #fff; color: #111827; border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.lw-btn--primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.lw-btn--ghost { border-color: transparent; background: transparent; color: #374151; }
.lw-btn--danger { border-color: #fecaca; color: #b91c1c; }
#lwImport { justify-self: start; }

.lw-dialog { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 32px); border: 0; border-radius: 20px; padding: 18px 16px; box-sizing: border-box; overflow-y: auto; }
.lw-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.lw-dialog[open] { display: grid; gap: 10px; }
.lw-dialog__title { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.lw-dialog__sub { margin: 6px 0 0; font-size: 0.85rem; color: #6b7280; }
.lw-dialog__foot { margin-top: 6px; }
.lw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lw-chip { appearance: none; border: 1px solid #e5e7eb; background: #f9fafb; border-radius: 999px; padding: 7px 11px; font: inherit; font-size: 0.86rem; display: inline-flex; gap: 6px; cursor: pointer; color: #111827; }
.lw-chip:disabled { opacity: 0.4; cursor: default; }
.lw-input { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; }
.lw-field { display: grid; gap: 4px; font-size: 0.88rem; color: #374151; }
.lw-field[hidden] { display: none; }
.lw-check { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; padding: 10px 12px; border-radius: 12px; background: #ecfdf5; }
.lw-check input { width: 20px; height: 20px; }
.lw-link { color: #1d4ed8; font-weight: 600; text-decoration: none; }
.lw-photo-box { display: grid; gap: 8px; }
.lw-photo { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; }
.lw-hint { margin: 0; color: #6b7280; font-size: 0.82rem; line-height: 1.5; }
.lw-toast { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); background: #111827; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 0.9rem; z-index: 1000; max-width: calc(100vw - 32px); }

/* entry cards (home + 我的) */
.lw-entry { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 1px solid #fde68a; color: #111827; text-decoration: none; }
.lw-entry__icon { font-size: 1.8rem; }
.lw-entry__text { display: grid; gap: 2px; }
.lw-entry__title { font-weight: 700; }
.lw-entry__sub { font-size: 0.85rem; color: #6b7280; }
.hv2-top .lw-entry { margin: 14px 16px 4px; }
.lw [hidden], .lw-dialog [hidden] { display: none !important; }
.lw-dialog { margin: auto; }
@media (max-width: 480px) { .lw-dialog { margin: auto auto 0; border-radius: 20px 20px 0 0; width: 100vw; max-width: 100vw; } }
.lw-add { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: #ecfdf5; border: 1px solid #a7f3d0; }
.lw-add__text { margin: 0; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }

/* ── PO 2026-10-23: dreamy fairy-tale background + denser, staggered wall ── */
body.lw-page {
  background-color: #fdf2f8;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, 0.95), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 9%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(2px 2px at 64% 34%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 58%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(2px 2px at 88% 72%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 6% 86%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(253, 186, 216, 0.55), transparent 70%),
    radial-gradient(ellipse 55% 45% at 95% 20%, rgba(196, 181, 253, 0.5), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(254, 215, 170, 0.55), transparent 70%),
    linear-gradient(180deg, #fde7f3 0%, #ede9fe 38%, #e0f2fe 70%, #fff7ed 100%);
  background-attachment: fixed;
}
body.lw-page::before,
body.lw-page::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80'%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='60' cy='52' rx='52' ry='22'/%3E%3Cellipse cx='96' cy='36' rx='40' ry='30'/%3E%3Cellipse cx='140' cy='50' rx='50' ry='24'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.7;
  filter: drop-shadow(0 6px 12px rgba(167, 139, 250, 0.18));
}
body.lw-page::before { width: 220px; height: 90px; top: 92px; left: -40px; animation: lw-drift 38s ease-in-out infinite alternate; }
body.lw-page::after { width: 170px; height: 70px; bottom: 120px; right: -30px; opacity: 0.6; animation: lw-drift 46s ease-in-out infinite alternate-reverse; }
@keyframes lw-drift { from { transform: translateX(0); } to { transform: translateX(60px); } }
@media (prefers-reduced-motion: reduce) { body.lw-page::before, body.lw-page::after { animation: none; } }
body.lw-page main.lw { position: relative; z-index: 1; }
.lw__title { background: linear-gradient(90deg, #db2777, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lw__intro { color: #4c1d95; }
.lw__private { color: #7e6aa8; }

/* cards: softer, storybook-like */
.lw-stop__card { border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 22px; background: rgba(255, 255, 255, 0.86); box-shadow: 0 8px 22px rgba(167, 139, 250, 0.22); backdrop-filter: blur(4px); }
.lw-stop__photo { background: linear-gradient(135deg, #fce7f3, #ede9fe); }
.lw-stop--lit .lw-stop__card { border-color: #fcd34d; box-shadow: 0 10px 26px rgba(251, 191, 36, 0.35), 0 0 0 3px rgba(253, 230, 138, 0.5); }
.lw-stop--lit .lw-stop__photo { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.lw-stop--add .lw-stop__card { background: rgba(255, 255, 255, 0.55); border: 2px dashed #c4b5fd; }
.lw-line { stroke: #c4b5fd; }
.lw-line--on { stroke: #f59e0b; }
.lw-part { background: rgba(255, 255, 255, 0.8); color: #7c3aed; box-shadow: 0 2px 8px rgba(167, 139, 250, 0.2); }
.lw-milestone { background: linear-gradient(135deg, #fde68a, #fbcfe8, #c4b5fd); box-shadow: 0 4px 14px rgba(244, 114, 182, 0.25); }
.lw__local { background: rgba(254, 249, 195, 0.85); }

/* denser: two staggered columns on phones (cards overlap in height, never in width) */
.lw-stops { gap: 14px; }
.lw-stop { width: 47%; }
.lw-stop__photo { aspect-ratio: 1 / 1; }
.lw-stop__body { padding: 7px 9px 9px; }
.lw-stop__title { font-size: 0.86rem; }
.lw-stop__feeling { font-size: 0.8rem; -webkit-line-clamp: 1; }
.lw-stop + .lw-stop { margin-top: calc(-24% - 20px); }

/* wide screens: a winding path over three lanes (left · middle · right · middle …) */
@media (min-width: 640px) {
  .lw { max-width: 680px; }
  .lw-stop { width: 31%; }
  .lw-stop--w0 { justify-self: start; }
  .lw-stop--w1, .lw-stop--w3 { justify-self: center; }
  .lw-stop--w2 { justify-self: end; }
  .lw-stop__photo { aspect-ratio: 4 / 3; }
  .lw-stop + .lw-stop { margin-top: calc(-11.6% - 26px); }
}
@media (min-width: 1024px) {
  .lw { max-width: 920px; }
  .lw-stop { width: 23%; }
  .lw-stop + .lw-stop { margin-top: calc(-8.6% - 26px); }
}

/* ── r3 (PO 2026-10-24): storybook night-and-dawn sky with a moon, twinkling stars and little animals ── */
body.lw-page {
  background-image:
    radial-gradient(ellipse 60% 40% at 85% 6%, rgba(253, 230, 138, 0.45), transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(253, 186, 216, 0.55), transparent 70%),
    radial-gradient(ellipse 55% 45% at 95% 30%, rgba(196, 181, 253, 0.55), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(254, 215, 170, 0.6), transparent 70%),
    linear-gradient(180deg, #c7b8ff 0%, #f5d0fe 28%, #fde7f3 52%, #e0f2fe 78%, #fff7ed 100%);
}
body.lw-page::before, body.lw-page::after { display: none; }
.lw-decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lw-decor svg { position: absolute; }
.lw-moon { width: 92px; height: 92px; top: 78px; right: 4%; filter: drop-shadow(0 0 18px rgba(253, 230, 138, 0.9)); animation: lw-bob 7s ease-in-out infinite; }
.lw-star { width: 14px; height: 14px; fill: #fff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95)); animation: lw-twinkle 3.2s ease-in-out infinite; }
.lw-star--1 { top: 96px; left: 8%; }
.lw-star--2 { top: 150px; right: 18%; width: 10px; height: 10px; animation-delay: 0.8s; }
.lw-star--3 { top: 34%; left: 3%; width: 18px; height: 18px; animation-delay: 1.4s; }
.lw-star--4 { top: 46%; right: 4%; animation-delay: 2s; fill: #fef3c7; }
.lw-star--5 { top: 22%; left: 22%; width: 9px; height: 9px; animation-delay: 0.4s; }
.lw-star--6 { top: 64%; left: 6%; width: 11px; height: 11px; animation-delay: 1.1s; fill: #fbcfe8; }
.lw-star--7 { top: 12%; left: 52%; width: 12px; height: 12px; animation-delay: 2.4s; }
.lw-bunny { width: 96px; height: 96px; bottom: 18px; left: 2%; animation: lw-hop 4.5s ease-in-out infinite; }
.lw-cat { width: 104px; height: 86px; bottom: 26px; right: 3%; animation: lw-bob 6s ease-in-out infinite; }
.lw-bird { width: 58px; height: 44px; top: 30%; right: 9%; animation: lw-fly 9s ease-in-out infinite; }
.lw-cloud { opacity: 0.85; filter: drop-shadow(0 6px 12px rgba(167, 139, 250, 0.2)); }
.lw-cloud--a { width: 210px; height: 84px; top: 70px; left: -50px; animation: lw-drift 40s ease-in-out infinite alternate; }
.lw-cloud--b { width: 160px; height: 64px; top: 58%; right: -40px; opacity: 0.7; animation: lw-drift 52s ease-in-out infinite alternate-reverse; }
@keyframes lw-twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.8) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }
@keyframes lw-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes lw-hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-14px); } 90% { transform: translateY(0); } }
@keyframes lw-fly { 0% { transform: translate(0, 0); } 50% { transform: translate(-40px, -16px); } 100% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .lw-decor svg { animation: none !important; } }
@media (max-width: 640px) {
  .lw-moon { width: 58px; height: 58px; top: 70px; right: 10px; }
  .lw-bunny { width: 64px; height: 64px; bottom: 74px; left: 4px; opacity: 0.85; }
  .lw-cat { width: 70px; height: 58px; bottom: 76px; right: 4px; opacity: 0.85; }
  .lw-bird { width: 40px; height: 30px; }
  .lw-star--3, .lw-star--6 { display: none; }
}
.lw__title { background: linear-gradient(90deg, #7c3aed, #db2777, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lw__hint { margin: 0; color: #7e6aa8; font-size: 0.8rem; }

/* big view */
.lw-zoom { position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 16px; background: rgba(46, 16, 101, 0.55); backdrop-filter: blur(6px); }
.lw-zoom[hidden] { display: none; }
.lw-zoom__card { position: relative; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; display: grid; gap: 6px; padding: 14px 14px 18px; border-radius: 26px; background: #fffaf5; box-shadow: 0 24px 60px rgba(46, 16, 101, 0.35), 0 0 0 4px rgba(253, 230, 138, 0.6); }
.lw-zoom__photo { display: grid; place-items: center; min-height: 200px; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #fce7f3, #ede9fe); }
.lw-zoom__photo img { width: 100%; max-height: 66vh; object-fit: contain; background: #1e1b4b; }
.lw-zoom__icon { font-size: 4rem; }
.lw-zoom__n { margin: 8px 0 0; color: #a16207; font-weight: 700; font-size: 0.82rem; }
.lw-zoom__title { margin: 0; font-size: 1.3rem; color: #4c1d95; }
.lw-zoom__note { margin: 0; font-size: 1rem; color: #334155; line-height: 1.6; white-space: pre-wrap; }
.lw-zoom__note:empty { display: none; }
.lw-zoom__date { margin: 0 0 6px; color: #64748b; font-size: 0.85rem; }
.lw-zoom__close { position: absolute; top: 20px; right: 20px; z-index: 1; appearance: none; border: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); font-size: 1rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
#lwZoomEdit { justify-self: start; }

/* wide screens: each wall is a 3×3 snake, all nine stops on one screen */
@media (min-width: 1024px) {
  .lw { max-width: 900px; gap: 10px; padding-top: 14px; }
  .lw__intro { font-size: 0.95rem; }
  .lw-stops { display: grid; grid-template-columns: repeat(3, minmax(0, 210px)); justify-content: center; column-gap: 64px; row-gap: 14px; }
  .lw-stops > li { grid-row: var(--lw-r, auto); }
  .lw-stops > .lw-part, .lw-stops > .lw-milestone { grid-column: 1 / -1; }
  .lw-stop { width: auto; grid-column: var(--lw-c, auto); justify-self: stretch; }
  .lw-stop + .lw-stop { margin-top: 0; }
  .lw-stop__photo { aspect-ratio: 2 / 1; }
  .lw__private, .lw__hint { display: inline; margin-right: 10px; }
  .lw-stop__feeling { -webkit-line-clamp: 1; }
}

/* AI picture per square (PO 2026-10-24) */
.lw-ai-badge { position: absolute; top: 8px; right: 8px; padding: 2px 7px; border-radius: 999px; background: rgba(37, 99, 235, 0.92); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; }
.lw-ai { margin-top: 14px; padding: 12px; border: 1px solid #e0e7ff; background: #f8faff; border-radius: 16px; display: grid; gap: 10px; }
.lw-ai__title { margin: 0; font-weight: 700; color: #1e3a8a; }
.lw-ai__seg { display: inline-flex; border: 1px solid #c7d2fe; border-radius: 999px; overflow: hidden; justify-self: start; }
.lw-ai__opt { appearance: none; border: 0; background: #fff; color: #374151; padding: 8px 14px; font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.lw-ai__opt.is-on { background: #2563eb; color: #fff; }
.lw-ai__thumb, .lw-ai__preview { width: 100%; max-height: 320px; object-fit: contain; border-radius: 12px; background: #eef2ff; }
.lw-ai__thumb { max-height: 160px; }
.lw-ai__panel { display: grid; gap: 8px; }
.lw-ai__styles { display: flex; flex-wrap: wrap; gap: 8px; }
.lw-ai__style { appearance: none; border: 1px solid #c7d2fe; background: #fff; color: #1e3a8a; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.lw-ai__style:hover, .lw-ai__style:focus-visible { background: #eef2ff; }
.lw-ai__left { margin: 0; font-size: 0.86rem; color: #1d4ed8; font-weight: 600; }
.lw-ai__msg { margin: 0; color: #374151; }
.lw-ai__msg--busy { color: #1d4ed8; }
.lw-ai__busy { display: grid; gap: 0.5rem; }
.lw-ai__pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.lw-ai__bar { height: 0.5rem; border-radius: 999px; background: #dbeafe; overflow: hidden; }
.lw-ai__bar-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: #2563eb; transition: width 0.25s linear; }