🇳🇿 heldbygrace · 교민 치트키
블로그로 끌어들이는 4대 치트키

오클랜드 교민이 매주·매일 들어오게 만드는 콘텐츠 허브입니다. 아래 네 가지를 블로그·단톡·코포에 나눠 공유하세요.
① "날로 드세요!" — 오클랜드 치트키 대시보드 원본

스크린샷만 보면 "어디서 받아요?" 댓글이 달립니다. 메모장에 아래 코드 전체 복사 → 저장할 때 이름을 dash.html 로 두면 PC·폰 브라우저에서 바로 앱처럼 씁니다. (인터넷은 날씨·환율 등 일부만 필요)
라이브 대시보드 열기 ↗ 홈 · 날씨 위젯
dash.html 원본 (253,722 bytes)
<!DOCTYPE html>
<html lang="ko" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>마이 대시보드 · Auckland NZ</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script>
        /** 테마 한 방 교체: blue | green | purple (Vue neonTheme 과 동기) */
        window.HBG_DASH_NEON_THEMES = {
            blue: { hex: '#22d3ee', rgb: '34, 211, 238', light: '#67e8f9' },
            green: { hex: '#4ade80', rgb: '74, 222, 128', light: '#86efac' },
            purple: { hex: '#a78bfa', rgb: '167, 139, 250', light: '#c4b5fd' },
        };
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        surface: '#0b0f19',
                        neon: 'var(--neon)',
                    },
                    boxShadow: {
                        neon: '0 0 28px rgba(var(--neon-rgb), 0.4)',
                        'neon-sm': '0 0 14px rgba(var(--neon-rgb), 0.3)',
                    },
                },
            },
        };
    </script>
    <style>
        :root {
            --neon: #22d3ee;
            --neon-rgb: 34, 211, 238;
            --neon-light: #67e8f9;
        }
        html, body { background: #0b0f19; color: #e2e8f0; min-height: 100%; margin: 0; }
        .glass {
            background: rgba(15, 23, 42, 0.55);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(var(--neon-rgb), 0.14);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        }
        .glass-strong {
            background: linear-gradient(160deg, rgba(15, 23, 42, 0.92) 0%, rgba(11, 15, 25, 0.96) 100%);
            border: 1px solid rgba(var(--neon-rgb), 0.22);
        }
        .neon-title { color: var(--neon-light); text-shadow: 0 0 24px rgba(var(--neon-rgb), 0.55); }
        .spotlight {
            background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(var(--neon-rgb), 0.18) 0%, transparent 55%);
        }
        .dash-graph-hero {
            position: relative;
            overflow: hidden;
            border-radius: 1.25rem;
            padding: 1rem 1rem 1.15rem;
            border: 1px solid rgba(var(--neon-rgb), 0.28);
            background: linear-gradient(155deg, rgba(6, 10, 22, 0.96) 0%, rgba(12, 20, 38, 0.88) 45%, rgba(8, 14, 28, 0.94) 100%);
            box-shadow: 0 0 80px rgba(var(--neon-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.07);
            min-height: min(54vh, 440px);
        }
        .dash-graph-bg {
            background:
                radial-gradient(circle at 15% 20%, rgba(var(--neon-rgb), 0.14) 0%, transparent 42%),
                radial-gradient(circle at 88% 75%, rgba(167, 139, 250, 0.12) 0%, transparent 38%);
            pointer-events: none;
        }
        .dash-graph-bg::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(var(--neon-rgb), 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(var(--neon-rgb), 0.04) 1px, transparent 1px);
            background-size: 28px 28px;
            mask-image: linear-gradient(180deg, #000 0%, transparent 95%);
            animation: dash-grid-pan 24s linear infinite;
        }
        @keyframes dash-grid-pan {
            from { transform: translateY(0); }
            to { transform: translateY(28px); }
        }
        .hero-chart-panel {
            background: rgba(2, 6, 23, 0.55);
            border: 1px solid rgba(var(--neon-rgb), 0.18);
            border-radius: 1rem;
            box-shadow: inset 0 0 40px rgba(var(--neon-rgb), 0.04);
        }
        .hero-line-main {
            fill: none;
            stroke: var(--neon-light);
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            filter: drop-shadow(0 0 10px rgba(var(--neon-rgb), 0.85));
            animation: hero-line-pulse 2.8s ease-in-out infinite;
        }
        .hero-line-sub {
            fill: none;
            stroke: #a78bfa;
            stroke-width: 1.5;
            stroke-dasharray: 6 4;
            opacity: 0.85;
            filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.5));
        }
        @keyframes hero-line-pulse {
            0%, 100% { opacity: 0.88; stroke-width: 2.2; }
            50% { opacity: 1; stroke-width: 3; }
        }
        .hero-area-fill {
            opacity: 0.35;
            animation: hero-area-breathe 3.5s ease-in-out infinite;
        }
        @keyframes hero-area-breathe {
            0%, 100% { opacity: 0.28; }
            50% { opacity: 0.48; }
        }
        .hero-bar {
            border-radius: 4px 4px 0 0;
            transition: height 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
            background: linear-gradient(180deg, var(--neon-light) 0%, rgba(var(--neon-rgb), 0.15) 100%);
            box-shadow: 0 0 14px rgba(var(--neon-rgb), 0.35);
        }
        .hero-bar:nth-child(3n) {
            background: linear-gradient(180deg, #c4b5fd 0%, rgba(167, 139, 250, 0.12) 100%);
            box-shadow: 0 0 12px rgba(167, 139, 250, 0.3);
        }
        .hero-ring-track {
            stroke: rgba(255, 255, 255, 0.06);
        }
        .hero-ring-fill {
            transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
            filter: drop-shadow(0 0 10px rgba(var(--neon-rgb), 0.65));
        }
        .hero-stat-pill {
            background: rgba(15, 23, 42, 0.65);
            border: 1px solid rgba(var(--neon-rgb), 0.14);
            border-radius: 0.75rem;
            padding: 0.55rem 0.65rem;
        }
        .hero-spark {
            height: 28px;
            display: flex;
            align-items: flex-end;
            gap: 2px;
        }
        .hero-spark span {
            flex: 1;
            border-radius: 2px 2px 0 0;
            background: linear-gradient(180deg, var(--neon-light), rgba(var(--neon-rgb), 0.2));
            animation: hero-spark-dance 1.2s ease-in-out infinite;
        }
        @keyframes hero-spark-dance {
            0%, 100% { transform: scaleY(0.45); opacity: 0.5; }
            50% { transform: scaleY(1); opacity: 1; }
        }
        .clickable { position: relative; z-index: 5; pointer-events: auto; cursor: pointer; }
        .launcher-link { position: relative; z-index: 10; pointer-events: auto; cursor: pointer; }
        #app { pointer-events: auto; }
        input, button, a, select, textarea { pointer-events: auto; }
        .bin-tile { transition: all 0.22s ease; border: 2px solid transparent; }
        .bin-tile.is-on { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 0 22px rgba(var(--neon-rgb), 0.35); }
        .bin-tile.is-off { opacity: 0.45; filter: grayscale(0.35); }
        .nav-tile:hover {
            border-color: rgba(var(--neon-rgb), 0.55);
            box-shadow: 0 0 26px rgba(var(--neon-rgb), 0.22);
            transform: translateY(-4px);
        }
        .heal-glass {
            background: linear-gradient(165deg, rgba(6, 24, 18, 0.75) 0%, rgba(11, 15, 25, 0.88) 55%, rgba(15, 23, 42, 0.6) 100%);
            border: 1px solid rgba(74, 222, 128, 0.18);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(74, 222, 128, 0.08);
        }
        .wave-bar {
            width: 4px;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(134, 239, 172, 0.95) 0%, rgba(34, 197, 94, 0.35) 100%);
            box-shadow: 0 0 10px rgba(74, 222, 128, 0.55);
            transform-origin: bottom;
            height: 12px;
        }
        .waveform.is-playing .wave-bar {
            animation: wave-dance 0.85s ease-in-out infinite;
        }
        .waveform.is-playing .wave-bar:nth-child(1) { animation-delay: 0s; }
        .waveform.is-playing .wave-bar:nth-child(2) { animation-delay: 0.07s; }
        .waveform.is-playing .wave-bar:nth-child(3) { animation-delay: 0.14s; }
        .waveform.is-playing .wave-bar:nth-child(4) { animation-delay: 0.05s; }
        .waveform.is-playing .wave-bar:nth-child(5) { animation-delay: 0.11s; }
        .waveform.is-playing .wave-bar:nth-child(6) { animation-delay: 0.18s; }
        .waveform.is-playing .wave-bar:nth-child(7) { animation-delay: 0.03s; }
        .waveform.is-playing .wave-bar:nth-child(8) { animation-delay: 0.09s; }
        .waveform.is-playing .wave-bar:nth-child(9) { animation-delay: 0.16s; }
        .waveform.is-playing .wave-bar:nth-child(10) { animation-delay: 0.06s; }
        .waveform.is-playing .wave-bar:nth-child(11) { animation-delay: 0.13s; }
        .waveform.is-playing .wave-bar:nth-child(12) { animation-delay: 0.2s; }
        .waveform.is-playing .wave-bar:nth-child(13) { animation-delay: 0.04s; }
        .waveform.is-playing .wave-bar:nth-child(14) { animation-delay: 0.1s; }
        .waveform.is-playing .wave-bar:nth-child(15) { animation-delay: 0.17s; }
        .waveform.is-playing .wave-bar:nth-child(16) { animation-delay: 0.08s; }
        .waveform.is-playing .wave-bar:nth-child(17) { animation-delay: 0.15s; }
        .waveform.is-playing .wave-bar:nth-child(18) { animation-delay: 0.02s; }
        .waveform.is-playing .wave-bar:nth-child(19) { animation-delay: 0.12s; }
        .waveform.is-playing .wave-bar:nth-child(20) { animation-delay: 0.19s; }
        @keyframes wave-dance {
            0%, 100% { transform: scaleY(0.35); opacity: 0.45; }
            50% { transform: scaleY(1.8); opacity: 1; }
        }
        .mosquito-glow.is-playing {
            box-shadow: 0 0 32px rgba(74, 222, 128, 0.35), inset 0 0 24px rgba(34, 197, 94, 0.08);
            border-color: rgba(74, 222, 128, 0.45);
        }
        .asmr-btn:hover {
            border-color: rgba(167, 139, 250, 0.45);
            box-shadow: 0 0 20px rgba(167, 139, 250, 0.15);
            background: rgba(30, 27, 55, 0.6);
        }
        .laundry-viz {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(6, 78, 59, 0.12) 100%);
            border: 1px solid rgba(var(--neon-rgb), 0.12);
            border-radius: 1rem;
            position: relative;
            overflow: hidden;
        }
        .laundry-viz::before {
            content: '';
            position: absolute;
            top: -40%;
            right: -20%;
            width: 70%;
            height: 80%;
            background: radial-gradient(circle, rgba(var(--neon-rgb), 0.08) 0%, transparent 70%);
            pointer-events: none;
        }
        .laundry-viz.tier-great {
            border-color: rgba(74, 222, 128, 0.35);
            box-shadow: inset 0 0 40px rgba(74, 222, 128, 0.06), 0 0 28px rgba(74, 222, 128, 0.12);
        }
        .laundry-viz.tier-good {
            border-color: rgba(56, 189, 248, 0.3);
            box-shadow: inset 0 0 30px rgba(56, 189, 248, 0.05);
        }
        .laundry-viz.tier-meh {
            border-color: rgba(251, 191, 36, 0.25);
        }
        .laundry-viz.tier-bad {
            border-color: rgba(96, 165, 250, 0.25);
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 58, 138, 0.15) 100%);
        }
        .laundry-ring-fill {
            transition: stroke-dashoffset 0.7s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.4s ease;
            filter: drop-shadow(0 0 6px currentColor);
        }
        .clothesline-rope {
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.5) 15%, rgba(203, 213, 225, 0.7) 50%, rgba(148, 163, 184, 0.5) 85%, transparent 100%);
            border-radius: 999px;
            position: relative;
        }
        .clothesline-rope::before,
        .clothesline-rope::after {
            content: '';
            position: absolute;
            top: -14px;
            width: 2px;
            height: 16px;
            background: rgba(148, 163, 184, 0.45);
            border-radius: 1px;
        }
        .clothesline-rope::before { left: 8%; }
        .clothesline-rope::after { right: 8%; }
        .clothesline-item {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            transform-origin: top center;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
        }
        .clothesline-item .pin {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(203, 213, 225, 0.6);
            margin-bottom: 1px;
        }
        .laundry-viz.is-sway .clothesline-item {
            animation: laundry-sway 2.8s ease-in-out infinite;
        }
        .laundry-viz.is-sway .clothesline-item:nth-child(2) { animation-delay: 0.35s; }
        .laundry-viz.is-sway .clothesline-item:nth-child(3) { animation-delay: 0.7s; }
        .laundry-viz.is-sway .clothesline-item:nth-child(4) { animation-delay: 0.15s; }
        @keyframes laundry-sway {
            0%, 100% { transform: rotate(-5deg) translateY(0); }
            50% { transform: rotate(5deg) translateY(1px); }
        }
        .laundry-sun {
            animation: laundry-sun-pulse 3s ease-in-out infinite;
        }
        @keyframes laundry-sun-pulse {
            0%, 100% { transform: scale(1); opacity: 0.9; }
            50% { transform: scale(1.08); opacity: 1; }
        }
        .laundry-drops .drop {
            animation: laundry-drip 1.2s ease-in infinite;
        }
        .laundry-drops .drop:nth-child(2) { animation-delay: 0.4s; }
        @keyframes laundry-drip {
            0% { opacity: 0; transform: translateY(-2px); }
            40% { opacity: 0.7; }
            100% { opacity: 0; transform: translateY(8px); }
        }
        .widget-sub-card {
            background: rgba(8, 12, 22, 0.65);
            border: 1px solid rgba(var(--neon-rgb), 0.1);
            border-radius: 0.875rem;
        }
        .memo-title-btn {
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .memo-title-btn:hover {
            background: rgba(var(--neon-rgb), 0.1);
            border-color: rgba(var(--neon-rgb), 0.25);
        }
        .memo-title-btn.is-active {
            background: rgba(var(--neon-rgb), 0.15);
            border-color: rgba(var(--neon-rgb), 0.4);
        }
        .fx-viz {
            margin: 0.75rem 0;
            padding: 0.75rem;
            border-radius: 0.75rem;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 27, 55, 0.35) 100%);
            border: 1px solid rgba(var(--neon-rgb), 0.12);
        }
        .fx-viz.tier-great { border-color: rgba(74, 222, 128, 0.35); box-shadow: inset 0 0 28px rgba(74, 222, 128, 0.06); }
        .fx-viz.tier-bad { border-color: rgba(248, 113, 113, 0.3); }
        .fx-scale-track {
            position: relative; height: 0.65rem; border-radius: 999px;
            background: linear-gradient(90deg, #f87171 0%, #fb923c 18%, #fbbf24 38%, #38bdf8 62%, #4ade80 100%);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
        }
        .fx-scale-marker {
            position: absolute; top: 50%; width: 3px; height: 1.1rem; margin-top: -0.55rem; margin-left: -1.5px;
            background: #fff; border-radius: 2px; box-shadow: 0 0 10px rgba(255,255,255,0.85);
            transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2;
        }
        .fx-scale-base-line { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.55); z-index: 1; transition: left 0.4s ease; }
        .fx-ring-fill { transition: stroke-dashoffset 0.6s ease, stroke 0.35s ease; }
        /* Tailwind cyan-* → neonTheme CSS 변수와 동기 */
        #app .text-cyan-300 { color: var(--neon) !important; }
        #app .text-cyan-400,
        #app .text-cyan-400\/80,
        #app .text-cyan-400\/90 { color: var(--neon-light) !important; }
        #app .border-cyan-500\/15,
        #app .border-cyan-500\/20,
        #app .border-cyan-500\/25,
        #app .border-cyan-500\/30 { border-color: rgba(var(--neon-rgb), 0.25) !important; }
        #app .border-cyan-400\/50,
        #app .focus\:border-cyan-400\/50:focus { border-color: rgba(var(--neon-rgb), 0.5) !important; }
        #app .bg-cyan-600,
        #app .bg-cyan-600\/90 { background-color: rgba(var(--neon-rgb), 0.88) !important; }
        #app .hover\:bg-cyan-500:hover { filter: brightness(1.08); }
        #app .hover\:bg-cyan-500\/10:hover,
        #app .hover\:bg-cyan-500\/15:hover { background-color: rgba(var(--neon-rgb), 0.12) !important; }
        #app .focus\:border-cyan-400:focus { border-color: var(--neon) !important; }

        /* 오클랜드 야시장(Night Market) 스포트라이트 — 핑크·옐로 네온 펄스 */
        .night-spotlight {
            background: linear-gradient(145deg, rgba(30, 15, 35, 0.95) 0%, rgba(11, 15, 25, 0.98) 45%, rgba(25, 20, 10, 0.92) 100%);
            border: 2px solid rgba(251, 191, 36, 0.35);
            box-shadow:
                0 0 40px rgba(236, 72, 153, 0.25),
                0 0 60px rgba(250, 204, 21, 0.15),
                inset 0 0 32px rgba(236, 72, 153, 0.06);
        }
        .night-spotlight.is-live {
            animation: night-market-glow 2.2s ease-in-out infinite;
        }
        .night-spotlight.is-rest {
            border-color: rgba(148, 163, 184, 0.25);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
            animation: none;
        }
        @keyframes night-market-glow {
            0%, 100% {
                border-color: rgba(236, 72, 153, 0.75);
                box-shadow:
                    0 0 28px rgba(236, 72, 153, 0.55),
                    0 0 48px rgba(250, 204, 21, 0.35),
                    inset 0 0 24px rgba(236, 72, 153, 0.12);
            }
            50% {
                border-color: rgba(250, 204, 21, 0.9);
                box-shadow:
                    0 0 36px rgba(250, 204, 21, 0.6),
                    0 0 56px rgba(236, 72, 153, 0.45),
                    inset 0 0 28px rgba(250, 204, 21, 0.1);
            }
        }
        .night-schedule-row.is-today {
            background: linear-gradient(90deg, rgba(236, 72, 153, 0.18) 0%, rgba(250, 204, 21, 0.12) 50%, rgba(236, 72, 153, 0.08) 100%);
            border-color: rgba(250, 204, 21, 0.45);
            box-shadow: 0 0 20px rgba(236, 72, 153, 0.2);
        }
        .night-schedule-row.is-today .night-day-badge {
            background: linear-gradient(135deg, #ec4899, #facc15);
            color: #0b0f19;
            font-weight: 800;
        }

        /* 주말 마트 카탈로그 스포트라이트 — 그린·옐로 */
        .mart-spotlight {
            background: linear-gradient(145deg, rgba(12, 35, 22, 0.92) 0%, rgba(11, 15, 25, 0.98) 50%, rgba(35, 28, 8, 0.88) 100%);
            border: 2px solid rgba(74, 222, 128, 0.35);
            box-shadow: 0 0 32px rgba(74, 222, 128, 0.2), 0 0 48px rgba(250, 204, 21, 0.12);
            animation: mart-catalog-glow 2.8s ease-in-out infinite;
        }
        @keyframes mart-catalog-glow {
            0%, 100% { border-color: rgba(74, 222, 128, 0.5); box-shadow: 0 0 28px rgba(74, 222, 128, 0.35); }
            50% { border-color: rgba(250, 204, 21, 0.65); box-shadow: 0 0 36px rgba(250, 204, 21, 0.3); }
        }
        .grocery-hit-row.is-hit {
            background: rgba(74, 222, 128, 0.12);
            border-color: rgba(74, 222, 128, 0.45);
        }

        /* NZ 공휴일 D-Day */
        .holiday-dday-card {
            background: linear-gradient(160deg, rgba(30, 25, 55, 0.95) 0%, rgba(11, 15, 25, 0.98) 100%);
            border: 2px solid rgba(167, 139, 250, 0.35);
            box-shadow: 0 0 40px rgba(139, 92, 246, 0.2), inset 0 0 24px rgba(250, 204, 21, 0.05);
        }
        .holiday-dday-num {
            font-variant-numeric: tabular-nums;
            text-shadow: 0 0 32px rgba(250, 204, 21, 0.55), 0 0 48px rgba(167, 139, 250, 0.35);
        }

        /* 마트 마감 카운트다운 */
        .mart-close-card {
            background: linear-gradient(155deg, rgba(20, 30, 50, 0.95) 0%, rgba(11, 15, 25, 0.98) 100%);
            border: 2px solid rgba(56, 189, 248, 0.4);
            box-shadow: 0 0 36px rgba(56, 189, 248, 0.25);
            animation: mart-close-glow 2.5s ease-in-out infinite;
        }
        .mart-close-card.is-closed {
            border-color: rgba(248, 113, 113, 0.5);
            box-shadow: 0 0 28px rgba(248, 113, 113, 0.3);
            animation: none;
        }
        @keyframes mart-close-glow {
            0%, 100% { box-shadow: 0 0 28px rgba(56, 189, 248, 0.35); }
            50% { box-shadow: 0 0 40px rgba(250, 204, 21, 0.35); }
        }
        .mart-close-timer {
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.08em;
            text-shadow: 0 0 24px rgba(56, 189, 248, 0.6);
        }

        /* 주오클랜드 영사관 라이브 인디케이터 */
        .consulate-live {
            border: 2px solid rgba(255, 255, 255, 0.1);
            transition: border-color 0.4s ease, box-shadow 0.4s ease;
        }
        .consulate-live.is-open {
            border-color: rgba(74, 222, 128, 0.65);
            animation: consulate-neon-green 2s ease-in-out infinite;
        }
        .consulate-live.is-closed {
            border-color: rgba(248, 113, 113, 0.65);
            animation: consulate-neon-red 1.6s ease-in-out infinite;
        }
        @keyframes consulate-neon-green {
            0%, 100% { box-shadow: 0 0 20px rgba(74, 222, 128, 0.45), inset 0 0 16px rgba(74, 222, 128, 0.08); }
            50% { box-shadow: 0 0 36px rgba(74, 222, 128, 0.7), inset 0 0 24px rgba(74, 222, 128, 0.12); }
        }
        @keyframes consulate-neon-red {
            0%, 100% { box-shadow: 0 0 18px rgba(248, 113, 113, 0.4); }
            50% { box-shadow: 0 0 34px rgba(248, 113, 113, 0.75); }
        }
        .consulate-lamp {
            width: 1.25rem;
            height: 1.25rem;
            border-radius: 999px;
            box-shadow: 0 0 12px currentColor;
        }
        .consulate-lamp.is-open { background: #4ade80; color: #4ade80; }
        .consulate-lamp.is-closed { background: #f87171; color: #f87171; }

        .news-marquee-wrap {
            overflow: hidden;
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        }
        .news-marquee-track {
            display: flex;
            width: max-content;
            animation: news-marquee-scroll 45s linear infinite;
        }
        .news-marquee-track:hover { animation-play-state: paused; }
        @keyframes news-marquee-scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .news-marquee-item {
            white-space: nowrap;
            padding: 0 2rem;
            color: rgba(103, 232, 249, 0.9);
            text-shadow: 0 0 12px rgba(34, 211, 238, 0.4);
        }

        .fuel-radar-card {
            border: 2px solid rgba(251, 191, 36, 0.35);
            background: linear-gradient(145deg, rgba(40, 25, 8, 0.5) 0%, rgba(11, 15, 25, 0.98) 100%);
            box-shadow: 0 0 28px rgba(251, 191, 36, 0.15);
        }
        .fx-remit-neon {
            animation: fx-remit-pulse 2.2s ease-in-out infinite;
        }
        @keyframes fx-remit-pulse {
            0%, 100% { box-shadow: 0 0 16px rgba(74, 222, 128, 0.35); }
            50% { box-shadow: 0 0 28px rgba(56, 189, 248, 0.45); }
        }
        .weekend-score-card.is-great { border-color: rgba(74, 222, 128, 0.45); box-shadow: 0 0 20px rgba(74, 222, 128, 0.2); }
        .weekend-score-card.is-meh { border-color: rgba(251, 191, 36, 0.35); }
        .weekend-score-card.is-bad { border-color: rgba(248, 113, 113, 0.4); box-shadow: 0 0 18px rgba(248, 113, 113, 0.15); }

        .ping-radar-fixed {
            position: fixed;
            bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
            right: calc(1rem + env(safe-area-inset-right, 0px));
            z-index: 60;
            max-width: 11rem;
        }
        .ping-radar-fixed.is-ok { animation: ping-neon-green 2s ease-in-out infinite; }
        .ping-radar-fixed.is-bad { animation: ping-neon-red 1.5s ease-in-out infinite; }
        @keyframes ping-neon-green {
            0%, 100% { box-shadow: 0 0 14px rgba(74, 222, 128, 0.5); border-color: rgba(74, 222, 128, 0.5); }
            50% { box-shadow: 0 0 26px rgba(74, 222, 128, 0.85); }
        }
        @keyframes ping-neon-red {
            0%, 100% { box-shadow: 0 0 14px rgba(248, 113, 113, 0.45); }
            50% { box-shadow: 0 0 28px rgba(248, 113, 113, 0.8); }
        }

        .k-mart-sale-card {
            border: 2px solid rgba(251, 113, 133, 0.35);
            background: linear-gradient(155deg, rgba(45, 12, 28, 0.55) 0%, rgba(11, 15, 25, 0.98) 100%);
            box-shadow: 0 0 28px rgba(236, 72, 153, 0.12);
        }
        .k-mart-memo {
            min-height: 4.5rem;
            resize: vertical;
            font-size: 0.75rem;
            line-height: 1.45;
        }
        .ird-tax-card {
            border: 2px solid rgba(56, 189, 248, 0.35);
            background: linear-gradient(160deg, rgba(12, 28, 48, 0.9) 0%, rgba(11, 15, 25, 0.98) 100%);
            box-shadow: 0 0 32px rgba(56, 189, 248, 0.18);
        }
        .ird-tax-takehome {
            font-variant-numeric: tabular-nums;
            text-shadow: 0 0 24px rgba(74, 222, 128, 0.45);
        }
        .emergency-board {
            border: 2px solid rgba(248, 113, 113, 0.65);
            background: linear-gradient(165deg, rgba(55, 8, 12, 0.92) 0%, rgba(11, 15, 25, 0.98) 55%, rgba(30, 8, 8, 0.95) 100%);
            box-shadow: 0 0 40px rgba(248, 113, 113, 0.35), inset 0 0 32px rgba(239, 68, 68, 0.06);
            animation: emergency-neon-pulse 2.4s ease-in-out infinite;
        }
        @keyframes emergency-neon-pulse {
            0%, 100% { border-color: rgba(248, 113, 113, 0.55); box-shadow: 0 0 28px rgba(248, 113, 113, 0.35); }
            50% { border-color: rgba(252, 165, 165, 0.9); box-shadow: 0 0 48px rgba(248, 113, 113, 0.65); }
        }
        .emergency-tel-btn {
            transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
        }
        .emergency-tel-btn:hover {
            transform: translateY(-2px);
            border-color: rgba(252, 165, 165, 0.75);
            box-shadow: 0 0 22px rgba(248, 113, 113, 0.45);
        }
        .emergency-tel-btn:active { transform: translateY(0); }

        .settlement-quest-bar {
            position: relative;
            z-index: 25;
            isolation: isolate;
            border: 2px solid rgba(var(--neon-rgb), 0.28);
            background: linear-gradient(90deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 27, 55, 0.75) 100%);
            box-shadow: 0 0 28px rgba(var(--neon-rgb), 0.12);
        }
        .settlement-quest-list {
            position: relative;
            z-index: 2;
        }
        .quest-progress-track {
            height: 0.55rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            overflow: hidden;
        }
        .quest-progress-fill {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--neon) 0%, #a78bfa 55%, #f472b6 100%);
            box-shadow: 0 0 16px rgba(var(--neon-rgb), 0.65);
            transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .property-tracker-card {
            border: 2px solid rgba(129, 140, 248, 0.4);
            background: linear-gradient(155deg, rgba(25, 20, 55, 0.9) 0%, rgba(11, 15, 25, 0.98) 100%);
            box-shadow: 0 0 32px rgba(99, 102, 241, 0.2);
        }
        .ocr-neon-badge {
            animation: ocr-neon-blink 2.2s ease-in-out infinite;
        }
        .ocr-neon-badge.is-hold { color: #4ade80; text-shadow: 0 0 18px rgba(74, 222, 128, 0.75); }
        .ocr-neon-badge.is-cut { color: #38bdf8; text-shadow: 0 0 18px rgba(56, 189, 248, 0.75); }
        .ocr-neon-badge.is-hike { color: #f87171; text-shadow: 0 0 18px rgba(248, 113, 113, 0.75); }
        @keyframes ocr-neon-blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.72; }
        }
        .at-transit-card {
            border: 2px solid rgba(248, 113, 113, 0.25);
            background: linear-gradient(160deg, rgba(30, 12, 18, 0.85) 0%, rgba(11, 15, 25, 0.98) 100%);
        }
        .at-route-row.is-alert {
            border-color: rgba(248, 113, 113, 0.65);
            background: rgba(69, 10, 10, 0.45);
            animation: at-alert-pulse 1.4s ease-in-out infinite;
        }
        @keyframes at-alert-pulse {
            0%, 100% { box-shadow: 0 0 12px rgba(248, 113, 113, 0.35); }
            50% { box-shadow: 0 0 28px rgba(248, 113, 113, 0.75); }
        }
        .settlement-quest-card {
            position: relative;
            z-index: 5;
            border: 2px solid rgba(167, 139, 250, 0.35);
            background: linear-gradient(160deg, rgba(35, 20, 50, 0.85) 0%, rgba(11, 15, 25, 0.98) 100%);
        }
        .quest-check-row {
            position: relative;
            z-index: 3;
            pointer-events: auto !important;
            touch-action: manipulation;
            user-select: none;
            -webkit-tap-highlight-color: rgba(167, 139, 250, 0.25);
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease;
            color: inherit;
            font: inherit;
            appearance: none;
            -webkit-appearance: none;
        }
        .quest-check-row:hover {
            background: rgba(167, 139, 250, 0.08);
            border-color: rgba(167, 139, 250, 0.35);
        }
        .quest-check-row.is-done {
            background: rgba(74, 222, 128, 0.08);
            border-color: rgba(74, 222, 128, 0.35);
        }
        .quest-check-icon {
            width: 1.25rem;
            height: 1.25rem;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            line-height: 1;
        }
        .school-camp-card {
            border: 2px solid rgba(52, 211, 153, 0.35);
            background: linear-gradient(160deg, rgba(12, 40, 32, 0.88) 0%, rgba(11, 15, 25, 0.98) 100%);
            box-shadow: 0 0 32px rgba(52, 211, 153, 0.12);
        }
        .school-level-pill.is-on {
            background: rgba(52, 211, 153, 0.22);
            border-color: rgba(52, 211, 153, 0.55);
            color: #a7f3d0;
        }
        .camp-venue-row.is-council {
            border-color: rgba(56, 189, 248, 0.35);
            background: rgba(8, 30, 45, 0.45);
        }
    </style>
</head>
<body class="antialiased spotlight">
    <div id="app" class="min-h-screen p-4 sm:p-6 lg:p-10 max-w-7xl mx-auto">
        <header class="glass rounded-2xl p-5 sm:p-6 mb-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h1 class="text-2xl sm:text-3xl font-bold text-white tracking-tight flex items-center gap-3">
                    <i class="fas fa-gauge-high neon-title"></i>
                    <span class="neon-title">마이 대시보드</span>
                </h1>
                <p class="text-slate-400 text-sm mt-1">Auckland · NZ 교민 커맨드 센터</p>
                <p v-if="dashOnLocal" class="text-[10px] text-amber-200/70 mt-1">로컬 UI · 관리자·API → heldbygrace.life</p>
            </div>
            <div class="flex flex-wrap items-center gap-3">
                <div class="flex rounded-xl overflow-hidden border border-cyan-500/25 text-[10px]" title="neonTheme — blue / green / purple">
                    <button v-for="(t, key) in neonThemes" :key="key" type="button" class="clickable px-2.5 py-1.5 transition uppercase tracking-wide"
                            :class="neonTheme === key ? 'bg-cyan-600 text-white' : 'text-slate-400 hover:text-white'"
                            @click="setNeonTheme(key)">{{ key }}</button>
                </div>
                <div class="flex rounded-xl overflow-hidden border border-cyan-500/25 text-sm">
                    <button type="button" class="clickable px-4 py-2 transition"
                            :class="envMode === 'local' ? 'bg-cyan-600 text-white' : 'text-slate-400 hover:text-white'"
                            @click="setEnv('local')">로컬</button>
                    <button type="button" class="clickable px-4 py-2 transition"
                            :class="envMode === 'live' ? 'bg-cyan-600 text-white' : 'text-slate-400 hover:text-white'"
                            @click="setEnv('live')">라이브</button>
                </div>
                <div class="glass-strong rounded-xl px-6 py-3 text-right">
                    <div class="text-3xl font-mono font-bold text-white">{{ clockTime }}</div>
                    <div class="text-xs text-slate-400 mt-0.5">{{ clockDate }}</div>
                </div>
            </div>
        </header>

        <section class="dash-graph-hero mb-6 relative z-20" aria-label="라이브 그래프 대시보드">
            <div class="dash-graph-bg absolute inset-0" aria-hidden="true"></div>
            <div class="relative grid grid-cols-1 lg:grid-cols-12 gap-4">
                <div class="lg:col-span-8 hero-chart-panel p-4 sm:p-5 flex flex-col min-h-[240px]">
                    <div class="flex flex-wrap items-center justify-between gap-2 mb-3">
                        <div>
                            <p class="text-[10px] uppercase tracking-[0.22em] font-bold text-cyan-300/90 flex items-center gap-2">
                                <span class="inline-block w-2 h-2 rounded-full bg-cyan-400 animate-pulse"></span>
                                LIVE PULSE · Auckland
                            </p>
                            <h2 class="text-lg sm:text-xl font-black text-white mt-1">NZ 커맨드 센터 · 실시간 그래프</h2>
                        </div>
                        <div class="text-right">
                            <p class="text-2xl font-mono font-black neon-title">{{ fxActiveRate.toFixed(1) }}</p>
                            <p class="text-[10px] text-slate-400">NZD → KRW</p>
                        </div>
                    </div>
                    <div class="flex-1 min-h-[160px] relative">
                        <svg class="w-full h-full min-h-[160px] block" :viewBox="'0 0 ' + heroChartW + ' ' + heroChartH" preserveAspectRatio="none" aria-hidden="true">
                            <defs>
                                <linearGradient :id="heroGradFx" x1="0" y1="0" x2="0" y2="1">
                                    <stop offset="0%" :stop-color="'rgba(' + neonThemes[neonTheme].rgb + ', 0.55)'"/>
                                    <stop offset="100%" stop-color="transparent"/>
                                </linearGradient>
                                <linearGradient :id="heroGradQuest" x1="0" y1="0" x2="1" y2="0">
                                    <stop offset="0%" stop-color="#a78bfa"/>
                                    <stop offset="100%" stop-color="#22d3ee"/>
                                </linearGradient>
                            </defs>
                            <g class="opacity-60">
                                <line v-for="g in heroGridLines" :key="'hg-' + g" :x1="0" :y1="g" :x2="heroChartW" :y2="g" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>
                                <line v-for="(gx, gi) in heroGridCols" :key="'vg-' + gi" :x1="gx" :y1="0" :x2="gx" :y2="heroChartH" stroke="rgba(255,255,255,0.04)" stroke-width="1"/>
                            </g>
                            <path v-if="heroFxAreaPath" :d="heroFxAreaPath" :fill="'url(#' + heroGradFx + ')'" class="hero-area-fill"/>
                            <path v-if="heroQuestPath" :d="heroQuestPath" class="hero-line-sub"/>
                            <path v-if="heroFxLinePath" :d="heroFxLinePath" class="hero-line-main"/>
                            <circle v-if="heroFxDot" :cx="heroFxDot.x" :cy="heroFxDot.y" r="4.5" :fill="neonThemes[neonTheme].hex" class="animate-pulse"/>
                        </svg>
                    </div>
                    <div class="flex flex-wrap gap-4 mt-2 text-[10px] text-slate-400">
                        <span class="flex items-center gap-1.5"><span class="w-3 h-0.5 rounded bg-cyan-400"></span>환율 NZD/KRW</span>
                        <span class="flex items-center gap-1.5"><span class="w-3 h-0.5 rounded bg-violet-400 border border-dashed border-violet-300"></span>정착 퀘스트 %</span>
                        <span>{{ fxVisual.label }}</span>
                    </div>
                </div>
                <div class="lg:col-span-4 grid grid-cols-2 lg:grid-cols-1 gap-4">
                    <div class="hero-chart-panel p-4 flex flex-col items-center justify-center text-center">
                        <p class="text-[10px] uppercase tracking-widest text-violet-300/80 mb-2 w-full text-left">정착 퀘스트</p>
                        <div class="relative w-28 h-28 sm:w-32 sm:h-32">
                            <svg class="w-full h-full -rotate-90" viewBox="0 0 100 100" aria-hidden="true">
                                <defs>
                                    <linearGradient id="heroGradQuestRing" x1="0%" y1="0%" x2="100%" y2="100%">
                                        <stop offset="0%" stop-color="#a78bfa"/>
                                        <stop offset="100%" stop-color="#22d3ee"/>
                                    </linearGradient>
                                </defs>
                                <circle cx="50" cy="50" r="42" fill="none" class="hero-ring-track" stroke-width="8"/>
                                <circle cx="50" cy="50" r="42" fill="none" class="hero-ring-fill" stroke-width="8" stroke-linecap="round"
                                        stroke="url(#heroGradQuestRing)" :stroke-dasharray="heroQuestRingLen" :stroke-dashoffset="heroQuestRingOffset"/>
                            </svg>
                            <div class="absolute inset-0 flex flex-col items-center justify-center">
                                <span class="text-2xl font-black neon-title">{{ settlementQuestPct }}%</span>
                                <span class="text-[9px] text-slate-500">완료</span>
                            </div>
                        </div>
                    </div>
                    <div class="hero-chart-panel p-4 flex flex-col min-h-[140px]">
                        <p class="text-[10px] uppercase tracking-widest text-cyan-300/80 mb-2">라이브 활동</p>
                        <div class="flex-1 flex items-end justify-between gap-1 min-h-[100px]">
                            <div v-for="(h, i) in heroBars" :key="'hb-' + i" class="hero-bar flex-1 min-w-0"
                                 :style="{ height: h + '%' }" :title="'pulse ' + (i + 1)"></div>
                        </div>
                        <p class="text-[9px] text-slate-500 mt-2 text-center">Ping · 날씨 · 환율 펄스</p>
                    </div>
                </div>
            </div>
            <div class="relative grid grid-cols-2 lg:grid-cols-4 gap-3 mt-4">
                <div v-for="card in heroStatCards" :key="card.id" class="hero-stat-pill">
                    <p class="text-[9px] uppercase tracking-wider text-slate-500">{{ card.label }}</p>
                    <p class="text-sm font-bold text-white mt-0.5">{{ card.value }}</p>
                    <div class="hero-spark mt-2" aria-hidden="true">
                        <span v-for="n in 8" :key="card.id + '-s-' + n" :style="{ animationDelay: (n * 0.08 + card.delay) + 's', height: card.sparkHeights[n - 1] + '%' }"></span>
                    </div>
                </div>
            </div>
        </section>

        <section id="settlement-quest-board" class="settlement-quest-bar rounded-2xl px-4 py-4 sm:px-5 sm:py-5 mb-6"
                 aria-label="뉴질랜드 정착 퀘스트">
            <div class="flex flex-wrap items-center justify-between gap-2 mb-2">
                <p class="text-sm font-bold text-white flex items-center gap-2">
                    <span aria-hidden="true">🎮</span>
                    뉴질랜드 정착 퀘스트
                </p>
                <p class="text-lg font-black font-mono neon-title">{{ settlementQuestPct }}%</p>
            </div>
            <div class="quest-progress-track mb-3" role="progressbar" :aria-valuenow="settlementQuestPct" aria-valuemin="0" aria-valuemax="100">
                <div class="quest-progress-fill" :style="{ width: settlementQuestPct + '%' }"></div>
            </div>
            <p class="text-[10px] text-violet-200/70 mb-3">{{ settlementQuestDoneCount }} / {{ settlementQuest.length }} 완료 · <strong class="text-violet-200">항목을 탭하면 체크</strong></p>
            <div class="settlement-quest-list space-y-2">
                <button v-for="q in settlementQuest" :key="'quest-top-' + q.id" type="button"
                        class="quest-check-row clickable flex items-center gap-3 rounded-xl border border-white/10 px-3 py-2.5 w-full text-left"
                        :class="{ 'is-done': q.done }"
                        :aria-pressed="q.done ? 'true' : 'false'"
                        @click.stop="toggleSettlementQuest(q.id)">
                    <span class="quest-check-icon shrink-0" aria-hidden="true">{{ q.done ? '✅' : '⬜' }}</span>
                    <span class="text-sm flex-1 min-w-0" :class="q.done ? 'text-slate-500 line-through' : 'text-slate-200'">{{ q.label }}</span>
                </button>
            </div>
        </section>

        <div class="glass rounded-xl px-4 py-2.5 mb-6 border border-cyan-500/20 overflow-hidden" aria-label="오클랜드 뉴스">
            <div class="flex items-center gap-2 mb-1">
                <i class="fas fa-bullhorn text-cyan-400 text-xs"></i>
                <span class="text-[10px] uppercase tracking-widest text-slate-500 font-semibold">Auckland Live Ticker</span>
            </div>
            <div class="news-marquee-wrap">
                <div class="news-marquee-track">
                    <span v-for="(line, i) in newsMarqueeDoubled" :key="'a-' + i" class="news-marquee-item text-xs sm:text-sm">{{ line }}</span>
                </div>
            </div>
        </div>

        <!-- 오클랜드 야시장(Night Market) 실시간 알리미: getDay() 기준 오늘 스포트라이트 + 주간 보드 -->
        <section class="mb-6 relative z-20" aria-label="오클랜드 야시장 알리미">
            <div class="night-spotlight rounded-2xl p-6 sm:p-8 mb-4"
                 :class="nightMarketToday.isRest ? 'is-rest' : 'is-live'">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div class="flex items-start gap-4 min-w-0">
                        <span class="text-5xl sm:text-6xl shrink-0 drop-shadow-lg" aria-hidden="true">{{ nightMarketToday.emoji }}</span>
                        <div class="min-w-0">
                            <p class="text-[10px] uppercase tracking-[0.2em] font-bold mb-1"
                               :class="nightMarketToday.isRest ? 'text-slate-400' : 'text-fuchsia-300'">
                                <span v-if="nightMarketToday.isRest">TODAY · REST DAY</span>
                                <span v-else class="animate-pulse">● LIVE TONIGHT · 오늘의 야시장</span>
                            </p>
                            <h2 class="text-2xl sm:text-3xl font-black text-white leading-tight">
                                {{ nightMarketToday.venueKo }}
                            </h2>
                            <p class="text-sm text-amber-200/90 mt-1 font-medium">{{ nightMarketToday.venueEn }}</p>
                            <p class="text-xs text-slate-400 mt-2 leading-relaxed">{{ nightMarketToday.hint }}</p>
                        </div>
                    </div>
                    <div class="shrink-0 text-right sm:text-center sm:min-w-[7rem]">
                        <p class="text-[10px] text-slate-500 uppercase tracking-wider">Auckland</p>
                        <p class="text-xl font-bold text-white">{{ nightMarketToday.dayLabel }}</p>
                        <p class="text-[10px] text-amber-300/70 mt-1">실시간 요일 반영</p>
                    </div>
                </div>
            </div>

            <div class="glass rounded-2xl p-4 sm:p-5 border border-fuchsia-500/15">
                <h3 class="text-sm font-semibold text-white flex items-center gap-2 mb-4">
                    <i class="fas fa-store text-amber-400"></i>
                    주간 야시장 스케줄
                    <span class="text-[10px] font-normal text-slate-500">월 → 일</span>
                </h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-2">
                    <div v-for="row in nightMarketWeek" :key="row.dayIndex"
                         class="night-schedule-row flex items-center gap-3 rounded-xl border border-white/8 px-3 py-3 sm:px-4 transition-all duration-300"
                         :class="{ 'is-today': row.isToday }">
                        <span class="night-day-badge shrink-0 w-12 text-center text-[10px] font-semibold uppercase tracking-wide rounded-lg py-1.5 bg-slate-800/80 text-slate-300">
                            {{ row.dayShort }}
                        </span>
                        <span class="text-xl shrink-0" aria-hidden="true">{{ row.emoji }}</span>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-semibold text-white truncate">{{ row.venueKo }}</p>
                            <p class="text-[10px] text-slate-500 truncate">{{ row.venueEn }}</p>
                        </div>
                        <span v-if="row.isToday"
                              class="shrink-0 text-[9px] font-bold uppercase tracking-wider px-2 py-1 rounded-full bg-gradient-to-r from-pink-500 to-amber-400 text-[#0b0f19]">
                            TODAY
                        </span>
                        <span v-else-if="row.isRest" class="shrink-0 text-[9px] text-slate-500">OFF</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 주말 마트 카탈로그 + NZ 공휴일 D-Day -->
        <div class="grid grid-cols-1 xl:grid-cols-2 gap-5 sm:gap-6 mb-6 relative z-[15]">
            <section class="mart-spotlight rounded-2xl p-5 sm:p-6" aria-label="마트 카탈로그">
                <h2 class="text-lg font-bold text-white flex items-center gap-2 mb-1">
                    <i class="fas fa-basket-shopping text-emerald-400"></i>
                    주말 마트 · 이번 주 카탈로그
                </h2>
                <p class="text-[11px] text-slate-400 mb-4">Woolworths · New World Mailer 바로가기 + 필수품 목표가 메모</p>
                <div class="flex flex-wrap gap-2 mb-5">
                    <a v-for="m in martCatalogLinks" :key="m.id"
                       :href="m.url" target="_blank" rel="noopener noreferrer"
                       class="clickable flex-1 min-w-[8.5rem] flex items-center gap-3 rounded-xl px-4 py-3 border transition hover:scale-[1.02]"
                       :class="m.id === 'woolworths' ? 'bg-emerald-950/50 border-emerald-500/40 hover:bg-emerald-900/40' : 'bg-amber-950/40 border-amber-500/35 hover:bg-amber-900/30'">
                        <span class="text-2xl">{{ m.emoji }}</span>
                        <span class="min-w-0 text-left">
                            <span class="block text-sm font-bold text-white">{{ m.name }}</span>
                            <span class="block text-[10px] text-slate-400">{{ m.sub }}</span>
                        </span>
                        <i class="fas fa-external-link-alt text-[10px] text-slate-500 ml-auto"></i>
                    </a>
                </div>
                <h3 class="text-xs font-semibold text-emerald-300/90 uppercase tracking-wider mb-2 flex items-center gap-2">
                    <i class="fas fa-tags text-[10px]"></i>필수품 타깃 가격
                </h3>
                <ul class="space-y-2 mb-3">
                    <li v-for="item in groceryWatchList" :key="item.id"
                        class="grocery-hit-row flex flex-wrap items-center gap-2 rounded-xl border border-white/10 px-3 py-2.5 transition"
                        :class="{ 'is-hit': item.hitTarget }">
                        <span class="text-lg shrink-0">{{ item.emoji }}</span>
                        <span class="text-sm font-medium text-white min-w-[5rem]">{{ item.name }}</span>
                        <label class="flex items-center gap-1 text-[10px] text-slate-500">
                            목표 $
                            <input v-bind="mobileInputAttrs" type="number" step="0.01" min="0"
                                   v-model.number="item.targetPrice"
                                   @change="persistGroceryWatch"
                                   class="w-16 bg-slate-950/80 border border-white/10 rounded px-1.5 py-1 text-xs text-amber-200 font-mono outline-none focus:border-emerald-400/50">
                        </label>
                        <label class="flex items-center gap-1.5 text-xs cursor-pointer ml-auto"
                               :class="item.hitTarget ? 'text-emerald-300' : 'text-slate-400'">
                            <input type="checkbox" v-model="item.hitTarget" @change="persistGroceryWatch"
                                   class="rounded border-white/20 bg-slate-900 text-emerald-500 focus:ring-emerald-500/40">
                            목표가 이하 ✓
                        </label>
                    </li>
                </ul>
                <div class="flex flex-wrap gap-2">
                    <input v-bind="mobileInputAttrs" v-model="groceryNewName" type="text" placeholder="품목 이름"
                           class="flex-1 min-w-[6rem] bg-slate-950/80 border border-white/10 rounded-lg px-2.5 py-1.5 text-xs text-white outline-none focus:border-emerald-400/50">
                    <button type="button" class="clickable text-xs px-3 py-1.5 rounded-lg bg-emerald-700/80 hover:bg-emerald-600 text-white"
                            @click="addGroceryWatchItem">+ 품목</button>
                </div>
            </section>

            <section class="holiday-dday-card rounded-2xl p-5 sm:p-6 flex flex-col" aria-label="뉴질랜드 공휴일">
                <h2 class="text-lg font-bold text-white flex items-center gap-2 mb-1">
                    <i class="fas fa-umbrella-beach text-violet-300"></i>
                    황금연휴 D-Day
                </h2>
                <p class="text-[11px] text-slate-400 mb-4">가장 가까운 다음 NZ 공휴일 · 실시간 카운트다운</p>
                <div v-if="nzHolidayNext" class="flex-1 flex flex-col items-center justify-center text-center py-4">
                    <p class="text-[10px] uppercase tracking-[0.25em] text-amber-300/90 mb-2 font-bold">
                        {{ nzHolidayNext.longWeekend ? '★ LONG WEEKEND' : 'NEXT HOLIDAY' }}
                    </p>
                    <p class="holiday-dday-num text-6xl sm:text-7xl font-black text-transparent bg-clip-text bg-gradient-to-br from-amber-200 via-yellow-300 to-violet-300 leading-none">
                        {{ nzHolidayNext.dDayLabel }}
                    </p>
                    <p class="text-2xl font-bold text-white mt-3">{{ nzHolidayNext.nameKo }}</p>
                    <p class="text-sm text-violet-200/80">{{ nzHolidayNext.nameEn }}</p>
                    <p class="text-xs text-slate-400 mt-2">{{ nzHolidayNext.dateLabel }}</p>
                    <p class="text-[11px] text-slate-500 mt-3">
                        {{ nzHolidayNext.daysLeft === 0 ? '오늘이 공휴일!' : nzHolidayNext.daysLeft + '일 남음' }}
                    </p>
                </div>
                <div class="mt-4 pt-4 border-t border-white/10">
                    <p class="text-[10px] text-slate-500 uppercase tracking-wider mb-2">다가오는 공휴일</p>
                    <ul class="space-y-1.5 max-h-40 overflow-y-auto pr-1">
                        <li v-for="h in nzHolidayUpcoming" :key="h.id"
                            class="flex items-center justify-between gap-2 text-xs rounded-lg px-2.5 py-1.5"
                            :class="h.isNext ? 'bg-violet-500/15 border border-violet-400/30' : 'bg-slate-900/40 border border-transparent'">
                            <span class="text-white/90 truncate">{{ h.nameKo }}</span>
                            <span class="shrink-0 font-mono text-amber-300/90">{{ h.dDayLabel }}</span>
                        </li>
                    </ul>
                </div>
            </section>
        </div>

        <section class="school-camp-card rounded-2xl p-5 sm:p-6 mb-6 relative z-10" aria-label="학교 방학·수련회 장소">
            <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4">
                <div>
                    <h2 class="text-lg font-bold text-white flex items-center gap-2 mb-1">
                        <i class="fas fa-campground text-emerald-300"></i>
                        학교 방학 · 수련회 장소
                    </h2>
                    <p class="text-[11px] text-slate-400">초·중·고·대학 · 텀 방학 · NZ 공휴일 · 오클랜드 카운슬 숙박·야영 시설</p>
                </div>
                <div v-if="schoolBreakNext" class="text-center lg:text-right shrink-0">
                    <p class="text-[10px] uppercase tracking-widest text-emerald-300/90 font-bold">다음 방학</p>
                    <p class="text-2xl font-black text-emerald-200 font-mono">{{ schoolBreakNext.dDayLabel }}</p>
                    <p class="text-xs text-white font-semibold">{{ schoolBreakNext.nameKo }}</p>
                    <p class="text-[10px] text-slate-500">{{ schoolBreakNext.rangeLabel }}</p>
                </div>
            </div>
            <div class="flex flex-wrap gap-2 mb-3">
                <button v-for="lv in schoolLevelFilters" :key="lv.id" type="button"
                        class="clickable school-level-pill text-[10px] px-2.5 py-1 rounded-full border border-white/15 text-slate-400 transition"
                        :class="{ 'is-on': schoolCampLevel === lv.id }"
                        @click="schoolCampLevel = lv.id">
                    {{ lv.emoji }} {{ lv.label }}
                </button>
            </div>
            <div class="flex flex-wrap gap-2 mb-4">
                <a v-for="l in schoolCampQuickLinks" :key="l.id" :href="l.url" target="_blank" rel="noopener noreferrer"
                   class="clickable text-[10px] px-2.5 py-1.5 rounded-lg border border-emerald-500/30 text-emerald-100/90 hover:bg-emerald-950/40">
                    {{ l.name }}
                </a>
            </div>
            <p class="text-[10px] text-slate-500 mb-3">
                <span class="text-sky-300/90">● 카운슬 운영</span> ·
                <span class="text-emerald-300/80">○ 교육·단체 인기</span>
                · 예약·인원·소음 규정은 공식 페이지에서 최종 확인
            </p>
            <ul class="space-y-2 max-h-[28rem] overflow-y-auto pr-1">
                <li v-for="v in filteredCampVenues" :key="v.id">
                    <a :href="v.url" target="_blank" rel="noopener noreferrer"
                       class="camp-venue-row clickable block rounded-xl border border-white/10 px-3 py-3 transition hover:border-emerald-500/35"
                       :class="{ 'is-council': v.operator === 'council' }">
                        <div class="flex flex-wrap items-start justify-between gap-2">
                            <p class="text-sm font-bold text-white">
                                {{ v.emoji }} {{ v.name }}
                                <span v-if="v.operator === 'council'" class="text-[9px] ml-1 px-1.5 py-0.5 rounded bg-sky-500/20 text-sky-200 border border-sky-500/30">카운슬</span>
                            </p>
                            <span class="text-[10px] text-slate-500 shrink-0">{{ v.area }}</span>
                        </div>
                        <p class="text-[11px] text-slate-400 mt-1">{{ v.sleep }} · {{ v.levelsLabel }}</p>
                        <p class="text-[10px] text-emerald-200/70 mt-1">{{ v.hint }}</p>
                        <p class="text-[10px] text-slate-600 mt-1">{{ v.seasonTags }}</p>
                    </a>
                </li>
            </ul>
            <div class="mt-4 pt-3 border-t border-white/10">
                <p class="text-[10px] text-slate-500 uppercase tracking-wider mb-2">2025–2026 학교 방학 일정 (참고)</p>
                <ul class="space-y-1 text-[10px] text-slate-400">
                    <li v-for="b in schoolBreakUpcoming" :key="b.id" class="flex justify-between gap-2">
                        <span class="text-white/80">{{ b.nameKo }}</span>
                        <span class="shrink-0 font-mono text-emerald-300/80">{{ b.dDayLabel }} · {{ b.rangeLabel }}</span>
                    </li>
                </ul>
                <p class="text-[9px] text-amber-200/60 mt-2">※ 학교·대학마다 개학일이 조금 다를 수 있어요 · 대학은 AUT/UoA 학사일정 별도 확인</p>
            </div>
        </section>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-5 mb-6">
            <section class="glass rounded-2xl p-4 sm:p-5">
                <h2 class="text-sm font-semibold text-white flex items-center gap-2 mb-3">
                    <i class="fas fa-cloud-sun text-cyan-400"></i>오클랜드 날씨
                </h2>
                <div class="flex items-center gap-3 mb-3">
                    <span class="text-4xl">⛅</span>
                    <div>
                        <p class="text-3xl font-bold text-white">{{ weather.temp }}<span class="text-lg text-slate-400">°C</span></p>
                        <p class="text-cyan-300 text-xs">체감 {{ weather.feels }}°C · {{ weather.condition }}</p>
                    </div>
                </div>
                <div class="grid grid-cols-4 gap-1.5 text-center text-[10px]">
                    <div class="rounded-lg bg-slate-900/70 border border-cyan-500/15 py-2">
                        <p class="text-slate-500">UV</p>
                        <p class="text-sm font-bold text-amber-300">{{ weather.uv }}</p>
                    </div>
                    <div class="rounded-lg bg-slate-900/70 border border-cyan-500/15 py-2">
                        <p class="text-slate-500">습도</p>
                        <p class="text-sm font-bold text-white">{{ weather.humidity }}%</p>
                    </div>
                    <div class="rounded-lg bg-slate-900/70 border border-cyan-500/15 py-2">
                        <p class="text-slate-500">바람</p>
                        <p class="text-sm font-bold text-white">{{ weather.wind }}</p>
                    </div>
                    <div class="rounded-lg bg-slate-900/70 border border-cyan-500/15 py-2">
                        <p class="text-slate-500">강수</p>
                        <p class="text-sm font-bold text-white">{{ weather.rain }}%</p>
                    </div>
                </div>

                <div class="laundry-viz mt-3 p-3 relative z-[1]"
                     :class="['tier-' + laundryVisual.tier, { 'is-sway': laundryVisual.sway }]">
                    <div class="flex items-center gap-3">
                        <div class="relative shrink-0 w-[4.5rem] h-[4.5rem]">
                            <svg class="w-full h-full -rotate-90" viewBox="0 0 40 40" aria-hidden="true">
                                <circle cx="20" cy="20" r="15.5" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="3.5"/>
                                <circle cx="20" cy="20" r="15.5" fill="none" class="laundry-ring-fill"
                                        stroke-width="3.5" stroke-linecap="round"
                                        :stroke="laundryVisual.ringColor"
                                        :stroke-dasharray="laundryRingLen"
                                        :stroke-dashoffset="laundryRingOffset"/>
                            </svg>
                            <div class="absolute inset-0 flex flex-col items-center justify-center">
                                <span class="text-lg leading-none">{{ laundryVisual.icon }}</span>
                                <span class="text-sm font-bold text-white mt-0.5">{{ laundryScore }}</span>
                            </div>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-[10px] text-cyan-400/80 uppercase tracking-wider mb-0.5">빨래 지수</p>
                            <p class="text-sm font-bold leading-tight" :style="{ color: laundryVisual.ringColor }">{{ laundryVisual.label }}</p>
                            <p class="text-[10px] text-slate-400 mt-0.5 leading-snug">{{ laundryVisual.hint }}</p>
                        </div>
                        <span class="text-2xl shrink-0 laundry-sun" :class="{ 'opacity-40 grayscale': laundryVisual.tier === 'bad' }">{{ laundryVisual.sky }}</span>
                    </div>
                    <div class="mt-3 pt-2 relative">
                        <div class="clothesline-rope mb-0"></div>
                        <div class="flex justify-between items-start px-2 -mt-1 min-h-[2.75rem]">
                            <div v-for="(item, i) in laundryClothes" :key="i" class="clothesline-item">
                                <span class="pin"></span>
                                <span class="text-xl sm:text-2xl leading-none" :class="laundryVisual.wet ? 'opacity-50 saturate-50' : ''">{{ item }}</span>
                            </div>
                        </div>
                        <div v-if="laundryVisual.wet" class="laundry-drops absolute bottom-1 left-1/2 -translate-x-1/2 flex gap-3 text-sky-400/60 text-xs">
                            <span class="drop">💧</span><span class="drop">💧</span>
                        </div>
                    </div>
                    <div class="flex gap-1 mt-2.5 h-1 rounded-full overflow-hidden bg-slate-900/80">
                        <div v-for="(seg, i) in laundryBar" :key="i"
                             class="flex-1 rounded-full transition-all duration-500"
                             :style="{ background: seg.on ? seg.color : 'rgba(255,255,255,0.06)', opacity: seg.on ? 1 : 0.35 }"></div>
                    </div>
                </div>
            </section>

            <div class="flex flex-col gap-3">
                <section class="glass rounded-2xl p-4 sm:p-5 flex-1">
                    <h2 class="text-sm font-semibold text-white flex items-center gap-2 mb-2">
                        <i class="fas fa-won-sign text-cyan-400"></i>NZD ⇄ KRW
                    </h2>
                    <div class="fx-remit-neon rounded-lg px-3 py-2 mb-3 border text-center"
                         :class="fxRemitBoard.borderClass">
                        <p class="text-sm font-black" :class="fxRemitBoard.textClass">
                            {{ fxRemitBoard.emoji }} {{ fxRemitBoard.title }}
                            <span class="font-mono ml-1">({{ fxRemitBoard.rateLabel }})</span>
                        </p>
                        <p class="text-[10px] text-slate-400 mt-0.5">{{ fxRemitBoard.hint }}</p>
                    </div>
                    <div class="flex flex-wrap items-center gap-2 mb-2 text-xs">
                        <span class="text-cyan-400 font-semibold">1 NZD =</span>
                        <input v-bind="mobileInputAttrs" type="number" step="0.01" min="0" v-model.number="fxRate" @input="onRateChange"
                               class="w-24 bg-slate-950 border border-cyan-500/30 rounded-lg px-2 py-1.5 text-white font-mono text-sm outline-none focus:border-cyan-400">
                        <span class="text-slate-400">KRW</span>
                        <button type="button" class="clickable text-[10px] px-2 py-1 rounded border border-white/10 text-slate-500 hover:text-cyan-300"
                                @click="resetRate">845</button>
                    </div>
                    <div class="fx-viz" :class="'tier-' + fxVisual.tier">
                        <div class="flex items-center gap-2 mb-2">
                            <div class="relative shrink-0 w-14 h-14">
                                <svg class="w-full h-full -rotate-90" viewBox="0 0 40 40" aria-hidden="true">
                                    <circle cx="20" cy="20" r="15.5" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="3.5"/>
                                    <circle cx="20" cy="20" r="15.5" fill="none" class="fx-ring-fill" stroke-width="3.5" stroke-linecap="round"
                                            :stroke="fxVisual.color" :stroke-dasharray="fxRingLen" :stroke-dashoffset="fxRingOffset"/>
                                </svg>
                                <div class="absolute inset-0 flex flex-col items-center justify-center text-[10px] font-bold text-white">
                                    <span>{{ fxVisual.emoji }}</span><span>{{ fxScore }}</span>
                                </div>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-[10px] text-cyan-400/80 uppercase tracking-wider mb-0.5">송금 타이밍</p>
                                <p class="text-xs font-bold" :style="{ color: fxVisual.color }">{{ fxVisual.label }}</p>
                                <p class="text-[10px] text-slate-400 mt-0.5">{{ fxVisual.hint }}</p>
                            </div>
                        </div>
                        <div class="mb-1.5">
                            <div class="flex justify-between text-[9px] text-slate-500 mb-0.5">
                                <span>{{ fxScaleMin }}</span>
                                <span>기준 {{ fxBaseline }}</span>
                                <span>{{ fxScaleMax }}</span>
                            </div>
                            <div class="fx-scale-track">
                                <div class="fx-scale-base-line" :style="{ left: fxBasePos + '%' }"></div>
                                <div class="fx-scale-marker" :style="{ left: fxMarkerPos + '%' }"></div>
                            </div>
                            <div class="flex justify-between text-[9px] mt-0.5 text-slate-500">
                                <span class="text-red-300/80">← 낮음</span><span class="text-green-300/80">높음 →</span>
                            </div>
                        </div>
                        <svg v-if="fxSparkPoints" class="w-full h-9 block" :viewBox="'0 0 ' + fxSparkW + ' ' + fxSparkH" preserveAspectRatio="none">
                            <defs>
                                <linearGradient id="dashFxSparkGrad" x1="0" y1="0" x2="0" y2="1">
                                    <stop offset="0%" stop-color="#22d3ee"/><stop offset="100%" stop-color="transparent"/>
                                </linearGradient>
                            </defs>
                            <polygon :points="fxSparkArea" fill="url(#dashFxSparkGrad)" opacity="0.35"/>
                            <polyline :points="fxSparkPoints" fill="none" stroke="rgba(103,232,249,0.85)" stroke-width="1.5" stroke-linecap="round"/>
                        </svg>
                        <p class="text-[9px] text-slate-500 text-center mt-1" v-html="fxDiffHtml"></p>
                    </div>
                    <div class="grid grid-cols-2 gap-2">
                        <div>
                            <label class="text-[10px] text-slate-500 block mb-0.5">NZD</label>
                            <input v-bind="mobileInputAttrs" type="number" step="0.01" min="0" v-model.number="nzdAmount" @input="calcFromNzd"
                                   class="w-full bg-slate-950/80 border border-cyan-500/25 rounded-lg px-2 py-2 text-white font-mono text-sm outline-none focus:border-cyan-400">
                        </div>
                        <div>
                            <label class="text-[10px] text-slate-500 block mb-0.5">KRW</label>
                            <input v-bind="mobileInputAttrs" type="number" step="1" min="0" v-model.number="krwAmount" @input="calcFromKrw"
                                   class="w-full bg-slate-950/80 border border-cyan-500/25 rounded-lg px-2 py-2 text-white font-mono text-sm outline-none focus:border-cyan-400">
                        </div>
                    </div>
                </section>
                <div class="widget-sub-card p-3 flex-1 flex flex-col min-h-[7.5rem]">
                    <h3 class="text-[10px] font-semibold text-cyan-400/90 uppercase tracking-wider mb-2 flex items-center gap-1.5">
                        <i class="fas fa-list-ul text-[9px]"></i>메모 목록
                    </h3>
                    <ul v-if="memoListSorted.length" class="space-y-1 flex-1 overflow-y-auto max-h-36 pr-0.5">
                        <li v-for="m in memoListSorted" :key="m.id">
                            <button type="button"
                                    class="clickable memo-title-btn w-full text-left px-2.5 py-2 rounded-lg border border-transparent text-xs text-white/90 truncate"
                                    :class="{ 'is-active': activeMemoId === m.id }"
                                    :title="m.title"
                                    @click="selectMemo(m)">
                                <i class="fas fa-file-lines text-cyan-500/60 text-[9px] mr-1.5"></i>{{ m.title }}
                            </button>
                        </li>
                    </ul>
                    <p v-else class="text-[11px] text-slate-500 flex-1 flex items-center">아래에서 메모 저장하면 제목이 여기 보여요</p>
                </div>
            </div>

            <div class="flex flex-col gap-3">
                <section class="glass rounded-2xl p-4 sm:p-5">
                    <h2 class="text-sm font-semibold text-white flex items-center gap-2 mb-2">
                        <i class="fas fa-trash-can text-amber-400"></i>Bin Day
                    </h2>
                    <p class="text-[11px] text-amber-200/90 mb-2 leading-snug">{{ binMessage }}</p>
                    <div class="grid grid-cols-4 gap-1.5">
                        <button v-for="bin in bins" :key="bin.id" type="button"
                                class="clickable bin-tile rounded-xl p-2 text-center"
                                :class="[bin.bg, binToggles[bin.id] ? 'is-on' : 'is-off']"
                                @click="toggleBin(bin.id)">
                            <span class="text-lg block">{{ bin.emoji }}</span>
                            <span class="text-[9px] font-bold text-white block leading-tight">{{ bin.name }}</span>
                        </button>
                    </div>
                    <p class="text-[9px] text-slate-500 mt-2 truncate" :title="binAddress">📍 {{ binAddress }}</p>
                </section>
                <div class="widget-sub-card p-3 flex-1 flex flex-col min-h-[7.5rem]">
                    <div class="flex items-center justify-between gap-2 mb-2">
                        <h3 class="text-[10px] font-semibold text-amber-400/90 uppercase tracking-wider flex items-center gap-1.5">
                            <i class="fas fa-pen text-[9px]"></i>메모 작성
                        </h3>
                        <button v-if="activeMemoId" type="button" class="clickable text-[10px] text-slate-500 hover:text-cyan-300" @click="startNewMemo">+ 새 메모</button>
                    </div>
                    <input v-bind="mobileInputAttrs" v-model="memoDraftTitle" type="text" placeholder="제목 (비우면 첫 줄 사용)"
                           class="w-full bg-slate-950/80 border border-white/10 rounded-lg px-2.5 py-1.5 text-xs text-white mb-2 outline-none focus:border-cyan-400/50">
                    <textarea v-bind="mobileInputAttrs" v-model="memoDraftBody" @input="debouncedMemoAutosave"
                              class="flex-1 w-full min-h-[4.5rem] bg-transparent text-white/90 resize-none outline-none text-xs leading-relaxed placeholder:text-slate-600"
                              placeholder="빈 수거·송금·생활 메모..."></textarea>
                    <div class="flex flex-wrap gap-1.5 mt-2">
                        <button type="button" class="clickable flex-1 text-[10px] px-2 py-1.5 rounded-lg bg-cyan-600/90 hover:bg-cyan-500 text-white font-medium"
                                @click="saveMemoDraft">저장</button>
                        <button v-if="activeMemoId" type="button" class="clickable text-[10px] px-2 py-1.5 rounded-lg border border-white/10 text-slate-400 hover:text-red-300"
                                @click="deleteActiveMemo">삭제</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 xl:grid-cols-3 gap-5 sm:gap-6 mb-6">
            <section class="xl:col-span-2 glass rounded-2xl p-5 sm:p-6 relative z-10">
                <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
                    <h2 class="text-xl font-semibold text-white flex items-center gap-2">
                        <i class="fas fa-rocket text-cyan-400"></i>
                        서비스 런처
                        <span class="text-[10px] font-normal text-cyan-400/80 border border-cyan-500/30 px-2 py-0.5 rounded-full">MAIN</span>
                    </h2>
                </div>
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
                    <template v-for="item in launcherGrid" :key="item.key">
                        <div v-if="item.type === 'cheatkeys-card'" id="nz-cheatkeys"
                             class="glass-strong p-4 sm:p-5 rounded-2xl border border-amber-500/25 col-span-2 sm:col-span-3 relative z-10">
                            <div class="flex flex-wrap items-center justify-between gap-2 mb-3">
                                <span class="font-semibold text-white text-sm flex items-center gap-2">
                                    <i class="fas fa-bolt text-amber-400"></i>
                                    🇳🇿 NZ 치트키 · 원탭 바로가기
                                </span>
                                <a :href="blogBase + '/nz/cheatkeys-hub/index.php'" :target="linkTarget(blogBase + '/nz/cheatkeys-hub/index.php')"
                                   class="launcher-link text-[10px] text-amber-400/80 hover:text-amber-300">4대 치트키 허브</a>
                                <a :href="item.toolkitUrl" :target="linkTarget(item.toolkitUrl)"
                                   class="launcher-link text-[10px] text-slate-500 hover:text-cyan-300 ml-1">로드맵</a>
                            </div>
                            <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
                                <a v-for="link in item.links" :key="link.id" :href="link.url" :target="linkTarget(link.url)"
                                   class="launcher-link flex flex-col items-center justify-center text-center px-1.5 py-2.5 rounded-xl bg-white/5 hover:bg-amber-500/20 border border-transparent hover:border-amber-500/30 min-h-[58px]">
                                    <span class="text-lg leading-none mb-0.5">{{ link.emoji }}</span>
                                    <span class="text-[10px] font-medium text-white leading-tight">{{ link.name }}</span>
                                </a>
                            </div>
                        </div>
                        <div v-else-if="item.type === 'utility-card'"
                             class="glass-strong p-5 rounded-2xl flex flex-col border border-white/10 col-span-2 sm:col-span-2 relative z-10">
                            <div class="flex items-center gap-2 mb-4 pb-3 border-b border-white/10">
                                <i class="fas fa-toolbox text-cyan-400"></i>
                                <span class="font-semibold text-white">유틸리티</span>
                            </div>
                            <div class="grid grid-cols-3 gap-2">
                                <a v-for="link in item.links" :key="link.id" :href="link.url" :target="linkTarget(link.url)"
                                   class="launcher-link flex flex-col items-center justify-center p-2.5 rounded-xl bg-white/5 hover:bg-cyan-500/15 min-h-[68px]">
                                    <img v-if="link.favicon" :src="link.favicon" class="w-7 h-7 mb-1 rounded object-contain" alt="">
                                    <i v-else :class="[link.icon, 'text-lg mb-1 text-white/80']"></i>
                                    <span class="text-[10px] font-medium text-white">{{ link.name }}</span>
                                </a>
                            </div>
                        </div>
                        <div v-else-if="item.type === 'pair'" class="col-span-2 grid grid-cols-2 gap-3 relative z-10">
                            <a v-for="link in item.links" :key="link.id" :href="link.url" :target="linkTarget(link.url)"
                               class="launcher-link glass-strong p-5 rounded-2xl flex flex-col items-center justify-center text-center hover:border-cyan-500/40 border border-white/5 transition">
                                <img v-if="link.favicon" :src="link.favicon" class="w-10 h-10 mb-2 rounded-lg object-contain" alt="">
                                <i v-else :class="[link.icon, 'text-2xl mb-2 text-cyan-400/80']"></i>
                                <span class="font-medium text-white text-sm">{{ link.name }}</span>
                                <span class="text-[10px] text-slate-500 mt-1">{{ link.urlHint }}</span>
                            </a>
                        </div>
                        <a v-else :href="item.link.url" :target="linkTarget(item.link.url)"
                           class="launcher-link glass-strong p-6 rounded-2xl flex flex-col items-center justify-center text-center hover:border-cyan-500/40 border border-white/5 transition relative">
                            <button v-if="item.link.custom" type="button" @click.prevent="removeLink(item.link.id)"
                                    class="absolute top-2 right-2 text-slate-500 hover:text-red-400 text-xs z-20">✕</button>
                            <img v-if="item.link.favicon" :src="item.link.favicon"
                                 :class="['w-11 h-11 mb-3 object-contain', item.link.faviconRound ? 'rounded-full ring-2 ring-white/10' : 'rounded-lg']" alt="">
                            <i v-else :class="[item.link.icon, 'text-3xl mb-3 text-cyan-400/80']"></i>
                            <span class="font-medium text-white">{{ item.link.name }}</span>
                            <span class="text-[10px] text-slate-500 mt-1 truncate w-full px-1">{{ item.link.urlHint }}</span>
                        </a>
                    </template>
                </div>
                <form @submit.prevent="addLink" class="mt-5 p-4 rounded-xl bg-slate-900/50 border border-white/10 flex flex-wrap gap-3 items-end">
                    <div class="flex-1 min-w-[100px]">
                        <label class="text-[10px] text-slate-500 block mb-1">이름</label>
                        <input v-bind="mobileInputAttrs" v-model="newName" type="text" placeholder="phpMyAdmin"
                               class="w-full bg-slate-950 border border-white/10 rounded-lg px-3 py-2 text-sm text-white outline-none focus:border-cyan-400">
                    </div>
                    <div class="flex-[2] min-w-[160px]">
                        <label class="text-[10px] text-slate-500 block mb-1">주소</label>
                        <input v-bind="mobileInputAttrs" v-model="newUrl" type="url" placeholder="http://localhost/..."
                               class="w-full bg-slate-950 border border-white/10 rounded-lg px-3 py-2 text-sm text-white outline-none focus:border-cyan-400">
                    </div>
                    <button type="submit" class="clickable bg-cyan-600 hover:bg-cyan-500 text-white px-5 py-2 rounded-lg text-sm font-medium">+ 연결 추가</button>
                </form>
            </section>
            <aside class="flex flex-col gap-5">
                <div class="glass rounded-2xl p-5 flex-1 min-h-[200px] flex flex-col">
                    <h2 class="text-sm font-semibold text-white/80 flex items-center gap-2 mb-3">
                        <i class="fas fa-sticky-note text-cyan-400"></i>야간 메모장
                    </h2>
                    <textarea v-bind="mobileInputAttrs" v-model="quickNote" @input="saveNote"
                              class="flex-1 w-full bg-transparent text-white/90 resize-none outline-none text-sm leading-relaxed min-h-[140px]"
                              placeholder="새벽 아이디어..."></textarea>
                </div>
                <a :href="toolkitUrl" :target="linkTarget(toolkitUrl)"
                   class="launcher-link text-center text-[10px] text-slate-500 hover:text-cyan-300 py-1">
                    NZ 치트키 아이디어 로드맵 →
                </a>
            </aside>
        </div>

        <section class="glass rounded-2xl p-5 sm:p-6 mb-6 border border-violet-500/20 relative z-10">
            <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
                <h2 class="text-xl font-semibold text-white flex items-center gap-2">
                    <i class="fas fa-pen-fancy text-violet-400"></i>
                    블로그 글쓰기
                    <span class="text-[10px] font-normal text-violet-300/90 border border-violet-500/35 px-2 py-0.5 rounded-full">ChatGPT</span>
                </h2>
                <div class="flex flex-wrap gap-2 text-xs">
                    <a :href="adminLoginUrl" target="_blank" rel="noopener noreferrer"
                       class="clickable px-3 py-1.5 rounded-lg border border-cyan-500/30 text-cyan-300 hover:bg-cyan-500/10">관리자 로그인 (서버)</a>
                    <a :href="adminPostsUrl" target="_blank" rel="noopener noreferrer"
                       class="clickable px-3 py-1.5 rounded-lg border border-white/10 text-slate-400 hover:text-white">글 관리</a>
                </div>
            </div>
            <p v-if="dashOnLocal" class="text-xs text-amber-200/85 mb-2 px-3 py-2 rounded-lg border border-amber-500/30 bg-amber-950/25">
                로컬 대시보드 모드입니다. <strong>관리자 로그인·블로그 API</strong>는
                <a :href="adminLoginUrl" target="_blank" rel="noopener noreferrer" class="text-cyan-300 underline">heldbygrace.life</a>
                운영 서버에 연결됩니다. 먼저 새 탭에서 로그인한 뒤 이 페이지에서 초안·저장을 사용하세요.
            </p>
            <p class="text-xs text-slate-500 mb-4 leading-relaxed">
                먼저 <strong class="text-slate-400">관리자 로그인 (서버)</strong> 후 사용하세요. 「ChatGPT 초안」은 서버 API 키가 있으면 자동 생성, 없으면 프롬프트를 복사해 chatgpt.com 에 붙여넣습니다.
            </p>
            <p v-if="blogMsg" class="text-xs mb-3 px-3 py-2 rounded-lg border"
               :class="blogMsgErr ? 'text-rose-200 border-rose-500/30 bg-rose-950/30' : 'text-emerald-200 border-emerald-500/25 bg-emerald-950/25'">{{ blogMsg }}</p>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <label class="block lg:col-span-2">
                    <span class="text-[10px] text-slate-500 uppercase tracking-wider">카테고리</span>
                    <select v-bind="mobileInputAttrs" v-model="blogForm.category"
                            class="mt-1 w-full bg-slate-950/80 border border-violet-500/25 rounded-lg px-3 py-2 text-sm text-white outline-none focus:border-violet-400">
                        <option v-for="c in blogCategories" :key="c" :value="c">{{ c }}</option>
                    </select>
                </label>
                <label class="block lg:col-span-2">
                    <span class="text-[10px] text-slate-500 uppercase tracking-wider">AI 주제·메모 (선택)</span>
                    <input v-bind="mobileInputAttrs" v-model="blogForm.ai_prompt" type="text" placeholder="예: 오클랜드 주일, 요한복음 3:16, 오늘 배운 단어 run"
                           class="mt-1 w-full bg-slate-950/80 border border-white/10 rounded-lg px-3 py-2 text-sm text-white outline-none focus:border-violet-400/50">
                </label>
                <label class="block">
                    <span class="text-[10px] text-slate-500 uppercase tracking-wider">제목</span>
                    <input v-bind="mobileInputAttrs" v-model="blogForm.title" type="text" class="mt-1 w-full bg-slate-950/80 border border-white/10 rounded-lg px-3 py-2 text-sm text-white outline-none focus:border-violet-400/50">
                </label>
                <label class="block">
                    <span class="text-[10px] text-slate-500 uppercase tracking-wider">부제</span>
                    <input v-bind="mobileInputAttrs" v-model="blogForm.subtitle" type="text" class="mt-1 w-full bg-slate-950/80 border border-white/10 rounded-lg px-3 py-2 text-sm text-white outline-none focus:border-violet-400/50">
                </label>
                <label class="block lg:col-span-2">
                    <span class="text-[10px] text-slate-500 uppercase tracking-wider">본문</span>
                    <textarea v-bind="mobileInputAttrs" v-model="blogForm.body" rows="8"
                              class="mt-1 w-full bg-slate-950/80 border border-white/10 rounded-lg px-3 py-2 text-sm text-white leading-relaxed outline-none focus:border-violet-400/50 resize-y min-h-[10rem]"></textarea>
                </label>
                <label class="block">
                    <span class="text-[10px] text-slate-500 uppercase tracking-wider">오늘의 단어</span>
                    <input v-bind="mobileInputAttrs" v-model="blogForm.word_of_day" type="text" class="mt-1 w-full bg-slate-950/80 border border-white/10 rounded-lg px-3 py-2 text-sm text-white outline-none focus:border-violet-400/50">
                </label>
                <label class="block">
                    <span class="text-[10px] text-slate-500 uppercase tracking-wider">오늘의 단어 설명</span>
                    <input v-bind="mobileInputAttrs" v-model="blogForm.word_description" type="text" class="mt-1 w-full bg-slate-950/80 border border-white/10 rounded-lg px-3 py-2 text-sm text-white outline-none focus:border-violet-400/50">
                </label>
            </div>
            <div class="flex flex-wrap gap-2 mt-4">
                <button type="button" class="clickable px-4 py-2 rounded-lg text-sm font-semibold bg-violet-600/90 hover:bg-violet-500 text-white disabled:opacity-50"
                        :disabled="!!blogBusy" @click="generateBlogAi">
                    <i class="fas fa-wand-magic-sparkles mr-1"></i>{{ blogBusy === 'ai' ? '생성 중…' : 'ChatGPT 초안' }}
                </button>
                <button type="button" class="clickable px-4 py-2 rounded-lg text-sm border border-violet-500/35 text-violet-200 hover:bg-violet-500/10 disabled:opacity-50"
                        :disabled="!!blogBusy" @click="copyBlogChatGptPrompt">
                    <i class="fas fa-copy mr-1"></i>프롬프트 복사
                </button>
                <button type="button" class="clickable px-4 py-2 rounded-lg text-sm border border-white/15 text-slate-300 hover:bg-white/5 disabled:opacity-50"
                        :disabled="!!blogBusy" @click="pasteBlogJsonFromClipboard">
                    <i class="fas fa-paste mr-1"></i>JSON 붙여넣기
                </button>
                <button type="button" class="clickable px-4 py-2 rounded-lg text-sm font-semibold bg-cyan-600/90 hover:bg-cyan-500 text-white disabled:opacity-50"
                        :disabled="!!blogBusy" @click="saveBlogPost">
                    <i class="fas fa-cloud-arrow-up mr-1"></i>{{ blogBusy === 'save' ? '저장 중…' : '블로그에 저장' }}
                </button>
            </div>
        </section>

        <p class="text-xs text-slate-500 uppercase tracking-widest mb-3 px-1">퀵 링크 · 힐링</p>
        <main class="grid grid-cols-1 lg:grid-cols-2 gap-5 sm:gap-6">
            <section class="glass rounded-2xl p-5 sm:p-6 lg:col-span-2">
                <h2 class="text-lg font-semibold text-white flex items-center gap-2 mb-4">
                    <i class="fas fa-compass text-cyan-400"></i>
                    교민 필수 퀵 내비
                </h2>
                <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
                    <a href="https://www.immigration.govt.nz/" target="_blank" rel="noopener noreferrer"
                       class="clickable nav-tile glass-strong rounded-2xl p-6 flex flex-col items-center text-center border border-white/5 transition duration-300">
                        <span class="text-4xl mb-3 text-cyan-400"><i class="fas fa-passport"></i></span>
                        <span class="font-bold text-white">뉴질랜드 이민성</span>
                        <span class="text-[10px] text-slate-500 mt-2">immigration.govt.nz</span>
                    </a>
                    <a href="https://www.trademe.co.nz/" target="_blank" rel="noopener noreferrer"
                       class="clickable nav-tile glass-strong rounded-2xl p-6 flex flex-col items-center text-center border border-white/5 transition duration-300">
                        <span class="text-4xl mb-3 text-amber-400"><i class="fas fa-tags"></i></span>
                        <span class="font-bold text-white">Trade Me</span>
                        <span class="text-[10px] text-slate-500 mt-2">trademe.co.nz</span>
                    </a>
                    <a href="https://4989.nz/" target="_blank" rel="noopener noreferrer"
                       class="clickable nav-tile glass-strong rounded-2xl p-6 flex flex-col items-center text-center border border-emerald-500/25 transition duration-300">
                        <span class="text-4xl mb-3 text-emerald-400"><i class="fas fa-store"></i></span>
                        <span class="font-bold text-white">4989 벼룩시장</span>
                        <span class="text-[10px] text-slate-500 mt-2">4989.nz · 교민 중고</span>
                    </a>
                    <a href="https://www.aucklandcouncil.govt.nz/en/rubbish-recycling/rubbish-recycling-collections/rubbish-recycling-collection-days.html" target="_blank" rel="noopener noreferrer"
                       class="clickable nav-tile glass-strong rounded-2xl p-6 flex flex-col items-center text-center border border-white/5 transition duration-300">
                        <span class="text-4xl mb-3 text-emerald-400"><i class="fas fa-landmark"></i></span>
                        <span class="font-bold text-white">오클랜드 카운실</span>
                        <span class="text-[10px] text-slate-500 mt-2">수거일 · 민원</span>
                    </a>
                    <a href="https://overseas.mofa.go.kr/nz-ko/index.do" target="_blank" rel="noopener noreferrer"
                       class="clickable nav-tile glass-strong rounded-2xl p-6 flex flex-col items-center text-center border border-white/5 transition duration-300">
                        <span class="text-4xl mb-3 text-rose-400"><i class="fas fa-flag"></i></span>
                        <span class="font-bold text-white">주뉴질랜드 대사관</span>
                        <span class="text-[10px] text-slate-500 mt-2">mofa.go.kr / NZ</span>
                    </a>
                    <a href="https://yewon.co.nz/" target="_blank" rel="noopener noreferrer"
                       class="clickable nav-tile glass-strong rounded-2xl p-6 flex flex-col items-center text-center border border-violet-500/20 transition duration-300">
                        <span class="text-4xl mb-3 text-violet-300"><i class="fas fa-church"></i></span>
                        <span class="font-bold text-white">오클랜드 예원교회</span>
                        <span class="text-[10px] text-slate-500 mt-2">yewon.co.nz</span>
                    </a>
                </div>
            </section>

            <section class="heal-glass rounded-2xl p-5 sm:p-6 lg:col-span-2 mt-2">
                <div class="flex flex-col lg:flex-row lg:items-start gap-6">
                    <div class="flex-1 min-w-0">
                        <h2 class="text-lg font-semibold text-emerald-200/95 flex items-center gap-2 mb-1">
                            <i class="fas fa-moon text-emerald-400/90"></i>
                            새벽 힐링 · 모기 퇴치
                        </h2>
                        <p class="text-xs text-slate-500 mb-5">잠 설친 새벽, 귓가를 비우는 가상 사운드 존</p>
                        <div class="mosquito-glow rounded-2xl border border-emerald-500/20 bg-emerald-950/25 p-4 sm:p-5 transition-all duration-500"
                             :class="{ 'is-playing': mosquitoPlaying }">
                            <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
                                <div>
                                    <p class="text-sm font-medium text-emerald-100">
                                        {{ mosquitoPlaying ? '모기가 싫어하는 20kHz 주파수 재생 중' : '모기 퇴치 주파수 (가상)' }}
                                    </p>
                                    <p class="text-[10px] text-emerald-400/60 mt-0.5">※ 스피커 한계로 실제 20kHz는 약할 수 있어요 · 애니메이션 + 가상 톤</p>
                                </div>
                                <button type="button" class="clickable flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-semibold transition-all"
                                        :class="mosquitoPlaying ? 'bg-emerald-500/90 text-white shadow-lg shadow-emerald-500/30' : 'bg-slate-800/80 text-emerald-300 border border-emerald-500/30 hover:bg-emerald-900/40'"
                                        @click="toggleMosquito">
                                    <i :class="mosquitoPlaying ? 'fas fa-stop' : 'fas fa-play'"></i>
                                    {{ mosquitoPlaying ? '정지' : '재생' }}
                                </button>
                            </div>
                            <div class="waveform flex items-end justify-center gap-1 h-16 px-2 rounded-xl bg-black/25 border border-emerald-500/10"
                                 :class="{ 'is-playing': mosquitoPlaying }">
                                <span v-for="n in 20" :key="n" class="wave-bar"></span>
                            </div>
                        </div>
                        <div v-if="mosquitoTipMemo" class="mt-4 p-3.5 rounded-xl border border-emerald-500/25 bg-emerald-950/30">
                            <p class="text-[10px] text-emerald-400/90 uppercase tracking-wider mb-1.5 flex items-center gap-1.5">
                                <i class="fas fa-bookmark text-[9px]"></i>내 모기소리 퇴치법
                            </p>
                            <p class="text-sm font-semibold text-emerald-100 mb-1">{{ mosquitoTipMemo.title }}</p>
                            <p class="text-xs text-white/75 whitespace-pre-wrap leading-relaxed max-h-32 overflow-y-auto">{{ mosquitoTipMemo.body }}</p>
                            <button type="button" class="clickable text-[10px] text-cyan-400/80 mt-2 hover:text-cyan-300" @click="selectMemo(mosquitoTipMemo)">메모 수정 →</button>
                        </div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-xs text-violet-300/70 uppercase tracking-wider mb-4">모기 퇴치 · 새벽 힐링 사운드</p>
                        <div v-for="grp in asmrGroups" :key="grp.label" class="mb-4 last:mb-0">
                            <p class="text-[10px] text-slate-500 mb-2 pl-0.5">{{ grp.label }}</p>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                <a v-for="a in grp.links" :key="a.id"
                                   :href="a.url === '#mosquito-player' ? undefined : a.url"
                                   :target="a.url === '#mosquito-player' ? undefined : '_blank'"
                                   rel="noopener noreferrer"
                                   class="clickable asmr-btn flex items-center gap-3 rounded-xl border border-white/8 bg-slate-900/40 px-3 py-2.5 transition duration-300"
                                   :class="a.url === '#mosquito-player' ? 'border-emerald-500/30 bg-emerald-950/25' : ''"
                                   @click="a.url === '#mosquito-player' ? ($event.preventDefault(), toggleMosquito()) : null">
                                    <span class="text-xl shrink-0">{{ a.emoji }}</span>
                                    <span class="min-w-0 text-left flex-1">
                                        <span class="block text-sm font-medium text-white/90 truncate">{{ a.name }}</span>
                                        <span class="block text-[10px] text-slate-500 truncate">{{ a.hint }}</span>
                                    </span>
                                    <i class="fas fa-play-circle text-emerald-500/50 text-sm shrink-0"></i>
                                </a>
                            </div>
                        </div>
                        <p class="text-[10px] text-slate-600 mt-4 leading-relaxed">빗소리·파도·말씀 등으로 귀 기울이기 · 유튜브 새 탭 · 볼륨 낮게</p>
                    </div>
                </div>
            </section>
        </main>

        <!-- 오클랜드 생활 밀착형 라이브 알리미: 마트 마감 · 영사관 -->
        <section class="mt-8 mb-6 relative z-10" aria-label="오클랜드 생활 라이브 알리미">
            <p class="text-xs text-slate-500 uppercase tracking-widest mb-3 px-1">오클랜드 생활 밀착형 라이브 알리미</p>
            <div class="grid grid-cols-1 xl:grid-cols-2 gap-5 sm:gap-6">
                <div class="mart-close-card rounded-2xl p-5 sm:p-6"
                     :class="{ 'is-closed': martCountdown.state !== 'open' }">
                    <h2 class="text-lg font-bold text-white flex items-center gap-2 mb-1">
                        <i class="fas fa-clock text-sky-400"></i>
                        오늘 마감 몇 시지?
                    </h2>
                    <p class="text-[11px] text-slate-400 mb-3">대형마트 영업 · 공휴일 휴무 경고</p>

                    <div v-if="martHolidayAlert" class="mb-4 px-3 py-2.5 rounded-xl border text-xs leading-relaxed"
                         :class="martHolidayAlert.level === 'danger'
                           ? 'bg-rose-950/40 border-rose-500/40 text-rose-200'
                           : 'bg-amber-950/35 border-amber-500/35 text-amber-100'">
                        {{ martHolidayAlert.emoji }} {{ martHolidayAlert.text }}
                    </div>

                    <label class="text-[10px] text-slate-500 block mb-1">자주 가는 지점</label>
                    <select v-bind="mobileInputAttrs" v-model="activeMartId" @change="persistMartStores"
                            class="w-full mb-3 bg-slate-950/80 border border-sky-500/25 rounded-lg px-3 py-2 text-sm text-white outline-none focus:border-sky-400">
                        <option v-for="s in martStores" :key="s.id" :value="s.id">{{ s.name }}</option>
                    </select>

                    <div class="flex flex-wrap items-end gap-3 mb-4">
                        <label class="text-[10px] text-slate-500">
                            마감 시각
                            <input v-bind="mobileInputAttrs" type="time" v-model="activeMartCloseTime" @change="onMartCloseTimeChange"
                                   class="block mt-0.5 bg-slate-950/80 border border-white/10 rounded-lg px-2 py-1.5 text-sm text-white font-mono outline-none focus:border-sky-400/50">
                        </label>
                        <button type="button" class="clickable text-[10px] px-2.5 py-1.5 rounded-lg border border-white/10 text-slate-400 hover:text-white"
                                @click="resetMartCloseDefault">기본 22:00</button>
                    </div>

                    <p class="text-sm text-sky-200/90 mb-1">{{ martCountdown.headline }}</p>
                    <p class="mart-close-timer text-4xl sm:text-5xl font-black text-white text-center py-3">
                        {{ martCountdown.display }}
                    </p>
                    <p class="text-center text-[11px] text-slate-500">{{ martCountdown.sub }}</p>
                </div>

                <div class="consulate-live rounded-2xl p-5 sm:p-6 flex flex-col"
                     :class="consulateStatus.open ? 'is-open' : 'is-closed'">
                    <div class="flex items-center gap-3 mb-4">
                        <span class="consulate-lamp shrink-0" :class="consulateStatus.open ? 'is-open' : 'is-closed'" aria-hidden="true"></span>
                        <div>
                            <h2 class="text-lg font-bold text-white">오늘 영사관 문 여나?</h2>
                            <p class="text-[11px] text-slate-400">주뉴질랜드 대한민국 대사관 · 오클랜드 분관 민원</p>
                        </div>
                    </div>
                    <p class="text-xl sm:text-2xl font-black mb-2"
                       :class="consulateStatus.open ? 'text-emerald-300' : 'text-rose-300'">
                        {{ consulateStatus.label }}
                    </p>
                    <p class="text-sm text-slate-300 leading-relaxed flex-1">{{ consulateStatus.reason }}</p>
                    <p class="text-[10px] text-slate-500 mt-4 pt-3 border-t border-white/10">
                        평일 09:00–16:00 · 한국 국경일(삼일절·광복절·개천절·한글날) 및 NZ 공휴일 휴무
                    </p>
                    <a href="https://overseas.mofa.go.kr/nz-ko/index.do" target="_blank" rel="noopener noreferrer"
                       class="clickable mt-3 text-xs text-center py-2 rounded-lg border border-white/10 text-slate-400 hover:text-cyan-300 hover:border-cyan-500/30">
                        mofa.go.kr/nz-ko 공식 안내 →
                    </a>
                </div>
            </div>
        </section>

        <p class="text-xs text-slate-500 uppercase tracking-widest mb-3 px-1 mt-8">교민 서바이벌 허브 · 2탄</p>
        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-5 sm:gap-6 mb-8">
            <section class="fuel-radar-card rounded-2xl p-5 sm:p-6 lg:col-span-1" aria-label="유가 레이더">
                <h2 class="text-lg font-bold text-white flex items-center gap-2 mb-1">
                    <i class="fas fa-gas-pump text-amber-400"></i>
                    오늘 기름 넣는 날?
                </h2>
                <p class="text-[11px] text-slate-400 mb-3">91 · Diesel 입력 → 추세 {{ fuelTrend.arrow }}</p>
                <div class="grid grid-cols-2 gap-2 mb-3">
                    <label class="text-[10px] text-slate-500">
                        91 ($/L)
                        <input v-bind="mobileInputAttrs" type="number" step="0.1" min="0" v-model.number="fuelPrices.petrol91"
                               @change="saveFuelPrices" class="block w-full mt-0.5 bg-slate-950/80 border border-amber-500/30 rounded-lg px-2 py-1.5 text-sm text-white font-mono">
                    </label>
                    <label class="text-[10px] text-slate-500">
                        Diesel ($/L)
                        <input v-bind="mobileInputAttrs" type="number" step="0.1" min="0" v-model.number="fuelPrices.diesel"
                               @change="saveFuelPrices" class="block w-full mt-0.5 bg-slate-950/80 border border-amber-500/30 rounded-lg px-2 py-1.5 text-sm text-white font-mono">
                    </label>
                </div>
                <p class="text-sm font-semibold mb-3" :class="fuelTrend.colorClass">
                    {{ fuelTrend.arrow }} {{ fuelTrend.label }}
                    <span class="text-slate-400 font-normal text-xs block mt-0.5">{{ fuelTrend.detail }}</span>
                </p>
                <div class="flex flex-wrap gap-2">
                    <a v-for="l in fuelQuickLinks" :key="l.id" :href="l.url" target="_blank" rel="noopener noreferrer"
                       class="clickable text-[10px] px-2.5 py-1.5 rounded-lg border border-amber-500/30 text-amber-200/90 hover:bg-amber-950/40">
                        {{ l.name }}
                    </a>
                </div>
            </section>

            <section class="glass rounded-2xl p-5 sm:p-6 border border-violet-500/20" aria-label="주말 야외 지수">
                <h2 class="text-lg font-bold text-white flex items-center gap-2 mb-1">
                    <i class="fas fa-wind text-sky-300"></i>
                    이번 주말 날씨는?
                </h2>
                <p class="text-[11px] text-slate-400 mb-4">풍속 + 강수 → 낚시 · 바베큐 지수</p>
                <div v-for="w in weekendScores" :key="w.key"
                     class="weekend-score-card rounded-xl border border-white/10 px-3 py-3 mb-2 last:mb-0"
                     :class="'is-' + w.tier">
                    <p class="text-sm font-bold text-white">{{ w.emoji }} {{ w.title }}</p>
                    <p class="text-lg font-black mt-1" :style="{ color: w.color }">{{ w.score }}% · {{ w.grade }}</p>
                    <p class="text-[10px] text-slate-400 mt-1">바람 {{ w.wind }}km/h · 강수 {{ w.rain }}% · {{ w.hint }}</p>
                </div>
            </section>

            <section class="holiday-dday-card rounded-2xl p-5 sm:p-6" aria-label="렌트비 D-Day">
                <h2 class="text-lg font-bold text-white flex items-center gap-2 mb-1">
                    <i class="fas fa-house text-rose-300"></i>
                    렌트비 D-Day
                </h2>
                <p class="text-[11px] text-slate-400 mb-3">주당 이체 요일 · 다음 출금까지</p>
                <label class="text-[10px] text-slate-500 block mb-1">주당 렌트 (NZD)</label>
                <input v-bind="mobileInputAttrs" type="number" step="1" min="0" v-model.number="rentWeeklyAmount"
                       @change="persistRent" class="w-full mb-2 bg-slate-950/80 border border-white/10 rounded-lg px-3 py-2 text-white font-mono text-sm">
                <label class="text-[10px] text-slate-500 block mb-1">이체 요일</label>
                <select v-bind="mobileInputAttrs" v-model.number="rentWeekday" @change="persistRent"
                        class="w-full mb-4 bg-slate-950/80 border border-violet-500/25 rounded-lg px-3 py-2 text-sm text-white">
                    <option v-for="d in rentWeekdayOptions" :key="d.value" :value="d.value">{{ d.label }}</option>
                </select>
                <p class="holiday-dday-num text-5xl font-black text-center text-transparent bg-clip-text bg-gradient-to-br from-rose-200 to-violet-300">
                    {{ rentDDay.label }}
                </p>
                <p class="text-center text-sm text-slate-300 mt-2">{{ rentDDay.dateLabel }}</p>
                <p class="text-center text-xs text-amber-200/80 mt-1">${{ rentWeeklyAmount }} / week</p>
            </section>
        </div>

        <p class="text-xs text-slate-500 uppercase tracking-widest mb-3 px-1">교민 서바이벌 허브 · 4차</p>
        <div class="grid grid-cols-1 xl:grid-cols-2 gap-5 sm:gap-6 mb-8">
            <section class="k-mart-sale-card rounded-2xl p-5 sm:p-6" aria-label="한인마트 특가 요약장">
                <h2 class="text-lg font-bold text-white flex items-center gap-2 mb-1">
                    <i class="fas fa-store text-rose-300"></i>
                    한인마트 특가 요약장
                </h2>
                <p class="text-[11px] text-slate-400 mb-4">마트별 이번 주 세일 메모 · localStorage 자동 저장</p>
                <div class="flex flex-wrap gap-2 mb-4">
                    <a v-for="m in koreanMartLinks" :key="m.id" :href="m.url" target="_blank" rel="noopener noreferrer"
                       class="clickable text-[10px] px-2.5 py-1.5 rounded-lg border border-rose-500/35 text-rose-100/90 hover:bg-rose-950/50 inline-flex items-center gap-1">
                        <span>{{ m.emoji }}</span> {{ m.name }}
                    </a>
                </div>
                <div v-for="m in koreanMartLinks" :key="'memo-' + m.id"
                     class="widget-sub-card p-3 mb-3 last:mb-0">
                    <div class="flex items-center justify-between gap-2 mb-1.5">
                        <p class="text-xs font-bold text-white">{{ m.emoji }} {{ m.name }}</p>
                        <span class="text-[9px] text-slate-500 shrink-0">{{ m.area }}</span>
                    </div>
                    <textarea v-bind="mobileInputAttrs" v-model="koreanMartSales[m.id]"
                              @input="persistKoreanMartSales"
                              :placeholder="m.placeholder"
                              class="k-mart-memo w-full bg-slate-950/80 border border-rose-500/25 rounded-lg px-2.5 py-2 text-slate-200 outline-none focus:border-rose-400/50"></textarea>
                </div>
                <p class="text-[9px] text-slate-500 mt-2">※ 카탈로그·SNS 특가는 직접 확인 · 메모는 이 기기에만 저장됩니다.</p>
            </section>

            <section class="ird-tax-card rounded-2xl p-5 sm:p-6" aria-label="IRD 미니 Tax 계산기">
                <h2 class="text-lg font-bold text-white flex items-center gap-2 mb-1">
                    <i class="fas fa-calculator text-sky-300"></i>
                    IRD 미니 Tax 계산기
                </h2>
                <p class="text-[11px] text-slate-400 mb-4">연봉(세전) 기준 · 2024/25 구간세 + ACC · 대략적 참고용</p>
                <label class="text-[10px] text-slate-500 block mb-1">연간 총소득 Gross (NZD)</label>
                <input v-bind="mobileInputAttrs" type="number" step="1000" min="0" v-model.number="taxAnnualGross"
                       class="w-full mb-3 bg-slate-950/80 border border-sky-500/30 rounded-lg px-3 py-2 text-white font-mono text-sm">
                <label class="text-[10px] text-slate-500 block mb-1">KiwiSaver 직원 부담 (%)</label>
                <input v-bind="mobileInputAttrs" type="number" step="0.5" min="0" max="10" v-model.number="taxKiwiSaverPct"
                       class="w-full mb-4 bg-slate-950/80 border border-white/10 rounded-lg px-3 py-2 text-white font-mono text-sm">
                <div class="grid grid-cols-2 gap-3 mb-3 text-center">
                    <div class="widget-sub-card px-2 py-2.5">
                        <p class="text-[9px] text-slate-500 uppercase">소득세 (연)</p>
                        <p class="text-lg font-black text-rose-200 font-mono">${{ irdTaxResult.incomeTax.toLocaleString() }}</p>
                    </div>
                    <div class="widget-sub-card px-2 py-2.5">
                        <p class="text-[9px] text-slate-500 uppercase">ACC (연)</p>
                        <p class="text-lg font-black text-amber-200/90 font-mono">${{ irdTaxResult.accLevy.toLocaleString() }}</p>
                    </div>
                </div>
                <p class="ird-tax-takehome text-4xl sm:text-5xl font-black text-center text-transparent bg-clip-text bg-gradient-to-r from-emerald-200 to-cyan-300">
                    ${{ irdTaxResult.weeklyTakeHome.toLocaleString() }}
                </p>
                <p class="text-center text-xs text-slate-400 mt-1">주당 실수령 (Take-home · 대략)</p>
                <p class="text-center text-[10px] text-slate-500 mt-2">
                    연 실수령 ${{ irdTaxResult.annualTakeHome.toLocaleString() }}
                    · 실효 {{ irdTaxResult.effectiveRate }}%
                    <span v-if="taxKiwiSaverPct > 0"> · KiwiSaver {{ taxKiwiSaverPct }}% 반영</span>
                </p>
                <p class="text-[9px] text-amber-200/70 mt-3 text-center">{{ irdTaxResult.disclaimer }}</p>
            </section>
        </div>

        <p class="text-xs text-slate-500 uppercase tracking-widest mb-3 px-1">교민 서바이벌 허브 · 5탄 (완결판)</p>
        <div class="grid grid-cols-1 xl:grid-cols-2 gap-5 sm:gap-6 mb-6">
            <section class="property-tracker-card rounded-2xl p-5 sm:p-6 xl:col-span-2" aria-label="집값 트래커">
                <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4">
                    <div>
                        <h2 class="text-lg font-bold text-white flex items-center gap-2 mb-1">
                            <i class="fas fa-house-chimney text-indigo-300"></i>
                            오클랜드 집값 트래커
                        </h2>
                        <p class="text-[11px] text-slate-400">RBNZ OCR · 관심 동네 Median · 대출 시뮬 (참고용)</p>
                    </div>
                    <p class="ocr-neon-badge text-sm font-black shrink-0" :class="'is-' + propertyOcr.status">
                        {{ propertyOcrNeonLabel }}
                    </p>
                </div>
                <div class="flex flex-wrap gap-2 mb-4">
                    <a v-for="l in propertyQuickLinks" :key="l.id" :href="l.url" target="_blank" rel="noopener noreferrer"
                       class="clickable text-[10px] px-2.5 py-1.5 rounded-lg border border-indigo-500/35 text-indigo-200/90 hover:bg-indigo-950/50">
                        {{ l.name }}
                    </a>
                </div>
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-4">
                    <label class="text-[10px] text-slate-500">
                        OCR (%)
                        <input v-bind="mobileInputAttrs" type="number" step="0.25" min="0" max="15" v-model.number="propertyOcr.rate"
                               @change="persistProperty" class="block w-full mt-0.5 bg-slate-950/80 border border-indigo-500/30 rounded-lg px-2 py-1.5 text-sm text-white font-mono">
                    </label>
                    <label class="text-[10px] text-slate-500">
                        OCR 상태
                        <select v-bind="mobileInputAttrs" v-model="propertyOcr.status" @change="persistProperty"
                                class="block w-full mt-0.5 bg-slate-950/80 border border-white/10 rounded-lg px-2 py-1.5 text-xs text-white">
                            <option value="hold">동결</option>
                            <option value="cut">인하</option>
                            <option value="hike">인상</option>
                        </select>
                    </label>
                    <label class="text-[10px] text-slate-500">
                        계약금 (%)
                        <input v-bind="mobileInputAttrs" type="number" step="5" min="5" max="50" v-model.number="propertySim.depositPct"
                               @change="persistProperty" class="block w-full mt-0.5 bg-slate-950/80 border border-white/10 rounded-lg px-2 py-1.5 text-sm text-white font-mono">
                    </label>
                    <label class="text-[10px] text-slate-500">
                        대출 (년)
                        <input v-bind="mobileInputAttrs" type="number" step="1" min="5" max="30" v-model.number="propertySim.years"
                               @change="persistProperty" class="block w-full mt-0.5 bg-slate-950/80 border border-white/10 rounded-lg px-2 py-1.5 text-sm text-white font-mono">
                    </label>
                </div>
                <p class="text-xs text-indigo-200/90 mb-3 font-semibold">🏠 {{ propertyNorthShoreSummary.label }}</p>
                <p class="text-[10px] text-slate-400 mb-4">{{ propertyNorthShoreSummary.memo }}</p>
                <div v-for="area in propertyAreas" :key="area.id"
                     class="widget-sub-card p-3 mb-3 last:mb-0">
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mb-2">
                        <label class="text-[10px] text-slate-500 sm:col-span-1">
                            동네
                            <input v-bind="mobileInputAttrs" type="text" v-model="area.name" @change="persistProperty"
                                   class="block w-full mt-0.5 bg-slate-950/80 border border-indigo-500/25 rounded-lg px-2 py-1.5 text-sm text-white">
                        </label>
                        <label class="text-[10px] text-slate-500">
                            Median ($)
                            <input v-bind="mobileInputAttrs" type="number" step="10000" min="0" v-model.number="area.medianPrice"
                                   @change="persistProperty" class="block w-full mt-0.5 bg-slate-950/80 border border-white/10 rounded-lg px-2 py-1.5 text-sm text-white font-mono">
                        </label>
                        <label class="text-[10px] text-slate-500">
                            목표 매매가 ($)
                            <input v-bind="mobileInputAttrs" type="number" step="10000" min="0" v-model.number="area.targetPrice"
                                   @change="persistProperty" class="block w-full mt-0.5 bg-slate-950/80 border border-white/10 rounded-lg px-2 py-1.5 text-sm text-white font-mono">
                        </label>
                    </div>
                    <textarea v-bind="mobileInputAttrs" v-model="area.trendNote" @input="persistProperty" rows="2"
                              placeholder="QV·Homes 메모 — 예: 지난달 대비 +2%"
                              class="w-full bg-slate-950/80 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-300"></textarea>
                    <p v-if="propertyAreaSim(area).price > 0" class="text-[10px] text-emerald-200/80 mt-2">
                        월 상환 약 ${{ propertyAreaSim(area).monthlyPay.toLocaleString() }}
                        · 금리 {{ propertyAreaSim(area).effectiveRate }}% (OCR+{{ propertySim.bankMargin }}%p)
                        · 대출 ${{ propertyAreaSim(area).loan.toLocaleString() }}
                    </p>
                </div>
                <button type="button" class="clickable text-[10px] px-3 py-1.5 rounded-lg border border-indigo-500/30 text-indigo-200 hover:bg-indigo-950/40"
                        @click="addPropertyArea">+ 동네 추가</button>
            </section>

            <section class="at-transit-card rounded-2xl p-5 sm:p-6" aria-label="AT 대중교통">
                <h2 class="text-lg font-bold text-white flex items-center gap-2 mb-1">
                    <i class="fas fa-bus text-rose-300"></i>
                    오늘 AT 버스/기차?
                </h2>
                <p class="text-[11px] text-slate-400 mb-3">
                    <span v-if="atTransitApiReady" class="text-emerald-400">API 연동 준비됨</span>
                    <span v-else>수동 등록 · 추후 Auckland Transport API 연동</span>
                </p>
                <div class="flex flex-wrap gap-2 mb-3">
                    <input v-bind="mobileInputAttrs" type="text" v-model="atNewRouteCode" placeholder="NX1, 82, Western Line"
                           class="flex-1 min-w-[8rem] bg-slate-950/80 border border-rose-500/25 rounded-lg px-2 py-1.5 text-sm text-white">
                    <select v-bind="mobileInputAttrs" v-model="atNewRouteType" class="bg-slate-950/80 border border-white/10 rounded-lg px-2 py-1.5 text-xs text-white">
                        <option value="bus">버스</option>
                        <option value="train">기차</option>
                    </select>
                    <button type="button" class="clickable text-[10px] px-3 py-1.5 rounded-lg bg-rose-600/80 text-white"
                            @click="addAtRoute">등록</button>
                </div>
                <div v-for="r in atRouteRows" :key="r.id"
                     class="at-route-row rounded-xl border border-white/10 px-3 py-3 mb-2 last:mb-0 flex flex-col sm:flex-row sm:items-center gap-2"
                     :class="{ 'is-alert': r.isAlert }">
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-bold text-white">{{ r.emoji }} {{ r.headline }}</p>
                        <p class="text-[10px] text-slate-400 mt-0.5">{{ r.sub }}</p>
                    </div>
                    <select v-bind="mobileInputAttrs" v-model="r.status" @change="updateAtRouteStatus(r)"
                            class="bg-slate-950/80 border border-white/10 rounded-lg px-2 py-1 text-xs text-white shrink-0">
                        <option v-for="opt in atStatusOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
                    </select>
                    <button type="button" class="clickable text-[10px] text-slate-500 hover:text-rose-300 shrink-0"
                            @click="removeAtRoute(r.id)">삭제</button>
                </div>
                <p v-if="!atRoutes.length" class="text-[10px] text-slate-500">자주 타는 노선을 등록하세요 (예: NX1, 82, Western Line)</p>
                <a href="https://at.govt.nz/" target="_blank" rel="noopener noreferrer"
                   class="clickable inline-block mt-3 text-[10px] text-rose-200/80 hover:text-rose-200">AT 공식 사이트 →</a>
            </section>

        </div>

        <section class="emergency-board rounded-2xl p-5 sm:p-8 mb-24" aria-label="긴급 연락처 안심 보드">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-5">
                <h2 class="text-xl font-black text-white flex items-center gap-2">
                    <span class="text-2xl" aria-hidden="true">🚨</span>
                    긴급 연락처 안심 보드
                </h2>
                <p class="text-[11px] text-rose-200/80 max-w-md">위급 시 탭 한 번 · 휴대폰에서 바로 전화 연결 (tel:)</p>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
                <a v-for="c in emergencyContacts" :key="c.id"
                   :href="'tel:' + c.tel"
                   class="emergency-tel-btn clickable flex flex-col gap-2 rounded-xl border border-rose-500/40 bg-rose-950/40 px-4 py-4 text-left">
                    <span class="text-2xl" aria-hidden="true">{{ c.emoji }}</span>
                    <span class="text-sm font-bold text-white">{{ c.name }}</span>
                    <span class="text-xs text-rose-100/90 font-mono">{{ c.display }}</span>
                    <span class="text-[10px] text-slate-400 leading-snug">{{ c.hint }}</span>
                </a>
            </div>
        </section>

        <aside class="ping-radar-fixed glass rounded-xl p-3 border text-left"
               :class="pingStatus.ok === true ? 'is-ok border-emerald-500/40' : pingStatus.ok === false ? 'is-bad border-rose-500/40' : 'border-white/15'"
               aria-label="네트워크 핑">
            <div class="flex items-center gap-2">
                <i class="fas fa-satellite-dish text-sm" :class="pingStatus.ok ? 'text-emerald-400' : 'text-rose-400'"></i>
                <span class="text-[10px] font-bold uppercase tracking-wide text-slate-400">Ping</span>
            </div>
            <p class="text-xs font-semibold text-white mt-1 leading-snug">{{ pingStatus.label }}</p>
            <p class="text-[10px] text-slate-500 mt-0.5">{{ pingStatus.detail }}</p>
            <button type="button" class="clickable mt-2 w-full text-[9px] py-1 rounded border border-white/10 text-slate-400 hover:text-cyan-300"
                    @click="runPingTest">다시 측정</button>
        </aside>
    </div>

    <script>
        const { createApp, ref, computed, watch, onMounted, onUnmounted } = Vue;

        const STORAGE_FX = 'dashFxV2';
        const STORAGE_FX_HIST = 'dashFxHistV1';
        const STORAGE_BIN = 'dashBinV2';
        const STORAGE_ENV = 'dashEnvV2';
        const STORAGE_NOTE = 'dashNoteV2';
        const STORAGE_MEMOS = 'dashMemosV2';
        const STORAGE_CUSTOM = 'dashCustomLinksV2';
        const STORAGE_NEON_THEME = 'dashNeonThemeV1';
        const STORAGE_GROCERY_WATCH = 'dashGroceryWatchV1';
        const STORAGE_MART_STORES = 'dashMartStoresV1';
        const STORAGE_FUEL = 'dashFuelV1';
        const STORAGE_RENT = 'dashRentV1';
        const STORAGE_KOREAN_MART_SALES = 'dashKoreanMartSalesV1';
        const STORAGE_PROPERTY = 'dashPropertyV1';
        const STORAGE_AT_ROUTES = 'dashAtRoutesV1';
        const STORAGE_SETTLEMENT_QUEST = 'dashSettlementQuestV1';
        const DEFAULT_RATE = 845;

        const DEFAULT_MART_STORES = [
            { id: 'cd-quay', name: 'Countdown Quay Street', closeHour: 22, closeMinute: 0 },
            { id: 'pak-albany', name: "PAK'nSAVE Albany", closeHour: 22, closeMinute: 0 },
            { id: 'nw-mt-roskill', name: 'New World Mt Roskill', closeHour: 22, closeMinute: 0 },
        ];

        const AUCKLAND_NEWS_TICKER = [
            '⚠️ Auckland Harbour Bridge — 체크 공식 교통 안내',
            '🌧️ Heavy Rain Watch — 주말 전 우산·장보기 미리',
            '🛣️ SH1 Southern Motorway — 야간 차선 공사 가능',
            '🚌 AT Metro — 공휴일 시간표 변경 확인',
            '🛒 Easter Sunday — 대형마트 휴무, 금요일 장보기 권장',
            '🌊 West Coast beaches — 고 swell 시 수영 주의',
        ];

        const FUEL_QUICK_LINKS = [
            { id: 'gaspy', name: 'Gaspy', url: 'https://www.gaspy.nz/' },
            { id: 'gull', name: 'Gull', url: 'https://www.gull.co.nz/' },
            { id: 'mobil', name: 'Mobil', url: 'https://www.mobil.co.nz/en-nz/promotions' },
            { id: 'bp', name: 'BP', url: 'https://www.bp.com/en_nz/new-zealand/home/products-and-services/promotions.html' },
        ];

        const SCHOOL_LEVEL_FILTERS = [
            { id: 'all', label: '전체', emoji: '📋' },
            { id: 'primary', label: '초등', emoji: '🎒' },
            { id: 'intermediate', label: '중등', emoji: '📘' },
            { id: 'secondary', label: '고등', emoji: '📗' },
            { id: 'tertiary', label: '대학', emoji: '🎓' },
        ];

        const SCHOOL_LEVEL_LABELS = {
            primary: '초등',
            intermediate: '중등',
            secondary: '고등',
            tertiary: '대학·청년',
        };

        const SCHOOL_CAMP_QUICK_LINKS = [
            { id: 'moe-terms', name: '교육부 방학일', url: 'https://www.education.govt.nz/term-dates-and-holidays/' },
            { id: 'council-stay', name: '카운슬 숙박 예약', url: 'https://www.aucklandcouncil.govt.nz/en/parks-recreation/stay-at-park/find-accommodation.html' },
            { id: 'council-venue', name: '카운슬 시설 대관', url: 'https://www.aucklandcouncil.govt.nz/en/parks-recreation/bookings-hire/book-venue.html' },
            { id: 'aut', name: 'AUT 학사일정', url: 'https://www.aut.ac.nz/study/study-dates' },
            { id: 'uoa', name: 'UoA 학사일정', url: 'https://www.auckland.ac.nz/en/students/student-support/administrative-services/key-dates.html' },
        ];

        /** NZ state school breaks — Auckland 기준 참고 (학교별 1–2일 차이 가능) */
        const NZ_SCHOOL_BREAKS = [
            { id: '2025-t1', nameKo: 'Term 1 방학', start: '2025-04-12', end: '2025-04-27', levels: ['primary', 'intermediate', 'secondary'] },
            { id: '2025-t2', nameKo: 'Term 2 방학 (윈터)', start: '2025-06-28', end: '2025-07-13', levels: ['primary', 'intermediate', 'secondary'] },
            { id: '2025-t3', nameKo: 'Term 3 방학 (스프링)', start: '2025-09-20', end: '2025-10-05', levels: ['primary', 'intermediate', 'secondary'] },
            { id: '2025-summer', nameKo: '여름 방학', start: '2025-12-20', end: '2026-02-02', levels: ['primary', 'intermediate', 'secondary', 'tertiary'] },
            { id: '2026-t1', nameKo: 'Term 1 방학', start: '2026-04-03', end: '2026-04-19', levels: ['primary', 'intermediate', 'secondary'] },
            { id: '2026-t2', nameKo: 'Term 2 방학', start: '2026-07-04', end: '2026-07-19', levels: ['primary', 'intermediate', 'secondary'] },
            { id: '2026-t3', nameKo: 'Term 3 방학', start: '2026-09-26', end: '2026-10-11', levels: ['primary', 'intermediate', 'secondary'] },
            { id: '2026-summer', nameKo: '여름 방학', start: '2026-12-18', end: '2027-02-01', levels: ['primary', 'intermediate', 'secondary', 'tertiary'] },
        ];

        const AUCKLAND_CAMP_VENUES = [
            {
                id: 'kiwanis',
                name: 'Kiwanis Camp',
                emoji: '🏕️',
                operator: 'council',
                area: 'Huia · Waitākere',
                sleep: '최대 약 45명',
                levels: ['primary', 'intermediate', 'secondary'],
                seasonTags: '텀 방학 · 학교 캠프 · Huia Lodge 복수 예약',
                hint: '오클랜드 카운슬 지역공원 숙박 · 22:00 소음 규정',
                url: 'https://www.aucklandcouncil.govt.nz/en/parks-recreation/stay-at-park/find-accommodation/accommodation-details/30.html',
            },
            {
                id: 'huia-lodge',
                name: 'Huia Lodge (Old Schoolhouse)',
                emoji: '🏫',
                operator: 'council',
                area: 'Huia · Manukau Harbour',
                sleep: '최대 약 30명',
                levels: ['primary', 'intermediate', 'secondary'],
                seasonTags: '해변 인접 · Kiwanis와 연계 수련회',
                hint: '카운슬 · 벙크룸 6실 · 12개월 전 예약 가능',
                url: 'https://www.aucklandcouncil.govt.nz/en/parks-recreation/stay-at-park/find-accommodation/accommodation-details/27.html',
            },
            {
                id: 'council-accommodation',
                name: '카운슬 지역공원 숙박 전체',
                emoji: '🌲',
                operator: 'council',
                area: '오클랜드 광역',
                sleep: '오박·롯지·캠핑',
                levels: ['primary', 'intermediate', 'secondary', 'tertiary'],
                seasonTags: '방학 · 홀리데이 · 단체 예약',
                hint: 'Tawharanui·Regional Park 등 목록·가격 일괄 확인',
                url: 'https://www.aucklandcouncil.govt.nz/en/parks-recreation/stay-at-park/find-accommodation.html',
            },
            {
                id: 'council-venue-hire',
                name: '카운슬 공원·시설 대관',
                emoji: '🏛️',
                operator: 'council',
                area: '전 지역 커뮤니티',
                sleep: '당일·야외 행사',
                levels: ['primary', 'intermediate', 'secondary', 'tertiary'],
                seasonTags: '체육대회 · 수련회 · 공연',
                hint: '실내·야외 시설 · 이벤트 허가·보험 확인',
                url: 'https://www.aucklandcouncil.govt.nz/en/parks-recreation/bookings-hire/book-venue.html',
            },
            {
                id: 'kokako',
                name: 'Kōkako Lodge',
                emoji: '🦜',
                operator: 'nearby',
                area: 'Hunua Ranges Regional Park',
                sleep: '최대 약 82베드',
                levels: ['primary', 'intermediate', 'secondary'],
                seasonTags: '아웃도어 교육 · 텀 방학 캠프',
                hint: 'Hunua 공원 내 · 단체 독점 예약 · 활동 프로그램',
                url: 'https://www.kokakolodge.org.nz/',
            },
            {
                id: 'ymca-shakespear',
                name: 'YMCA Shakespear Lodge',
                emoji: '⛺',
                operator: 'nearby',
                area: 'Shakespear Regional Park · Whangaparāoa',
                sleep: '최대 약 90명',
                levels: ['primary', 'intermediate', 'secondary', 'tertiary'],
                seasonTags: '학교 캠프 · 주말 수련 · 해변',
                hint: '공원 인근 · 주중/주말 요금 상이 · 활동 옵션',
                url: 'https://www.ymcanorth.org.nz/find-your-local/shakespear-lodge/venue-hire/',
            },
            {
                id: 'motu-moana',
                name: 'Motu Moana Scout Camp',
                emoji: '🌊',
                operator: 'nearby',
                area: 'Blockhouse Bay · West',
                sleep: '다동 로지',
                levels: ['primary', 'intermediate', 'secondary'],
                seasonTags: '학교·스카우트 캠프 · CBD 근접',
                hint: '학교 캠프·기업 연수 문의 · 해안 숲',
                url: 'https://motumoanacamp.co.nz/',
            },
            {
                id: 'merc',
                name: 'MERC (Marine Education)',
                emoji: '🐚',
                operator: 'nearby',
                area: 'Long Bay · North Shore',
                sleep: '당일·숙박 프로그램',
                levels: ['primary', 'intermediate', 'secondary'],
                seasonTags: '해양·환경 수련 · 방학 캠프',
                hint: '해변 현장학습 · 학교 단체 예약',
                url: 'https://www.merc.org.nz/',
            },
            {
                id: 'hillary-outdoor',
                name: 'Hillary Outdoors (Great Barrier)',
                emoji: '⛰️',
                operator: 'nearby',
                area: 'Great Barrier Island',
                sleep: '대형 아웃도어 센터',
                levels: ['intermediate', 'secondary', 'tertiary'],
                seasonTags: '고등·대학·리더십 캠프',
                hint: '장기 수련·모험 교육 · 섬 이동 일정 필수',
                url: 'https://www.hillaryoutdoors.co.nz/',
            },
            {
                id: 'birkenhead-leisure',
                name: 'Birkenhead Leisure Centre',
                emoji: '🏊',
                operator: 'council',
                area: 'North Shore',
                sleep: '당일 프로그램',
                levels: ['primary', 'intermediate', 'secondary'],
                seasonTags: '방학 스포츠 · 수영·체육',
                hint: '오클랜드 카운슬 레저 · 방학 캠프/클리닉',
                url: 'https://www.aucklandleisure.co.nz/venues/birkenhead-leisure-centre',
            },
        ];

        function parseIsoDateLocal(iso) {
            const p = iso.split('-').map(Number);
            const d = new Date(p[0], p[1] - 1, p[2]);
            d.setHours(0, 0, 0, 0);
            return d;
        }

        function formatDateRangeKo(startIso, endIso) {
            const s = parseIsoDateLocal(startIso);
            const e = parseIsoDateLocal(endIso);
            const opts = { month: 'short', day: 'numeric' };
            return s.toLocaleDateString('ko-NZ', opts) + ' – ' + e.toLocaleDateString('ko-NZ', opts);
        }

        function schoolBreakDaysLeft(startIso, today) {
            const start = parseIsoDateLocal(startIso);
            return Math.round((start.getTime() - today.getTime()) / 86400000);
        }

        function outdoorActivityScore(windKmh, rainPct, kind) {
            let s = 88 - rainPct * 0.85 - Math.max(0, windKmh - 10) * (kind === 'fishing' ? 2.2 : 1.6);
            if (rainPct >= 60) s -= 25;
            if (windKmh >= 35) s -= 20;
            return Math.round(Math.max(0, Math.min(100, s)));
        }

        function outdoorGrade(score) {
            if (score >= 78) return { grade: '최상', tier: 'great', color: '#4ade80' };
            if (score >= 55) return { grade: 'Good', tier: 'great', color: '#38bdf8' };
            if (score >= 35) return { grade: '보류', tier: 'meh', color: '#fbbf24' };
            return { grade: '취소 권장', tier: 'bad', color: '#f87171' };
        }

        function nextWeekdayDate(from, targetDow) {
            const d = new Date(from);
            d.setHours(0, 0, 0, 0);
            let diff = (targetDow - d.getDay() + 7) % 7;
            if (diff === 0) diff = 7;
            d.setDate(d.getDate() + diff);
            return d;
        }

        const DEFAULT_GROCERY_WATCH = [
            { id: 'avo', name: '아보카도', emoji: '🥑', targetPrice: 1.5, hitTarget: false },
            { id: 'beef-chuck', name: '소고기 척아이롤', emoji: '🥩', targetPrice: 22, hitTarget: false },
            { id: 'salmon', name: '연어', emoji: '🐟', targetPrice: 18, hitTarget: false },
        ];

        const MART_CATALOG_LINKS = [
            { id: 'woolworths', name: 'Woolworths', sub: '이번 주 Specials / 카탈로그', emoji: '🛒', url: 'https://www.woolworths.co.nz/shop/specials' },
            { id: 'newworld', name: 'New World', sub: 'Weekly Mailer · 특가', emoji: '🟡', url: 'https://www.newworld.co.nz/Shop/Specials' },
            { id: 'paknsave', name: "Pak'nSave", sub: 'Lower Price specials', emoji: '💛', url: 'https://www.paknsave.co.nz/shop/specials' },
        ];

        const KOREAN_MART_LINKS = [
            { id: 'hansung', name: 'Hansung Mart', area: 'Balmoral', emoji: '🇰🇷', url: 'https://www.google.com/maps/search/Hansung+Mart+Balmoral+Auckland', placeholder: '예: 배추김치 2kg $12 · 두부 3팩 $5' },
            { id: 'seoul-plaza', name: 'Seoul Plaza', area: 'Henderson', emoji: '🛒', url: 'https://www.google.com/maps/search/Seoul+Plaza+Henderson', placeholder: '예: LA갈비 $18.99/kg · 라면 박스 특가' },
            { id: 'garam', name: 'Garam Mart', area: 'North Shore', emoji: '🥬', url: 'https://www.google.com/maps/search/Garam+Mart+Auckland', placeholder: '예: 콩나물·시금치 번들 $2' },
            { id: 'korea-house', name: 'Korea House', area: 'CBD / 다수', emoji: '🏪', url: 'https://www.google.com/maps/search/Korea+House+Mart+Auckland', placeholder: '예: 젓갈·고추장 세트 할인' },
            { id: 'ktown', name: 'K-Town Mart', area: 'East Auckland', emoji: '🌶️', url: 'https://www.google.com/maps/search/K-Town+Mart+Auckland', placeholder: '예: 냉동만두 · 떡볶이 소스' },
        ];

        const DEFAULT_KOREAN_MART_SALES = {
            hansung: '김치 2kg $11.99 · 삼겹살 $16.99/kg',
            'seoul-plaza': 'LA갈비 특가 · 쌀 10kg $18',
            garam: '두부 3팩 $4.50 · 콩나물 $1.99',
            'korea-house': '고추장·된장 세트 15% off',
            ktown: '만두 1+1 · 라면 박스 $12',
        };

        const EMERGENCY_CONTACTS = [
            { id: '111', name: '긴급 전화 (경찰·소방·구급)', emoji: '🚓', tel: '111', display: '111', hint: '생명·신체 위험 시 즉시' },
            { id: 'council', name: 'Auckland Council 긴급', emoji: '🏛️', tel: '+6493010101', display: '09 301 0101', hint: '상하수도·도로·재난 관련' },
            { id: 'healthline', name: 'Healthline', emoji: '🩺', tel: '0800611116', display: '0800 611 116', hint: '24시간 건강 상담 · 무료' },
            { id: 'consulate', name: '주오클랜드 총영사관', emoji: '🇰🇷', tel: '+6494739073', display: '+64 9 473 9073', hint: '영사 민원 · 긴급 연락 (업무시간 우선)' },
        ];

        const PROPERTY_QUICK_LINKS = [
            { id: 'homes', name: 'Homes.co.nz', url: 'https://homes.co.nz/' },
            { id: 'qv', name: 'QV.co.nz', url: 'https://www.qv.co.nz/' },
            { id: 'realestate', name: 'Realestate.co.nz', url: 'https://www.realestate.co.nz/' },
            { id: 'rbnz', name: 'RBNZ OCR', url: 'https://www.rbnz.govt.nz/monetary-policy/monetary-policy-decisions' },
        ];

        const DEFAULT_PROPERTY_AREAS = [
            { id: 'albany', name: 'Albany', medianPrice: 1180000, targetPrice: 1050000, trendNote: '노스쇼어 · 신축 타운하우스 많음' },
            { id: 'henderson', name: 'Henderson', medianPrice: 920000, targetPrice: 850000, trendNote: '서부 · 한인마트·교통 허브' },
            { id: 'glenfield', name: 'Glenfield', medianPrice: 1050000, targetPrice: 980000, trendNote: '북쪽 · 학군·주차 확인' },
        ];

        const AT_STATUS_OPTIONS = [
            { value: 'normal', label: '정상 운행', emoji: '🚌' },
            { value: 'delay', label: '연착/지연', emoji: '⚠️' },
            { value: 'cancel', label: '운행 취소', emoji: '🚫' },
            { value: 'strike', label: '파업/공사', emoji: '⛔' },
        ];

        const DEFAULT_AT_ROUTES = [
            { id: 'at-nx1', type: 'bus', code: 'NX1', status: 'normal', note: '' },
            { id: 'at-82', type: 'bus', code: '82', status: 'normal', note: '' },
            { id: 'at-western', type: 'train', code: 'Western Line', status: 'delay', note: 'Track maintenance 가능' },
        ];

        const DEFAULT_SETTLEMENT_QUEST = [
            { id: 'ird', label: 'IRD 세금 번호(Tax Number) 신청 완료', done: false },
            { id: 'bank', label: '뉴질랜드 은행 계좌 개설 완료', done: false },
            { id: 'hop', label: 'AT Hop 카드 구매 · 등록 완료', done: false },
            { id: 'aa-license', label: 'AA 운전면허 공증/번역 완료', done: false },
            { id: 'flat', label: '플랫(Flat) 계약 · 본드 납부 완료', done: false },
            { id: 'power', label: '전기·가스(Utilities) 가입 완료', done: false },
            { id: 'internet', label: '인터넷(Chorus/Vocus 등) 신청 완료', done: false },
            { id: 'gp', label: 'GP(가정의) 등록 · Community Services Card 확인', done: false },
            { id: 'insurance', label: '콘텐츠/차량 보험 가입 검토 완료', done: false },
            { id: 'school', label: '자녀 학교·Childcare 등록 완료', done: false },
        ];

        function ocrNeonLabel(status, rate) {
            const r = Number(rate) || 0;
            if (status === 'cut') return '🔵 기준금리 인하 (' + r + '%)';
            if (status === 'hike') return '🔴 기준금리 인상 (' + r + '%)';
            return '🟢 기준금리 동결 중 (' + r + '%)';
        }

        function calcMortgageMonthly(loan, annualPct, years) {
            const principal = Math.max(0, Number(loan) || 0);
            const y = Math.max(1, Number(years) || 30);
            const annual = Math.max(0, Number(annualPct) || 0) / 100;
            if (principal === 0) return 0;
            if (annual === 0) return Math.round((principal / (y * 12)) * 100) / 100;
            const r = annual / 12;
            const n = y * 12;
            const pay = (principal * r * Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1);
            return Math.round(pay * 100) / 100;
        }

        function atRouteHeadline(route) {
            const code = route.code || '?';
            const opt = AT_STATUS_OPTIONS.find((o) => o.value === route.status) || AT_STATUS_OPTIONS[0];
            const kind = route.type === 'train' ? '기차' : '버스';
            if (route.status === 'normal') {
                return opt.emoji + ' ' + code + ' ' + kind + ' · 정상 운행 중';
            }
            if (route.status === 'delay') {
                return '⚠️ ' + code + ' ' + kind + ' · 연착/지연 발생';
            }
            if (route.status === 'strike') {
                return '⛔ ' + code + ' ' + kind + ' · 파업/공사 영향';
            }
            return '🚫 ' + code + ' ' + kind + ' · 운행 취소/변경';
        }

        function calcNzIrdMiniTax(annualGross, kiwiSaverPct) {
            const gross = Math.max(0, Number(annualGross) || 0);
            const kiwiPct = Math.max(0, Math.min(10, Number(kiwiSaverPct) || 0));
            if (gross === 0) {
                return {
                    incomeTax: 0,
                    accLevy: 0,
                    kiwiSaver: 0,
                    annualTakeHome: 0,
                    weeklyTakeHome: 0,
                    effectiveRate: '0.0',
                    disclaimer: '연봉(NZD)을 입력하면 대략적인 세후 금액이 표시됩니다.',
                };
            }
            const bands = [
                { upTo: 14000, rate: 0.105 },
                { upTo: 48000, rate: 0.175 },
                { upTo: 70000, rate: 0.30 },
                { upTo: 180000, rate: 0.33 },
                { upTo: Infinity, rate: 0.39 },
            ];
            let incomeTax = 0;
            let prev = 0;
            for (let i = 0; i < bands.length; i++) {
                const b = bands[i];
                const top = Math.min(gross, b.upTo);
                if (top > prev) incomeTax += (top - prev) * b.rate;
                prev = b.upTo;
                if (gross <= b.upTo) break;
            }
            incomeTax = Math.round(incomeTax * 100) / 100;
            const accCap = 142283;
            const accRate = 0.016;
            const accLevy = Math.round(Math.min(gross, accCap) * accRate * 100) / 100;
            const kiwiSaver = Math.round(gross * (kiwiPct / 100) * 100) / 100;
            const annualTakeHome = Math.max(0, Math.round((gross - incomeTax - accLevy - kiwiSaver) * 100) / 100);
            const weeklyTakeHome = Math.round((annualTakeHome / 52) * 100) / 100;
            const effectiveRate = gross > 0 ? (((gross - annualTakeHome) / gross) * 100).toFixed(1) : '0.0';
            return {
                incomeTax,
                accLevy,
                kiwiSaver,
                annualTakeHome,
                weeklyTakeHome,
                effectiveRate,
                disclaimer: '참고용 추정치입니다. ACC·KiwiSaver·세액공제·학자금 등은 IRD 계산기와 다를 수 있어요.',
            };
        }

        /** Matariki — 정부 발표일 (연도별) */
        const MATARIKI_BY_YEAR = { 2025: '2025-06-20', 2026: '2026-06-20', 2027: '2027-07-10', 2028: '2028-07-14' };

        function pad2(n) {
            return String(n).padStart(2, '0');
        }

        function toDateOnly(y, m, d) {
            const dt = new Date(y, m - 1, d);
            dt.setHours(0, 0, 0, 0);
            return dt;
        }

        function easterSunday(year) {
            const a = year % 19;
            const b = Math.floor(year / 100);
            const c = year % 100;
            const d = Math.floor(b / 4);
            const e = b % 4;
            const f = Math.floor((b + 8) / 25);
            const g = Math.floor((b - f + 1) / 3);
            const h = (19 * a + b - d - g + 15) % 30;
            const i = Math.floor(c / 4);
            const k = c % 4;
            const l = (32 + 2 * e + 2 * i - h - k) % 7;
            const m = Math.floor((a + 11 * h + 22 * l) / 451);
            const month = Math.floor((h + l - 7 * m + 114) / 31);
            const day = ((h + l - 7 * m + 114) % 31) + 1;
            return toDateOnly(year, month, day);
        }

        function nthWeekdayOfMonth(year, month, weekday, n) {
            const first = new Date(year, month - 1, 1);
            let count = 0;
            for (let d = 1; d <= 31; d++) {
                const cur = new Date(year, month - 1, d);
                if (cur.getMonth() !== month - 1) break;
                if (cur.getDay() === weekday) {
                    count++;
                    if (count === n) return toDateOnly(year, month, d);
                }
            }
            return toDateOnly(year, month, 1);
        }

        function lastWeekdayOfMonth(year, month, weekday) {
            let last = null;
            for (let d = 1; d <= 31; d++) {
                const cur = new Date(year, month - 1, d);
                if (cur.getMonth() !== month - 1) break;
                if (cur.getDay() === weekday) last = toDateOnly(year, month, d);
            }
            return last || toDateOnly(year, month, 1);
        }

        /** 연도별 NZ 주요 공휴일 (오클랜드·전국) */
        function buildNzHolidaysForYear(year) {
            const easter = easterSunday(year);
            const goodFriday = new Date(easter);
            goodFriday.setDate(goodFriday.getDate() - 2);
            goodFriday.setHours(0, 0, 0, 0);
            const easterMon = new Date(easter);
            easterMon.setDate(easterMon.getDate() + 1);
            easterMon.setHours(0, 0, 0, 0);

            const rows = [
                { id: year + '-ny', nameKo: '새해', nameEn: "New Year's Day", date: toDateOnly(year, 1, 1), longWeekend: true },
                { id: year + '-ny2', nameKo: '새해 다음날', nameEn: "Day after New Year's", date: toDateOnly(year, 1, 2), longWeekend: true },
                { id: year + '-auk', nameKo: '오클랜드 기념일', nameEn: 'Auckland Anniversary', date: lastWeekdayOfMonth(year, 1, 1), longWeekend: true },
                { id: year + '-waitangi', nameKo: '와이탕이', nameEn: 'Waitangi Day', date: toDateOnly(year, 2, 6), longWeekend: false },
                { id: year + '-gf', nameKo: '굿 프라이데이', nameEn: 'Good Friday', date: goodFriday, longWeekend: true },
                { id: year + '-em', nameKo: '이스터 먼데이', nameEn: 'Easter Monday', date: easterMon, longWeekend: true },
                { id: year + '-anzac', nameKo: 'ANZAC 기념일', nameEn: 'ANZAC Day', date: toDateOnly(year, 4, 25), longWeekend: false },
                { id: year + '-king', nameKo: '킹스벌스데이', nameEn: "King's Birthday", date: nthWeekdayOfMonth(year, 6, 1, 1), longWeekend: true },
                { id: year + '-labour', nameKo: '레이버데이', nameEn: 'Labour Day', date: nthWeekdayOfMonth(year, 10, 1, 4), longWeekend: true },
                { id: year + '-xmas', nameKo: '크리스마스', nameEn: 'Christmas Day', date: toDateOnly(year, 12, 25), longWeekend: true },
                { id: year + '-boxing', nameKo: '박싱데이', nameEn: 'Boxing Day', date: toDateOnly(year, 12, 26), longWeekend: true },
            ];
            if (MATARIKI_BY_YEAR[year]) {
                const parts = MATARIKI_BY_YEAR[year].split('-').map(Number);
                rows.push({
                    id: year + '-matariki',
                    nameKo: '마타리키',
                    nameEn: 'Matariki',
                    date: toDateOnly(parts[0], parts[1], parts[2]),
                    longWeekend: true,
                });
            }
            return rows;
        }

        function buildNzHolidayCalendar(fromYear, toYear) {
            const out = [];
            for (let y = fromYear; y <= toYear; y++) {
                out.push(...buildNzHolidaysForYear(y));
            }
            return out.sort((a, b) => a.date - b.date);
        }

        function formatNzDate(d) {
            return d.toLocaleDateString('ko-NZ', { weekday: 'short', year: 'numeric', month: 'long', day: 'numeric' });
        }

        function holidayDaysLeft(target, today) {
            return Math.round((target.getTime() - today.getTime()) / 86400000);
        }

        function holidayDDayLabel(days) {
            if (days === 0) return 'D-DAY';
            if (days === 1) return 'D-1';
            return 'D-' + days;
        }

        function sameCalendarDay(a, b) {
            return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
        }

        /** 한국 4대 국경일 (음력 제외, 고정 양력) */
        function buildKoreanNationalHolidays(year) {
            return [
                { id: year + '-kr-301', nameKo: '삼일절', nameEn: 'Independence Movement Day', date: toDateOnly(year, 3, 1), source: 'KR' },
                { id: year + '-kr-815', nameKo: '광복절', nameEn: 'Liberation Day', date: toDateOnly(year, 8, 15), source: 'KR' },
                { id: year + '-kr-1003', nameKo: '개천절', nameEn: 'National Foundation Day', date: toDateOnly(year, 10, 3), source: 'KR' },
                { id: year + '-kr-1009', nameKo: '한글날', nameEn: 'Hangeul Day', date: toDateOnly(year, 10, 9), source: 'KR' },
            ];
        }

        function allClosureHolidaysForYear(year) {
            const nz = buildNzHolidaysForYear(year).map((h) => ({ ...h, source: 'NZ' }));
            const kr = buildKoreanNationalHolidays(year);
            const easter = easterSunday(year);
            const easterSun = {
                id: year + '-easter-sun',
                nameKo: '부활절(일요일)',
                nameEn: 'Easter Sunday',
                date: toDateOnly(year, easter.getMonth() + 1, easter.getDate()),
                source: 'NZ',
                supermarketClosed: true,
            };
            return [...nz, ...kr, easterSun];
        }

        function findClosureHolidayOn(date) {
            const y = date.getFullYear();
            const list = allClosureHolidaysForYear(y).concat(allClosureHolidaysForYear(y + 1));
            const hit = list.find((h) => sameCalendarDay(h.date, date));
            return hit || null;
        }

        const NEON_THEMES = window.HBG_DASH_NEON_THEMES;

        const mobileInputAttrs = {
            autocomplete: 'off',
            autocorrect: 'off',
            autocapitalize: 'off',
            spellcheck: 'false',
        };

        const BLOG_CATEGORIES = [
            '신앙고백', '브런치', '디지털 디톡스', 'ai/it', '랜선 힐링', '그레이스의 책방',
            '건강식품', '그레이스의 Pick', '영어공부', '일어공부', '기타',
        ];

        /**
         * 오클랜드 야시장 요일별 장소 (JS getDay: 0=일, 1=월, … 6=토)
         */
        const NIGHT_MARKET_SCHEDULE = [
            { dayIndex: 1, dayLabel: '월요일', dayShort: '월', venueKo: '쉼 (Rest)', venueEn: 'Rest — No market', isRest: true, emoji: '🌙', hint: '월요일은 야시장 없음. 화요일 Mt Wellington 을 노려보세요.' },
            { dayIndex: 2, dayLabel: '화요일', dayShort: '화', venueKo: '마운트 웰링턴', venueEn: 'Mt Wellington', isRest: false, emoji: '🏔️', hint: 'Mt Wellington 쪽 야시장 · 저녁에 출발!' },
            { dayIndex: 3, dayLabel: '수요일', dayShort: '수', venueKo: '보타니', venueEn: 'Botany', isRest: false, emoji: '🌿', hint: 'Botany Town Centre 인근 야시장.' },
            { dayIndex: 4, dayLabel: '목요일', dayShort: '목', venueKo: '헨더슨', venueEn: 'Henderson', isRest: false, emoji: '🌆', hint: 'West Auckland · Henderson 야시장.' },
            { dayIndex: 5, dayLabel: '금요일', dayShort: '금', venueKo: '파파토에토에', venueEn: 'Papatoetoe', isRest: false, emoji: '🚂', hint: 'South Auckland · Papatoetoe 야시장.' },
            { dayIndex: 6, dayLabel: '토요일', dayShort: '토', venueKo: '파쿠랑가', venueEn: 'Pakuranga', isRest: false, emoji: '🛶', hint: 'East Auckland · Pakuranga 야시장.' },
            { dayIndex: 0, dayLabel: '일요일', dayShort: '일', venueKo: '글렌 인스', venueEn: 'Glen Innes', isRest: false, emoji: '☀️', hint: 'East Auckland · Glen Innes 일요 야시장.' },
        ];

        const BASE = {
            local: 'http://localhost/heldbygrace.life',
            live: 'https://heldbygrace.life',
        };
        /** 관리자 로그인·API는 항상 운영 서버 (로컬 대시보드에서도 동일) */
        const SERVER_BASE = BASE.live;

        const CURSOR_LINKS = [
            { id: 'cursor-app', name: 'Cursor', path: 'cursor://', favicon: 'https://cursor.com/favicon.ico', hint: '앱 실행' },
            { id: 'cursor-docs', name: 'Cursor Docs', path: 'https://docs.cursor.com', favicon: 'https://cursor.com/favicon.ico', hint: 'docs.cursor.com' },
        ];

        const UTILITY_LINKS = [
            { id: 'memo', name: '메모', path: 'applenotes://', icon: 'fas fa-note-sticky', hint: 'Apple 메모' },
            { id: 'calendar', name: '캘린더', path: 'calshow://', icon: 'fas fa-calendar-days', hint: 'Apple 캘린더' },
            { id: 'reminders', name: '리마인더', path: 'x-apple-reminderkit://', icon: 'fas fa-list-check', hint: 'Apple 리마인더' },
            { id: 'chatgpt', name: 'ChatGPT', path: 'https://chatgpt.com', favicon: 'https://chatgpt.com/favicon.ico', hint: 'chatgpt.com' },
            { id: 'gemini', name: 'Gemini', path: 'https://gemini.google.com', favicon: 'https://www.gstatic.com/lamda/images/gemini_sparkle_v002_d4735304ff6292a690345.svg', hint: 'gemini.google.com' },
        ];

        const GH_DRIVE_LINKS = [
            { id: 'github', name: 'Github', path: 'https://github.com', icon: 'fab fa-github', hint: 'github.com' },
            { id: 'drive', name: 'Google Drive', path: 'https://drive.google.com', icon: 'fab fa-google-drive', hint: 'drive.google.com' },
        ];

        const nzCheatQuickLinksFor = (b) => [
            { id: 'gp', name: 'GP 대기', emoji: '🏥', url: `${b}/nz/gp-wait/index.php` },
            { id: 'bin', name: 'Bin Day', emoji: '🗑️', url: `${b}/nz/bin-day/index.php` },
            { id: 'grocery', name: '마트·공구', emoji: '🛒', url: `${b}/nz/groceries/index.php` },
            { id: 'visa', name: '비자', emoji: '🛂', url: `${b}/nz/visa-points/index.php` },
            { id: 'consulate', name: '영사', emoji: '🏛️', url: `${b}/nz/consulate/index.php` },
            { id: 'trademe', name: 'Trade Me', emoji: '🔔', url: `${b}/nz/trademe/index.php` },
            { id: 'fuel', name: '유가', emoji: '⚡', url: `${b}/nz/fuel-top3/index.php` },
            { id: 'airport', name: '공항', emoji: '✈️', url: `${b}/nz/airport-pickup/index.php` },
            { id: 'letter', name: '영작', emoji: '📄', url: `${b}/nz/kiwi-letter/index.php` },
            { id: 'leash', name: '산책', emoji: '🐕', url: `${b}/nz/off-leash/index.php` },
            { id: 'tax', name: 'Tax', emoji: '💰', url: `${b}/nz/tax-refund/index.php` },
        ];

        createApp({
            setup() {
                const clockTime = ref('');
                const clockDate = ref('');
                const dashHost = typeof location !== 'undefined' ? location.hostname : '';
                const dashOnProduction =
                    dashHost === 'heldbygrace.life' || dashHost.endsWith('.heldbygrace.life');
                let initialEnv = localStorage.getItem(STORAGE_ENV) === 'local' ? 'local' : 'live';
                if (dashOnProduction && initialEnv === 'local') {
                    initialEnv = 'live';
                    localStorage.setItem(STORAGE_ENV, 'live');
                }
                const envMode = ref(initialEnv);
                const dashOnLocal = computed(() => {
                    const h = typeof location !== 'undefined' ? location.hostname : '';
                    return h === 'localhost' || h === '127.0.0.1' || h === '';
                });
                const adminBase = computed(() => SERVER_BASE);
                const adminLoginUrl = computed(() => `${adminBase.value}/admin/login.php`);
                const adminPostsUrl = computed(() => `${adminBase.value}/admin/posts.php`);
                const neonTheme = ref(localStorage.getItem(STORAGE_NEON_THEME) || 'blue');
                const neonThemes = NEON_THEMES;
                const quickNote = ref(localStorage.getItem(STORAGE_NOTE) || '');
                const memoList = ref([]);
                const memoDraftTitle = ref('');
                const memoDraftBody = ref('');
                const activeMemoId = ref(null);
                let memoAutosaveTimer = null;
                const customLinks = ref([]);
                const newName = ref('');
                const newUrl = ref('');

                const blogBase = computed(() => BASE[envMode.value] || BASE.live);
                const toolkitUrl = computed(() => `${blogBase.value}/nz/toolkit/index.php`);
                const adminApiBase = computed(() => `${adminBase.value}/admin/api`);

                /** 오클랜드 현지 요일 — new Date().getDay() */
                const aucklandDayIndex = computed(() => new Date().getDay());

                const nightMarkets = ref(NIGHT_MARKET_SCHEDULE);

                const nightMarketToday = computed(() => {
                    const hit = nightMarkets.value.find((m) => m.dayIndex === aucklandDayIndex.value);
                    return hit ?? nightMarkets.value[0];
                });

                const nightMarketWeek = computed(() => {
                    const order = [1, 2, 3, 4, 5, 6, 0];
                    return order.map((dayIndex) => {
                        const row = nightMarkets.value.find((m) => m.dayIndex === dayIndex);
                        return {
                            ...row,
                            isToday: dayIndex === aucklandDayIndex.value,
                        };
                    });
                });

                const martCatalogLinks = MART_CATALOG_LINKS;
                const groceryWatchList = ref([]);
                const groceryNewName = ref('');

                const holidayRefreshTick = ref(0);

                const nzHolidayCalendar = computed(() => {
                    const y = new Date().getFullYear();
                    return buildNzHolidayCalendar(y, y + 1);
                });

                const nzHolidayUpcomingRaw = computed(() => {
                    void holidayRefreshTick.value;
                    const today = new Date();
                    today.setHours(0, 0, 0, 0);
                    return nzHolidayCalendar.value
                        .filter((h) => h.date >= today)
                        .map((h) => {
                            const daysLeft = holidayDaysLeft(h.date, today);
                            return {
                                ...h,
                                daysLeft,
                                dDayLabel: holidayDDayLabel(daysLeft),
                                dateLabel: formatNzDate(h.date),
                            };
                        });
                });

                const nzHolidayNext = computed(() => {
                    const list = nzHolidayUpcomingRaw.value;
                    return list.length ? list[0] : null;
                });

                const nzHolidayUpcoming = computed(() => {
                    const list = nzHolidayUpcomingRaw.value.slice(0, 8);
                    const nextId = list[0]?.id;
                    return list.map((h) => ({ ...h, isNext: h.id === nextId }));
                });

                const schoolLevelFilters = SCHOOL_LEVEL_FILTERS;
                const schoolCampQuickLinks = SCHOOL_CAMP_QUICK_LINKS;
                const schoolCampLevel = ref('all');

                const schoolBreakUpcomingRaw = computed(() => {
                    void holidayRefreshTick.value;
                    const today = new Date();
                    today.setHours(0, 0, 0, 0);
                    return NZ_SCHOOL_BREAKS.map((b) => {
                        const start = parseIsoDateLocal(b.start);
                        const end = parseIsoDateLocal(b.end);
                        const daysLeft = schoolBreakDaysLeft(b.start, today);
                        const inBreak = today >= start && today <= end;
                        return {
                            ...b,
                            daysLeft,
                            inBreak,
                            rangeLabel: formatDateRangeKo(b.start, b.end),
                            dDayLabel: inBreak ? '진행 중' : daysLeft === 0 ? 'D-DAY' : daysLeft > 0 ? 'D-' + daysLeft : '종료',
                            sortKey: inBreak ? -1 : daysLeft >= 0 ? daysLeft : 9999 + Math.abs(daysLeft),
                        };
                    })
                        .filter((b) => b.inBreak || b.daysLeft >= 0)
                        .sort((a, b) => a.sortKey - b.sortKey);
                });

                const schoolBreakNext = computed(() => {
                    const list = schoolBreakUpcomingRaw.value;
                    return list.length ? list[0] : null;
                });

                const schoolBreakUpcoming = computed(() => schoolBreakUpcomingRaw.value.slice(0, 6));

                const filteredCampVenues = computed(() => {
                    const lv = schoolCampLevel.value;
                    return AUCKLAND_CAMP_VENUES.filter((v) => lv === 'all' || v.levels.includes(lv)).map((v) => ({
                        ...v,
                        levelsLabel: v.levels.map((k) => SCHOOL_LEVEL_LABELS[k] || k).join(' · '),
                    }));
                });

                const persistGroceryWatch = () => {
                    localStorage.setItem(STORAGE_GROCERY_WATCH, JSON.stringify(groceryWatchList.value));
                };

                const loadGroceryWatch = () => {
                    try {
                        const raw = JSON.parse(localStorage.getItem(STORAGE_GROCERY_WATCH) || '[]');
                        groceryWatchList.value = Array.isArray(raw) && raw.length
                            ? raw
                            : DEFAULT_GROCERY_WATCH.map((x) => ({ ...x }));
                    } catch (e) {
                        groceryWatchList.value = DEFAULT_GROCERY_WATCH.map((x) => ({ ...x }));
                    }
                };

                const addGroceryWatchItem = () => {
                    const name = (groceryNewName.value || '').trim();
                    if (!name) return;
                    groceryWatchList.value.push({
                        id: 'g-' + Date.now(),
                        name,
                        emoji: '🛒',
                        targetPrice: 0,
                        hitTarget: false,
                    });
                    groceryNewName.value = '';
                    persistGroceryWatch();
                };

                const martStores = ref(DEFAULT_MART_STORES.map((s) => ({ ...s })));
                const activeMartId = ref(DEFAULT_MART_STORES[0].id);

                const activeMart = computed(() => {
                    return martStores.value.find((s) => s.id === activeMartId.value) || martStores.value[0] || null;
                });

                const activeMartCloseTime = computed({
                    get() {
                        const s = activeMart.value;
                        if (!s) return '22:00';
                        return pad2(s.closeHour) + ':' + pad2(s.closeMinute);
                    },
                    set(val) {
                        const s = activeMart.value;
                        if (!s) return;
                        const m = /^(\d{1,2}):(\d{2})$/.exec(String(val || ''));
                        if (!m) return;
                        s.closeHour = Math.min(23, parseInt(m[1], 10));
                        s.closeMinute = Math.min(59, parseInt(m[2], 10));
                        martStores.value = [...martStores.value];
                        persistMartStores();
                    },
                });

                const persistMartStores = () => {
                    localStorage.setItem(
                        STORAGE_MART_STORES,
                        JSON.stringify({ stores: martStores.value, activeId: activeMartId.value })
                    );
                };

                const loadMartStores = () => {
                    try {
                        const raw = JSON.parse(localStorage.getItem(STORAGE_MART_STORES) || '{}');
                        if (Array.isArray(raw.stores) && raw.stores.length) {
                            martStores.value = raw.stores;
                            activeMartId.value = raw.activeId || raw.stores[0].id;
                        }
                    } catch (e) {}
                };

                const onMartCloseTimeChange = () => {
                    persistMartStores();
                };

                const resetMartCloseDefault = () => {
                    const s = activeMart.value;
                    if (!s) return;
                    s.closeHour = 22;
                    s.closeMinute = 0;
                    martStores.value = [...martStores.value];
                    persistMartStores();
                };

                const martCountdown = computed(() => {
                    void holidayRefreshTick.value;
                    const s = activeMart.value;
                    if (!s) {
                        return { state: 'closed', display: '--:--:--', headline: '마트 미설정', sub: '' };
                    }
                    const now = new Date();
                    const todayClosed = findClosureHolidayOn(now);
                    if (todayClosed) {
                        return {
                            state: 'holiday',
                            display: '휴무',
                            headline: '⚠️ 오늘 대형마트 휴무 가능',
                            sub: todayClosed.nameKo + ' (' + todayClosed.source + ')',
                        };
                    }
                    const close = new Date(now);
                    close.setHours(s.closeHour, s.closeMinute, 0, 0);
                    if (now >= close) {
                        return {
                            state: 'closed',
                            display: '00:00:00',
                            headline: '🛒 ' + s.name + ' — 오늘 마감됨',
                            sub: '내일 다시 열림 (공휴일 여부 확인)',
                        };
                    }
                    const ms = close.getTime() - now.getTime();
                    const h = Math.floor(ms / 3600000);
                    const m = Math.floor((ms % 3600000) / 60000);
                    const sec = Math.floor((ms % 60000) / 1000);
                    return {
                        state: 'open',
                        display: pad2(h) + ':' + pad2(m) + ':' + pad2(sec),
                        headline: '🛒 ' + s.name + ' 마감까지',
                        sub: '마감 ' + pad2(s.closeHour) + ':' + pad2(s.closeMinute) + ' · 실시간 카운트다운',
                    };
                });

                const martHolidayAlert = computed(() => {
                    void holidayRefreshTick.value;
                    const now = new Date();
                    now.setHours(0, 0, 0, 0);
                    const tomorrow = new Date(now);
                    tomorrow.setDate(tomorrow.getDate() + 1);
                    const todayH = findClosureHolidayOn(now);
                    const tomH = findClosureHolidayOn(tomorrow);
                    if (todayH) {
                        return {
                            level: 'danger',
                            emoji: '⚠️',
                            text: '오늘은 ' + todayH.nameKo + ' — 대형마트가 문을 닫을 수 있어요. 미리 확인하세요!',
                        };
                    }
                    if (tomH) {
                        return {
                            level: 'warn',
                            emoji: '⚠️',
                            text: '내일은 ' + tomH.nameKo + ' 휴무일 — 오늘 미리 장 보러 가세요!',
                        };
                    }
                    return null;
                });

                const newsMarqueeDoubled = computed(() => AUCKLAND_NEWS_TICKER.concat(AUCKLAND_NEWS_TICKER));

                const fuelPrices = ref({ petrol91: 2.45, diesel: 2.15 });
                const fuelHistory = ref([]);
                const fuelQuickLinks = FUEL_QUICK_LINKS;

                const saveFuelPrices = () => {
                    const entry = {
                        t: Date.now(),
                        petrol91: Number(fuelPrices.value.petrol91) || 0,
                        diesel: Number(fuelPrices.value.diesel) || 0,
                    };
                    let hist = fuelHistory.value.filter((h) => Date.now() - h.t < 30 * 86400000);
                    const last = hist[hist.length - 1];
                    if (!last || last.petrol91 !== entry.petrol91 || last.diesel !== entry.diesel) {
                        hist.push(entry);
                    }
                    if (hist.length > 14) hist = hist.slice(-14);
                    fuelHistory.value = hist;
                    localStorage.setItem(
                        STORAGE_FUEL,
                        JSON.stringify({ prices: fuelPrices.value, history: hist })
                    );
                };

                const loadFuel = () => {
                    try {
                        const raw = JSON.parse(localStorage.getItem(STORAGE_FUEL) || '{}');
                        if (raw.prices) fuelPrices.value = { ...fuelPrices.value, ...raw.prices };
                        fuelHistory.value = Array.isArray(raw.history) ? raw.history : [];
                    } catch (e) {}
                };

                const fuelTrend = computed(() => {
                    const p = Number(fuelPrices.value.petrol91) || 0;
                    const hist = fuelHistory.value;
                    if (hist.length < 2) {
                        return {
                            arrow: '➖',
                            label: '기록을 쌓는 중',
                            detail: '가격을 저장하면 추세가 보입니다',
                            colorClass: 'text-slate-400',
                        };
                    }
                    const prev = hist[hist.length - 2].petrol91;
                    const diff = Math.round((p - prev) * 100) / 100;
                    if (diff > 0.02) {
                        return {
                            arrow: '🔺',
                            label: '상승세 — 주유 서두르기?',
                            detail: '이전 기록 대비 +' + diff.toFixed(2) + '$/L',
                            colorClass: 'text-rose-300',
                        };
                    }
                    if (diff < -0.02) {
                        return {
                            arrow: '🔻',
                            label: '하락세 — 오늘 넣기 좋음',
                            detail: '이전 기록 대비 ' + diff.toFixed(2) + '$/L',
                            colorClass: 'text-emerald-300',
                        };
                    }
                    return {
                        arrow: '➖',
                        label: '보합',
                        detail: '최근 기록과 비슷합니다',
                        colorClass: 'text-amber-200/90',
                    };
                });

                const rentWeeklyAmount = ref(450);
                const rentWeekday = ref(3);
                const rentWeekdayOptions = [
                    { value: 1, label: '월요일' },
                    { value: 2, label: '화요일' },
                    { value: 3, label: '수요일' },
                    { value: 4, label: '목요일' },
                    { value: 5, label: '금요일' },
                ];

                const persistRent = () => {
                    localStorage.setItem(
                        STORAGE_RENT,
                        JSON.stringify({
                            amount: rentWeeklyAmount.value,
                            weekday: rentWeekday.value,
                        })
                    );
                };

                const loadRent = () => {
                    try {
                        const raw = JSON.parse(localStorage.getItem(STORAGE_RENT) || '{}');
                        if (raw.amount != null) rentWeeklyAmount.value = Number(raw.amount);
                        if (raw.weekday != null) rentWeekday.value = Number(raw.weekday);
                    } catch (e) {}
                };

                const rentDDay = computed(() => {
                    void holidayRefreshTick.value;
                    const today = new Date();
                    const today0 = new Date(today);
                    today0.setHours(0, 0, 0, 0);
                    let next = nextWeekdayDate(today0, rentWeekday.value);
                    if (next.getTime() === today0.getTime()) {
                        next = new Date(today0);
                        next.setDate(next.getDate() + 7);
                    }
                    const days = Math.max(0, Math.round((next.getTime() - today0.getTime()) / 86400000));
                    return {
                        label: days === 0 ? 'D-DAY' : 'D-' + days,
                        dateLabel: next.toLocaleDateString('ko-NZ', { weekday: 'long', month: 'long', day: 'numeric' }),
                        days,
                    };
                });

                const pingStatus = ref({ ok: null, ms: null, label: '측정 중…', detail: '' });
                let pingIntervalId = null;

                const koreanMartLinks = KOREAN_MART_LINKS;
                const koreanMartSales = ref({});
                const emergencyContacts = EMERGENCY_CONTACTS;

                const initKoreanMartSalesKeys = () => {
                    const next = { ...koreanMartSales.value };
                    for (const m of KOREAN_MART_LINKS) {
                        if (next[m.id] === undefined) next[m.id] = '';
                    }
                    koreanMartSales.value = next;
                };

                const persistKoreanMartSales = () => {
                    localStorage.setItem(STORAGE_KOREAN_MART_SALES, JSON.stringify(koreanMartSales.value));
                };

                const loadKoreanMartSales = () => {
                    try {
                        const raw = JSON.parse(localStorage.getItem(STORAGE_KOREAN_MART_SALES) || '{}');
                        koreanMartSales.value = typeof raw === 'object' && raw !== null ? raw : {};
                    } catch (e) {
                        koreanMartSales.value = {};
                    }
                    initKoreanMartSalesKeys();
                };

                const taxAnnualGross = ref(55000);
                const taxKiwiSaverPct = ref(3);
                const irdTaxResult = computed(() => calcNzIrdMiniTax(taxAnnualGross.value, taxKiwiSaverPct.value));

                const propertyQuickLinks = PROPERTY_QUICK_LINKS;
                const propertyOcr = ref({ rate: 5.25, status: 'hold' });
                const propertySim = ref({ depositPct: 20, years: 30, bankMargin: 2.25 });
                const propertyAreas = ref(DEFAULT_PROPERTY_AREAS.map((a) => ({ ...a })));
                const atTransitApiReady = ref(false);
                const atRoutes = ref([]);
                const atNewRouteCode = ref('');
                const atNewRouteType = ref('bus');
                const atStatusOptions = AT_STATUS_OPTIONS;
                const settlementQuest = ref(DEFAULT_SETTLEMENT_QUEST.map((q) => ({ ...q })));

                const propertyOcrNeonLabel = computed(() => ocrNeonLabel(propertyOcr.value.status, propertyOcr.value.rate));

                const propertyNorthShoreSummary = computed(() => {
                    const north = propertyAreas.value.filter((a) => {
                        const n = (a.name || '').toLowerCase();
                        return ['albany', 'glenfield', 'takapuna', 'milford', 'northcote', 'devonport'].some((k) => n.includes(k));
                    });
                    const list = north.length ? north : propertyAreas.value;
                    if (!list.length) {
                        return { label: '노스쇼어 평균 집값 추이', memo: '동네를 추가하고 Median을 입력하세요.' };
                    }
                    const sum = list.reduce((s, a) => s + (Number(a.medianPrice) || 0), 0);
                    const avg = Math.round(sum / list.length);
                    const notes = list.map((a) => a.name + ' $' + (Number(a.medianPrice) || 0).toLocaleString()).join(' · ');
                    return {
                        label: '노스쇼어 평균 Median 약 $' + avg.toLocaleString(),
                        memo: notes,
                    };
                });

                const propertyAreaSim = (area) => {
                    const price = Number(area.targetPrice) || Number(area.medianPrice) || 0;
                    const deposit = propertySim.value.depositPct || 20;
                    const loan = Math.round(price * (1 - deposit / 100));
                    const effectiveRate = (Number(propertyOcr.value.rate) || 0) + (Number(propertySim.value.bankMargin) || 0);
                    const monthlyPay = calcMortgageMonthly(loan, effectiveRate, propertySim.value.years);
                    return { price, loan, effectiveRate, monthlyPay };
                };

                const persistProperty = () => {
                    localStorage.setItem(
                        STORAGE_PROPERTY,
                        JSON.stringify({
                            ocr: propertyOcr.value,
                            sim: propertySim.value,
                            areas: propertyAreas.value,
                        })
                    );
                };

                const loadProperty = () => {
                    try {
                        const raw = JSON.parse(localStorage.getItem(STORAGE_PROPERTY) || '{}');
                        if (raw.ocr) propertyOcr.value = { ...propertyOcr.value, ...raw.ocr };
                        if (raw.sim) propertySim.value = { ...propertySim.value, ...raw.sim };
                        if (Array.isArray(raw.areas) && raw.areas.length) {
                            propertyAreas.value = raw.areas.map((a) => ({ ...a }));
                        }
                    } catch (e) {}
                };

                const addPropertyArea = () => {
                    propertyAreas.value.push({
                        id: 'area-' + Date.now(),
                        name: 'New Area',
                        medianPrice: 900000,
                        targetPrice: 850000,
                        trendNote: '',
                    });
                    persistProperty();
                };

                const atRouteRows = computed(() => {
                    return atRoutes.value.map((r) => {
                        const isAlert = r.status !== 'normal';
                        return {
                            ...r,
                            isAlert,
                            emoji: r.type === 'train' ? '🚆' : '🚌',
                            headline: atRouteHeadline(r),
                            sub: r.note || (isAlert ? '출근 전 AT 앱·공지 확인' : '정상 · Storm 시 재확인'),
                        };
                    });
                });

                const persistAtRoutes = () => {
                    localStorage.setItem(STORAGE_AT_ROUTES, JSON.stringify(atRoutes.value));
                };

                const loadAtRoutes = () => {
                    try {
                        const raw = JSON.parse(localStorage.getItem(STORAGE_AT_ROUTES) || '[]');
                        atRoutes.value = Array.isArray(raw) && raw.length ? raw : DEFAULT_AT_ROUTES.map((r) => ({ ...r }));
                    } catch (e) {
                        atRoutes.value = DEFAULT_AT_ROUTES.map((r) => ({ ...r }));
                    }
                };

                const addAtRoute = () => {
                    const code = (atNewRouteCode.value || '').trim();
                    if (!code) return;
                    atRoutes.value.push({
                        id: 'at-' + Date.now(),
                        type: atNewRouteType.value,
                        code,
                        status: 'normal',
                        note: '',
                    });
                    atNewRouteCode.value = '';
                    persistAtRoutes();
                };

                const updateAtRouteStatus = (row) => {
                    const idx = atRoutes.value.findIndex((r) => r.id === row.id);
                    if (idx >= 0) {
                        atRoutes.value[idx].status = row.status;
                        persistAtRoutes();
                    }
                };

                const removeAtRoute = (id) => {
                    atRoutes.value = atRoutes.value.filter((r) => r.id !== id);
                    persistAtRoutes();
                };

                const fetchAtTransitLive = async () => {
                    atTransitApiReady.value = false;
                };

                const persistSettlementQuest = () => {
                    localStorage.setItem(STORAGE_SETTLEMENT_QUEST, JSON.stringify(settlementQuest.value));
                };

                const loadSettlementQuest = () => {
                    try {
                        const raw = JSON.parse(localStorage.getItem(STORAGE_SETTLEMENT_QUEST) || '[]');
                        if (Array.isArray(raw) && raw.length) {
                            const map = Object.fromEntries(raw.map((q) => [q.id, q.done]));
                            settlementQuest.value = DEFAULT_SETTLEMENT_QUEST.map((q) => ({
                                ...q,
                                done: !!map[q.id],
                            }));
                        }
                    } catch (e) {}
                };

                const toggleSettlementQuest = (id) => {
                    if (!id) return;
                    const next = settlementQuest.value.map((q) =>
                        q.id === id ? { ...q, done: !q.done } : { ...q }
                    );
                    settlementQuest.value = next;
                    persistSettlementQuest();
                };

                const settlementQuestDoneCount = computed(() => settlementQuest.value.filter((q) => q.done).length);

                const settlementQuestPct = computed(() => {
                    const total = settlementQuest.value.length || 1;
                    return Math.round((settlementQuestDoneCount.value / total) * 100);
                });

                const runPingTest = async () => {
                    pingStatus.value = { ok: null, ms: null, label: '측정 중…', detail: '해외망 체크' };
                    const targets = [
                        { name: '사이트', url: 'https://heldbygrace.life/asets/logo/favicon.png' },
                        { name: 'Google', url: 'https://www.google.com/generate_204' },
                    ];
                    let best = 9999;
                    let bestName = '';
                    for (const t of targets) {
                        const t0 = performance.now();
                        try {
                            await fetch(t.url + (t.url.includes('?') ? '&' : '?') + 't=' + Date.now(), {
                                mode: 'no-cors',
                                cache: 'no-store',
                            });
                            const ms = Math.round(performance.now() - t0);
                            if (ms < best) {
                                best = ms;
                                bestName = t.name;
                            }
                        } catch (e) {}
                    }
                    const ok = best < 180;
                    pingStatus.value = {
                        ok,
                        ms: best,
                        label: ok ? '🟢 연결 양호 (' + best + 'ms)' : '🔴 지연 발생 (' + best + 'ms)',
                        detail: bestName + ' 기준 · no-cors 측정',
                    };
                };

                const consulateStatus = computed(() => {
                    void holidayRefreshTick.value;
                    const now = new Date();
                    const dow = now.getDay();
                    const mins = now.getHours() * 60 + now.getMinutes();
                    const openStart = 9 * 60;
                    const openEnd = 16 * 60;
                    const holiday = findClosureHolidayOn(now);
                    if (holiday) {
                        const tag = holiday.source === 'KR' ? '한국 국경일' : 'NZ 공휴일';
                        return {
                            open: false,
                            label: '🔴 현재 영사관 휴무일',
                            reason: holiday.nameKo + ' (' + tag + ' · ' + holiday.nameEn + ')',
                        };
                    }
                    if (dow === 0 || dow === 6) {
                        return {
                            open: false,
                            label: '🔴 현재 영사관 휴무',
                            reason: '주말(토·일)에는 민원 업무가 없습니다.',
                        };
                    }
                    if (mins < openStart) {
                        return {
                            open: false,
                            label: '🔴 업무 시간 전',
                            reason: '오전 9시 이전입니다. 평일 09:00–16:00',
                        };
                    }
                    if (mins >= openEnd) {
                        return {
                            open: false,
                            label: '🔴 업무 마감',
                            reason: '오후 4시 이후입니다. 평일 09:00–16:00',
                        };
                    }
                    return {
                        open: true,
                        label: '🟢 영사관 민원실 업무 중',
                        reason: '평일 업무 시간(09:00–16:00)입니다. 방문 전 대사관 공지를 한 번 더 확인하세요.',
                    };
                });

                const blogCategories = BLOG_CATEGORIES;
                const blogForm = ref({
                    category: '신앙고백',
                    title: '',
                    subtitle: '',
                    body: '',
                    word_of_day: '',
                    word_description: '',
                    ai_prompt: '',
                });
                const blogBusy = ref('');
                const blogMsg = ref('');
                const blogMsgErr = ref(false);

                const blogManualPrompt = () => {
                    const extra = (blogForm.value.ai_prompt || '').trim();
                    const topic = extra ? `\n주제·메모: ${extra}` : '';
                    return `heldbygrace.life 블로그 글 초안을 JSON으로만 작성해 주세요.\n카테고리: ${blogForm.value.category}${topic}\n\n필수 키: title(제목), subtitle(부제), body(본문, 단락은 빈 줄), word_of_day(오늘의 단어), word_description(단어 설명).\n본문 400~900자, 따뜻한 한국어 톤. 코드블록 없이 JSON만 출력.`;
                };

                const applyBlogDraft = (d) => {
                    if (!d || typeof d !== 'object') return;
                    if (d.title) blogForm.value.title = d.title;
                    if (d.subtitle) blogForm.value.subtitle = d.subtitle;
                    if (d.body) blogForm.value.body = d.body;
                    if (d.word_of_day) blogForm.value.word_of_day = d.word_of_day;
                    if (d.word_description) blogForm.value.word_description = d.word_description;
                };

                const blogApiPost = async (path, body) => {
                    const res = await fetch(`${adminApiBase.value}/${path}`, {
                        method: 'POST',
                        credentials: 'include',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(body),
                    });
                    let data = {};
                    try {
                        data = await res.json();
                    } catch (e) {}
                    if (res.status === 401 || (typeof data.error === 'string' && data.error === 'unauthorized')) {
                        throw new Error('관리자 로그인이 필요합니다. 위 「관리자 로그인」 링크로 로그인한 뒤 다시 시도하세요.');
                    }
                    return { res, data };
                };

                const generateBlogAi = async () => {
                    blogBusy.value = 'ai';
                    blogMsg.value = '';
                    blogMsgErr.value = false;
                    try {
                        const { res, data } = await blogApiPost('essay_ai_draft.php', {
                            category: blogForm.value.category,
                            prompt: blogForm.value.ai_prompt,
                        });
                        if (data.ok && data.draft) {
                            applyBlogDraft(data.draft);
                            blogMsg.value = 'AI 초안을 불러왔습니다. 확인 후 「블로그에 저장」을 누르세요.';
                            return;
                        }
                        if (data.manual_prompt) {
                            await navigator.clipboard.writeText(data.manual_prompt);
                            blogMsg.value = (data.error === 'no_api_key')
                                ? 'API 키 없음 — ChatGPT용 프롬프트를 클립보드에 복사했습니다. chatgpt.com 결과 JSON을 붙여넣거나 아래 칸에 직접 입력하세요.'
                                : '생성 실패 — 프롬프트를 클립보드에 복사했습니다. ChatGPT JSON 결과를 폼에 붙여넣으세요.';
                            if (data.message) blogMsg.value += ' (' + data.message + ')';
                            return;
                        }
                        throw new Error(data.message || 'AI 초안 생성 실패');
                    } catch (e) {
                        blogMsgErr.value = true;
                        blogMsg.value = e.message || String(e);
                    } finally {
                        blogBusy.value = '';
                    }
                };

                const copyBlogChatGptPrompt = async () => {
                    blogMsg.value = '';
                    blogMsgErr.value = false;
                    try {
                        await navigator.clipboard.writeText(blogManualPrompt());
                        blogMsg.value = 'ChatGPT용 프롬프트를 복사했습니다. chatgpt.com 에 붙여넣고 JSON을 폼에 넣으세요.';
                    } catch (e) {
                        blogMsgErr.value = true;
                        blogMsg.value = '클립보드 복사 실패: ' + (e.message || e);
                    }
                };

                const pasteBlogJsonFromClipboard = async () => {
                    try {
                        const text = await navigator.clipboard.readText();
                        const parsed = JSON.parse(text);
                        applyBlogDraft(parsed);
                        blogMsg.value = '클립보드 JSON을 폼에 반영했습니다.';
                        blogMsgErr.value = false;
                    } catch (e) {
                        blogMsgErr.value = true;
                        blogMsg.value = 'JSON 붙여넣기 실패 — ChatGPT가 준 JSON 전체를 복사했는지 확인하세요.';
                    }
                };

                const saveBlogPost = async () => {
                    blogBusy.value = 'save';
                    blogMsg.value = '';
                    blogMsgErr.value = false;
                    try {
                        const { res, data } = await blogApiPost('essay_publish_dashboard.php', {
                            category: blogForm.value.category,
                            title: blogForm.value.title,
                            subtitle: blogForm.value.subtitle,
                            body: blogForm.value.body,
                            word_of_day: blogForm.value.word_of_day,
                            word_description: blogForm.value.word_description,
                            visible: 1,
                        });
                        if (data.ok && data.essay) {
                            const e = data.essay;
                            blogMsg.value = `저장 완료 — ${e.category} ${e.series_day}일차 (id ${e.id}). 사이트에 반영됩니다.`;
                            return;
                        }
                        throw new Error(data.message || '저장 실패');
                    } catch (e) {
                        blogMsgErr.value = true;
                        blogMsg.value = e.message || String(e);
                    } finally {
                        blogBusy.value = '';
                    }
                };

                const toLink = (l) => ({
                    id: l.id,
                    name: l.name,
                    url: l.url || l.path || '#',
                    icon: l.icon || 'fas fa-link',
                    favicon: l.favicon || null,
                    faviconRound: !!l.faviconRound,
                    urlHint: l.urlHint || l.hint || l.url || l.path || '',
                    custom: !!l.custom,
                });

                const utilityLinksForCard = computed(() => UTILITY_LINKS.map((l) => toLink(l)));

                const launcherGrid = computed(() => {
                    const b = blogBase.value;
                    const items = [
                        {
                            type: 'link',
                            key: 'blog',
                            link: toLink({
                                id: 'blog',
                                name: '내 블로그',
                                path: `${b}/index.php#core-message`,
                                favicon: `${b}/asets/logo/favicon.png`,
                                hint: 'heldbygrace.life',
                            }),
                        },
                        {
                            type: 'link',
                            key: 'admin',
                            link: toLink({
                                id: 'admin',
                                name: '블로그 관리자',
                                path: `${SERVER_BASE}/admin/login.php`,
                                favicon: 'assets/admin-icon.png',
                                faviconRound: true,
                                hint: 'admin',
                            }),
                        },
                        {
                            type: 'link',
                            key: 'church',
                            link: toLink({
                                id: 'church',
                                name: '예원교회',
                                path: 'https://yewon.co.nz/',
                                favicon: `${b}/asets/church/yewon-church-logo.png`,
                                hint: 'yewon.co.nz',
                            }),
                        },
                        { type: 'pair', key: 'cursor-pair', links: CURSOR_LINKS.map((l) => toLink(l)) },
                        {
                            type: 'cheatkeys-card',
                            key: 'cheatkeys',
                            toolkitUrl: `${b}/nz/toolkit/index.php`,
                            links: nzCheatQuickLinksFor(b),
                        },
                        { type: 'utility-card', key: 'utility', links: utilityLinksForCard.value },
                        { type: 'pair', key: 'gh-drive', links: GH_DRIVE_LINKS.map((l) => toLink(l)) },
                    ];
                    customLinks.value.forEach((l) => {
                        items.push({ type: 'link', key: 'custom-' + l.id, link: toLink({ ...l, custom: true }) });
                    });
                    return items;
                });

                const applyNeonTheme = (key) => {
                    const t = NEON_THEMES[key] || NEON_THEMES.blue;
                    document.documentElement.style.setProperty('--neon', t.hex);
                    document.documentElement.style.setProperty('--neon-rgb', t.rgb);
                    document.documentElement.style.setProperty('--neon-light', t.light);
                };

                const setNeonTheme = (key) => {
                    if (!NEON_THEMES[key]) return;
                    neonTheme.value = key;
                    localStorage.setItem(STORAGE_NEON_THEME, key);
                    applyNeonTheme(key);
                };

                const setEnv = (mode) => {
                    envMode.value = mode;
                    localStorage.setItem(STORAGE_ENV, mode);
                };

                const seedMockDataIfEmpty = () => {
                    if (!localStorage.getItem(STORAGE_FX)) {
                        localStorage.setItem(
                            STORAGE_FX,
                            JSON.stringify({ rate: DEFAULT_RATE, baseline: DEFAULT_RATE, nzd: 1, krw: DEFAULT_RATE })
                        );
                        const now = Date.now();
                        localStorage.setItem(
                            STORAGE_FX_HIST,
                            JSON.stringify([
                                { t: now - 86400000 * 3, r: 838 },
                                { t: now - 86400000 * 2, r: 842 },
                                { t: now - 86400000, r: 844 },
                                { t: now, r: DEFAULT_RATE },
                            ])
                        );
                    }
                    if (!localStorage.getItem(STORAGE_BIN)) {
                        localStorage.setItem(
                            STORAGE_BIN,
                            JSON.stringify({
                                address: '79 Kingdale Road, Henderson, Auckland 0610',
                                collectionDay: '목요일',
                                toggles: { Red: true, Yellow: false, Blue: true, Green: false },
                            })
                        );
                    }
                    let memosEmpty = true;
                    try {
                        const arr = JSON.parse(localStorage.getItem(STORAGE_MEMOS) || '[]');
                        memosEmpty = !Array.isArray(arr) || arr.length === 0;
                    } catch (e) {
                        memosEmpty = true;
                    }
                    if (memosEmpty) {
                        const now = Date.now();
                        localStorage.setItem(
                            STORAGE_MEMOS,
                            JSON.stringify([
                                {
                                    id: 'm-seed-1',
                                    title: '병원 검사 결과 확인',
                                    body: '오후 결과 나오면 가족에게 연락',
                                    createdAt: now,
                                    updatedAt: now,
                                },
                                {
                                    id: 'm-seed-2',
                                    title: '쓰레기통 Red+Blue — 목요일 아침',
                                    body: '목요일 수거 · Red(일반)+Blue(유리) 통 밖으로',
                                    createdAt: now - 1,
                                    updatedAt: now - 1,
                                },
                                {
                                    id: 'm-seed-3',
                                    title: '환율 845원 기준 송금 검토',
                                    body: 'NZD → KRW 송금 타이밍 · open.er-api 연동 전에도 845 고정',
                                    createdAt: now - 2,
                                    updatedAt: now - 2,
                                },
                            ])
                        );
                    }
                    if (!localStorage.getItem(STORAGE_NOTE)) {
                        localStorage.setItem(STORAGE_NOTE, '병원 대기 중 — 첫 방문 mock 데이터가 채워졌어요.');
                    }
                    if (!localStorage.getItem(STORAGE_GROCERY_WATCH)) {
                        localStorage.setItem(
                            STORAGE_GROCERY_WATCH,
                            JSON.stringify(DEFAULT_GROCERY_WATCH.map((x) => ({ ...x })))
                        );
                    }
                    if (!localStorage.getItem(STORAGE_MART_STORES)) {
                        localStorage.setItem(
                            STORAGE_MART_STORES,
                            JSON.stringify({ stores: DEFAULT_MART_STORES, activeId: DEFAULT_MART_STORES[0].id })
                        );
                    }
                    if (!localStorage.getItem(STORAGE_FUEL)) {
                        const t = Date.now();
                        localStorage.setItem(
                            STORAGE_FUEL,
                            JSON.stringify({
                                prices: { petrol91: 2.45, diesel: 2.15 },
                                history: [
                                    { t: t - 86400000 * 4, petrol91: 2.52, diesel: 2.22 },
                                    { t: t - 86400000, petrol91: 2.48, diesel: 2.18 },
                                    { t, petrol91: 2.45, diesel: 2.15 },
                                ],
                            })
                        );
                    }
                    if (!localStorage.getItem(STORAGE_RENT)) {
                        localStorage.setItem(
                            STORAGE_RENT,
                            JSON.stringify({ amount: 450, weekday: 3 })
                        );
                    }
                    if (!localStorage.getItem(STORAGE_KOREAN_MART_SALES)) {
                        localStorage.setItem(STORAGE_KOREAN_MART_SALES, JSON.stringify(DEFAULT_KOREAN_MART_SALES));
                    }
                    if (!localStorage.getItem(STORAGE_PROPERTY)) {
                        localStorage.setItem(
                            STORAGE_PROPERTY,
                            JSON.stringify({
                                ocr: { rate: 5.25, status: 'hold' },
                                sim: { depositPct: 20, years: 30, bankMargin: 2.25 },
                                areas: DEFAULT_PROPERTY_AREAS,
                            })
                        );
                    }
                    if (!localStorage.getItem(STORAGE_AT_ROUTES)) {
                        localStorage.setItem(STORAGE_AT_ROUTES, JSON.stringify(DEFAULT_AT_ROUTES));
                    }
                    if (!localStorage.getItem(STORAGE_SETTLEMENT_QUEST)) {
                        localStorage.setItem(STORAGE_SETTLEMENT_QUEST, JSON.stringify(DEFAULT_SETTLEMENT_QUEST));
                    }
                };

                const saveNote = () => {
                    localStorage.setItem(STORAGE_NOTE, quickNote.value);
                };

                const persistMemos = () => {
                    localStorage.setItem(STORAGE_MEMOS, JSON.stringify(memoList.value));
                };

                const loadMemos = () => {
                    try {
                        const raw = JSON.parse(localStorage.getItem(STORAGE_MEMOS) || '[]');
                        memoList.value = Array.isArray(raw) ? raw : [];
                    } catch (e) {
                        memoList.value = [];
                    }
                };

                const memoTitleFromDraft = () => {
                    const t = (memoDraftTitle.value || '').trim();
                    if (t) return t.slice(0, 60);
                    const line = (memoDraftBody.value || '').split('\n').find((l) => l.trim());
                    return line ? line.trim().slice(0, 60) : '새 메모';
                };

                const memoListSorted = computed(() => {
                    return [...memoList.value].sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0));
                });

                const selectMemo = (m) => {
                    activeMemoId.value = m.id;
                    memoDraftTitle.value = m.title || '';
                    memoDraftBody.value = m.body || '';
                };

                const startNewMemo = () => {
                    activeMemoId.value = null;
                    memoDraftTitle.value = '';
                    memoDraftBody.value = '';
                };

                const saveMemoDraft = () => {
                    const body = (memoDraftBody.value || '').trim();
                    if (!body && !(memoDraftTitle.value || '').trim()) return;
                    const now = Date.now();
                    const payload = {
                        title: memoTitleFromDraft(),
                        body: memoDraftBody.value,
                        updatedAt: now,
                    };
                    if (activeMemoId.value) {
                        const idx = memoList.value.findIndex((m) => m.id === activeMemoId.value);
                        if (idx >= 0) {
                            memoList.value[idx] = { ...memoList.value[idx], ...payload };
                            memoList.value = [...memoList.value];
                        }
                    } else {
                        const id = 'm-' + now;
                        memoList.value.unshift({ id, ...payload, createdAt: now });
                        activeMemoId.value = id;
                    }
                    persistMemos();
                };

                const debouncedMemoAutosave = () => {
                    if (memoAutosaveTimer) clearTimeout(memoAutosaveTimer);
                    memoAutosaveTimer = setTimeout(() => {
                        if (activeMemoId.value && (memoDraftBody.value || memoDraftTitle.value)) {
                            saveMemoDraft();
                        }
                    }, 800);
                };

                const deleteActiveMemo = () => {
                    if (!activeMemoId.value) return;
                    memoList.value = memoList.value.filter((m) => m.id !== activeMemoId.value);
                    persistMemos();
                    startNewMemo();
                };

                const loadCustom = () => {
                    try {
                        const raw = JSON.parse(localStorage.getItem(STORAGE_CUSTOM) || '[]');
                        customLinks.value = Array.isArray(raw) ? raw : [];
                    } catch (e) {
                        customLinks.value = [];
                    }
                };

                const persistCustom = () => {
                    localStorage.setItem(STORAGE_CUSTOM, JSON.stringify(customLinks.value));
                };

                const addLink = () => {
                    const name = (newName.value || '').trim();
                    const url = (newUrl.value || '').trim();
                    if (!name || !url) return;
                    customLinks.value.push({
                        id: 'c-' + Date.now(),
                        name,
                        path: url,
                        hint: url.replace(/^https?:\/\//, '').slice(0, 28),
                        custom: true,
                    });
                    newName.value = '';
                    newUrl.value = '';
                    persistCustom();
                };

                const removeLink = (id) => {
                    customLinks.value = customLinks.value.filter((l) => l.id !== id);
                    persistCustom();
                };

                const linkTarget = (url) => {
                    if (!url || /^https?:\/\//i.test(url)) return '_blank';
                    return '_self';
                };
                let clockId = null;
                let heroAnimId = null;
                let mosquitoAudioCtx = null;
                let mosquitoOsc = null;
                let mosquitoGain = null;

                const mosquitoPlaying = ref(false);
                const asmrGroups = [
                    {
                        label: '🦟 모기소리 퇴치법',
                        links: [
                            { id: 'repel-ultra', name: '모기 퇴치 주파수', hint: '초음파 · 가상 플레이어', emoji: '📡', url: '#mosquito-player' },
                            { id: 'repel-dragon', name: '잠자리 소리', hint: '모기 회피 백색', emoji: '🪰', url: 'https://www.youtube.com/results?search_query=dragonfly+sound+mosquito+repellent+sleep' },
                            { id: 'repel-bat', name: '박쥐·초음파 앰비언트', hint: '밤 숲', emoji: '🦇', url: 'https://www.youtube.com/results?search_query=bat+ultrasound+ambient+sleep' },
                            { id: 'repel-mask', name: '백색소음 가리기', hint: '모기 소리 덮기', emoji: '☁️', url: 'https://www.youtube.com/results?search_query=white+noise+block+mosquito+buzzing+sleep' },
                        ],
                    },
                    {
                        label: '🌧️ 빗소리',
                        links: [
                            { id: 'rain-soft', name: '잔잔한 빗소리', hint: '10시간 · 수면', emoji: '🌧️', url: 'https://www.youtube.com/results?search_query=rain+sounds+for+sleeping+10+hours' },
                            { id: 'rain-window', name: '창문 빗소리', hint: '실내 ASMR', emoji: '🪟', url: 'https://www.youtube.com/results?search_query=rain+on+window+sleep+asmr' },
                            { id: 'rain-auckland', name: '오클랜드 비 오는 밤', hint: '도시·창밖', emoji: '🏙️', url: 'https://www.youtube.com/results?search_query=auckland+rain+sounds+sleep' },
                            { id: 'rain-thunder', name: '빗소리 + 먼 천둥', hint: '깊은 잠', emoji: '⛈️', url: 'https://www.youtube.com/results?search_query=rain+and+distant+thunder+sleep' },
                        ],
                    },
                    {
                        label: '🌊 파도 · 바다',
                        links: [
                            { id: 'wave-soft', name: '잔잔한 파도소리', hint: '해변 · 수면', emoji: '🌊', url: 'https://www.youtube.com/results?search_query=ocean+waves+sleep+10+hours' },
                            { id: 'wave-nz', name: 'NZ 해안 파도', hint: '뉴질랜드 해변', emoji: '🇳🇿', url: 'https://www.youtube.com/results?search_query=new+zealand+beach+waves+sleep' },
                            { id: 'wave-night', name: '밤바다 파도', hint: '어두운 해변', emoji: '🌙', url: 'https://www.youtube.com/results?search_query=night+ocean+waves+sleep' },
                        ],
                    },
                    {
                        label: '📖 말씀 · 찬양',
                        links: [
                            { id: 'bible-calm', name: '성경 말씀 (잔잔)', hint: '낭독 · 수면', emoji: '📖', url: 'https://www.youtube.com/results?search_query=%EC%84%B1%EA%B2%BD+%EB%A7%90%EC%94%80+%EC%88%98%EB%A9%B4+%EC%9E%94%EC%9E%94%ED%95%9C' },
                            { id: 'bible-psalm', name: '시편 말씀 · 기도', hint: '평안', emoji: '🕊️', url: 'https://www.youtube.com/results?search_query=%EC%8B%9C%ED%8E%8B+%EB%A7%90%EC%94%80+%EC%88%98%EB%A9%B4' },
                            { id: 'worship-piano', name: '찬양 피아노 (잔잔)', hint: '새벽 예배', emoji: '🎹', url: 'https://www.youtube.com/results?search_query=%EC%B0%AC%EC%96%91+%ED%94%BC%EC%95%84%EB%85%B8+%EC%88%98%EB%A9%B4+%EC%9E%94%EC%9E%94%ED%95%9C' },
                            { id: 'worship-instrument', name: '경배 연주곡', hint: '가사 없음 · 집중', emoji: '🎵', url: 'https://www.youtube.com/results?search_query=christian+instrumental+worship+sleep' },
                        ],
                    },
                    {
                        label: '✨ NZ · 백색소음',
                        links: [
                            { id: 'tekapo', name: '레이크 테카포의 밤', hint: '별빛 · 고요', emoji: '✨', url: 'https://www.youtube.com/results?search_query=lake+tekapo+night+ambient+sleep' },
                            { id: 'nz-bush', name: 'NZ 숲속 밤소리', hint: '크리켓 · 바람', emoji: '🌿', url: 'https://www.youtube.com/results?search_query=new+zealand+bush+night+sounds' },
                            { id: 'white', name: '순백 백색소음', hint: '모기 소리 가리기', emoji: '☁️', url: 'https://www.youtube.com/results?search_query=white+noise+sleep+10+hours' },
                            { id: 'fan', name: '선풍기 휙 소리', hint: '새벽 각성 완화', emoji: '💨', url: 'https://www.youtube.com/results?search_query=fan+white+noise+sleep' },
                            { id: 'fire', name: '모닥불 소리', hint: '따뜻한 밤', emoji: '🔥', url: 'https://www.youtube.com/results?search_query=fireplace+crackling+sleep+10+hours' },
                        ],
                    },
                ];

                const weather = ref({
                    temp: 16,
                    feels: 15,
                    condition: '흐림',
                    uv: 4,
                    uvLabel: '보통',
                    humidity: 72,
                    wind: 14,
                    rain: 10,
                });

                const weekendScores = computed(() => {
                    void holidayRefreshTick.value;
                    const w = weather.value;
                    const satWind = Math.round(w.wind * 0.88);
                    const satRain = Math.min(100, Math.round(w.rain * 0.92));
                    const sunWind = Math.round(w.wind * 1.06);
                    const sunRain = Math.min(100, Math.round(w.rain * 1.08));
                    const fishScore = outdoorActivityScore(satWind, satRain, 'fishing');
                    const bbqScore = outdoorActivityScore(sunWind, sunRain, 'bbq');
                    const fishG = outdoorGrade(fishScore);
                    const bbqG = outdoorGrade(bbqScore);
                    return [
                        {
                            key: 'sat-fish',
                            emoji: '🎣',
                            title: '이번 주 토요일 낚시 지수',
                            wind: satWind,
                            rain: satRain,
                            score: fishScore,
                            grade: fishG.grade,
                            tier: fishG.tier,
                            color: fishG.color,
                            hint: fishScore >= 55 ? '바람 잔잔 · 항구·방파제 OK' : '바람/비 — 실내 플랜 B',
                        },
                        {
                            key: 'sun-bbq',
                            emoji: '🥩',
                            title: '이번 주 일요일 바베큐 지수',
                            wind: sunWind,
                            rain: sunRain,
                            score: bbqScore,
                            grade: bbqG.grade,
                            tier: bbqG.tier,
                            color: bbqG.color,
                            hint: bbqScore >= 55 ? '그릴 가도 OK' : '소나기 예보 — 실내 BBQ',
                        },
                    ];
                });

                const LAUNDRY_RING_R = 15.5;
                const laundryRingLen = 2 * Math.PI * LAUNDRY_RING_R;

                const laundryScore = computed(() => {
                    const { temp, humidity, wind, rain } = weather.value;
                    let score = 48;
                    score -= rain * 0.45;
                    if (humidity < 55) score += 18;
                    else if (humidity < 68) score += 8;
                    else if (humidity < 78) score -= 4;
                    else score -= (humidity - 78) * 1.1;
                    if (wind >= 8 && wind <= 32) score += 14;
                    else if (wind < 5) score -= 10;
                    if (temp >= 15 && temp <= 27) score += 14;
                    else if (temp >= 10) score += 4;
                    else score -= 12;
                    if (weather.value.uv >= 5) score += 6;
                    return Math.round(Math.max(0, Math.min(100, score)));
                });

                const laundryRingOffset = computed(() => {
                    return laundryRingLen * (1 - laundryScore.value / 100);
                });

                const laundryVisual = computed(() => {
                    const s = laundryScore.value;
                    if (s >= 82) {
                        return {
                            tier: 'great', label: '빨래 최고의 날', hint: '햇볕·바람 완벽 — 밖에 널면 금방 말라요',
                            icon: '👕', sky: '☀️', ringColor: '#4ade80', sway: true, wet: false,
                            clothes: ['👕', '👖', '🧦', '🩳'],
                        };
                    }
                    if (s >= 62) {
                        return {
                            tier: 'good', label: '건조 괜찮아요', hint: '실외 건조 추천 · 오후가 더 좋아요',
                            icon: '🌤️', sky: '🌤️', ringColor: '#38bdf8', sway: true, wet: false,
                            clothes: ['👕', '👔', '🧦', ''],
                        };
                    }
                    if (s >= 42) {
                        return {
                            tier: 'ok', label: '반반의 날', hint: '널 수는 있는데 습하면 조금 걸려요',
                            icon: '⛅', sky: '⛅', ringColor: '#fbbf24', sway: false, wet: false,
                            clothes: ['👕', '👖', '', ''],
                        };
                    }
                    if (s >= 22) {
                        return {
                            tier: 'meh', label: '실내 건조 추천', hint: '습도·강수 때문에 밖은 애매해요',
                            icon: '🏠', sky: '🌥️', ringColor: '#94a3b8', sway: false, wet: false,
                            clothes: ['👕', '', '', ''],
                        };
                    }
                    return {
                        tier: 'bad', label: '오늘은 보류', hint: '비·습함 — 건조기나 실내 걸이로',
                        icon: '💧', sky: '🌧️', ringColor: '#60a5fa', sway: false, wet: true,
                        clothes: ['👕', '👖', '', ''],
                    };
                });

                const laundryBar = computed(() => {
                    const s = laundryScore.value;
                    const fill = Math.ceil(s / 20);
                    const colors = ['#f87171', '#fb923c', '#fbbf24', '#38bdf8', '#4ade80'];
                    return colors.map((color, i) => ({
                        on: i < fill,
                        color,
                    }));
                });

                const laundryClothes = computed(() => laundryVisual.value.clothes.filter(Boolean));

                const mosquitoTipMemo = computed(() => {
                    const hit = memoList.value.find((m) => /모기|퇴치/i.test(m.title || ''));
                    return hit || null;
                });

                const fxRate = ref(DEFAULT_RATE);
                const fxBaseline = ref(DEFAULT_RATE);
                const marketRate = ref(null);
                const nzdAmount = ref(1);
                const krwAmount = ref(DEFAULT_RATE);
                const fxLock = ref(null);
                const FX_RING_LEN = 2 * Math.PI * 15.5;
                const fxSparkW = 200;
                const fxSparkH = 36;

                const fxActiveRate = computed(() => marketRate.value != null ? marketRate.value : fxRate.value);

                const fxRemitBoard = computed(() => {
                    void holidayRefreshTick.value;
                    const rate = Math.round(fxActiveRate.value * 10) / 10;
                    const base = fxBaseline.value || DEFAULT_RATE;
                    const diff = rate - base;
                    let hist = [];
                    try {
                        hist = JSON.parse(localStorage.getItem(STORAGE_FX_HIST) || '[]');
                    } catch (e) {}
                    const trendDown = hist.length >= 2 && hist[hist.length - 1].r < hist[hist.length - 2].r;
                    if (diff <= -2 || trendDown) {
                        return {
                            emoji: '📉',
                            title: '송금 찬스',
                            rateLabel: rate + '원',
                            hint: '기준 ' + base + '원 대비 ' + (diff >= 0 ? '+' : '') + diff.toFixed(1) + '원',
                            borderClass: 'border-emerald-500/40 bg-emerald-950/30',
                            textClass: 'text-emerald-300',
                        };
                    }
                    if (diff >= 2) {
                        return {
                            emoji: '📈',
                            title: '송금 보류',
                            rateLabel: rate + '원',
                            hint: '기준보다 높음 · 며칠 기다려 볼까요?',
                            borderClass: 'border-rose-500/35 bg-rose-950/25',
                            textClass: 'text-rose-300',
                        };
                    }
                    return {
                        emoji: '➖',
                        title: '보통 구간',
                        rateLabel: rate + '원',
                        hint: '기준 ' + base + '원 근처',
                        borderClass: 'border-cyan-500/25 bg-slate-900/40',
                        textClass: 'text-cyan-200',
                    };
                });

                const fxVisual = computed(() => {
                    const rate = fxActiveRate.value;
                    const base = fxBaseline.value || DEFAULT_RATE;
                    const diff = rate - base;
                    const pct = base ? (diff / base) * 100 : 0;
                    if (pct >= 2.5) return { tier: 'great', label: '송금 최고 타이밍', hint: '기준보다 +' + diff.toFixed(0) + '원 (+' + pct.toFixed(1) + '%)', color: '#4ade80', emoji: '📈', pct };
                    if (pct >= 1) return { tier: 'good', label: '괜찮은 환율', hint: '기준보다 +' + diff.toFixed(0) + '원', color: '#38bdf8', emoji: '📈', pct };
                    if (pct >= -0.8) return { tier: 'ok', label: '보통', hint: '기준(' + base + ') 근처', color: '#fbbf24', emoji: '➖', pct };
                    if (pct >= -2.5) return { tier: 'meh', label: '조금 아쉬워요', hint: diff.toFixed(0) + '원 낮음', color: '#94a3b8', emoji: '📉', pct };
                    return { tier: 'bad', label: '기다리는 게 나을 수 있어요', hint: diff.toFixed(0) + '원 낮음 (' + pct.toFixed(1) + '%)', color: '#f87171', emoji: '📉', pct };
                });

                const fxScore = computed(() => {
                    const pct = fxVisual.value.pct || 0;
                    return Math.round(Math.max(0, Math.min(100, 50 + pct * 9)));
                });

                const fxRingLen = FX_RING_LEN;
                const fxRingOffset = computed(() => FX_RING_LEN * (1 - fxScore.value / 100));

                const fxScaleSpan = 28;
                const fxScaleMin = computed(() => Math.round((fxBaseline.value || DEFAULT_RATE) - fxScaleSpan));
                const fxScaleMax = computed(() => Math.round((fxBaseline.value || DEFAULT_RATE) + fxScaleSpan));

                const fxMarkerPos = computed(() => {
                    const rate = fxActiveRate.value;
                    const min = fxScaleMin.value;
                    const max = fxScaleMax.value;
                    return Math.max(4, Math.min(96, ((rate - min) / (max - min)) * 100));
                });

                const fxBasePos = computed(() => {
                    const base = fxBaseline.value || DEFAULT_RATE;
                    const min = fxScaleMin.value;
                    const max = fxScaleMax.value;
                    return Math.max(4, Math.min(96, ((base - min) / (max - min)) * 100));
                });

                const fxDiffHtml = computed(() => {
                    const v = fxVisual.value;
                    const rate = fxActiveRate.value;
                    const base = fxBaseline.value;
                    const sign = v.pct >= 0 ? '+' : '';
                    return '시장 <strong style="color:' + v.color + '">' + rate.toFixed(1) + '</strong> · 기준 ' + base + ' 대비 <strong>' + sign + v.pct.toFixed(1) + '%</strong>';
                });

                const fxSparkPoints = computed(() => {
                    let hist = [];
                    try {
                        hist = JSON.parse(localStorage.getItem(STORAGE_FX_HIST) || '[]');
                    } catch (e) {}
                    if (hist.length < 2) return '';
                    const rates = hist.map((p) => p.r);
                    const lo = Math.min(...rates, fxScaleMin.value) - 2;
                    const hi = Math.max(...rates, fxScaleMax.value) + 2;
                    return rates.map((r, i) => {
                        const x = (i / (rates.length - 1)) * fxSparkW;
                        const y = fxSparkH - ((r - lo) / (hi - lo)) * fxSparkH;
                        return x.toFixed(1) + ',' + y.toFixed(1);
                    }).join(' ');
                });

                const fxSparkArea = computed(() => {
                    const pts = fxSparkPoints.value;
                    if (!pts) return '';
                    return '0,' + fxSparkH + ' ' + pts + ' ' + fxSparkW + ',' + fxSparkH;
                });

                const heroChartW = 480;
                const heroChartH = 140;
                const heroPulseTick = ref(0);
                const heroBars = ref(Array.from({ length: 12 }, (_, i) => 28 + (i % 6) * 11));
                const HERO_QUEST_RING_LEN = 2 * Math.PI * 42;

                const heroGradFx = computed(() => 'heroGradFx-' + neonTheme.value);

                const heroGridLines = computed(() => {
                    const step = heroChartH / 4;
                    return [1, 2, 3].map((n) => Math.round(step * n));
                });

                const heroGridCols = computed(() => {
                    const step = heroChartW / 6;
                    return Array.from({ length: 5 }, (_, i) => Math.round(step * (i + 1)));
                });

                const heroFxRates = computed(() => {
                    void heroPulseTick.value;
                    let hist = [];
                    try {
                        hist = JSON.parse(localStorage.getItem(STORAGE_FX_HIST) || '[]');
                    } catch (e) {}
                    if (hist.length >= 2) return hist.slice(-24).map((p) => p.r);
                    const rate = fxActiveRate.value;
                    const base = fxBaseline.value || DEFAULT_RATE;
                    const tick = heroPulseTick.value;
                    return Array.from({ length: 24 }, (_, i) => {
                        const drift = (i / 23) * (rate - base) * 0.35;
                        const wave = Math.sin(i * 0.55 + tick * 0.18) * 1.6 + Math.cos(i * 0.22 + tick * 0.11) * 0.8;
                        return rate - drift + wave;
                    });
                });

                const heroMapY = (r, lo, hi) => heroChartH - ((r - lo) / (hi - lo || 1)) * (heroChartH - 14) - 7;

                const heroFxLinePath = computed(() => {
                    const rates = heroFxRates.value;
                    if (!rates.length) return '';
                    const lo = Math.min(...rates, fxScaleMin.value) - 2;
                    const hi = Math.max(...rates, fxScaleMax.value) + 2;
                    const n = rates.length;
                    return rates.map((r, i) => {
                        const x = (i / Math.max(1, n - 1)) * heroChartW;
                        const y = heroMapY(r, lo, hi);
                        return (i === 0 ? 'M' : 'L') + x.toFixed(1) + ' ' + y.toFixed(1);
                    }).join(' ');
                });

                const heroFxAreaPath = computed(() => {
                    const line = heroFxLinePath.value;
                    if (!line) return '';
                    return line + ' L' + heroChartW + ' ' + heroChartH + ' L0 ' + heroChartH + ' Z';
                });

                const heroQuestPath = computed(() => {
                    void heroPulseTick.value;
                    const pct = settlementQuestPct.value / 100;
                    const baseY = heroChartH - pct * (heroChartH - 18) - 9;
                    const n = 24;
                    const tick = heroPulseTick.value;
                    return Array.from({ length: n }, (_, i) => {
                        const x = (i / Math.max(1, n - 1)) * heroChartW;
                        const y = baseY + Math.sin(i * 0.42 + tick * 0.14) * 5;
                        return (i === 0 ? 'M' : 'L') + x.toFixed(1) + ' ' + y.toFixed(1);
                    }).join(' ');
                });

                const heroFxDot = computed(() => {
                    const rates = heroFxRates.value;
                    if (!rates.length) return null;
                    const lo = Math.min(...rates, fxScaleMin.value) - 2;
                    const hi = Math.max(...rates, fxScaleMax.value) + 2;
                    const n = rates.length;
                    const i = n - 1;
                    return {
                        x: (i / Math.max(1, n - 1)) * heroChartW,
                        y: heroMapY(rates[i], lo, hi),
                    };
                });

                const heroQuestRingLen = HERO_QUEST_RING_LEN;
                const heroQuestRingOffset = computed(() => HERO_QUEST_RING_LEN * (1 - settlementQuestPct.value / 100));

                const heroSparkHeights = (seed) => Array.from({ length: 8 }, (_, i) => 28 + ((seed + i * 13) % 62));

                const heroStatCards = computed(() => {
                    const w = weather.value;
                    const ping = pingStatus.value;
                    return [
                        {
                            id: 'wx',
                            label: '오클랜드 날씨',
                            value: w.temp + '° · ' + w.condition,
                            delay: 0,
                            sparkHeights: heroSparkHeights(Math.round(w.temp)),
                        },
                        {
                            id: 'ping',
                            label: '해외 Ping',
                            value: ping.label,
                            delay: 0.15,
                            sparkHeights: heroSparkHeights(Math.round(ping.ms || 42)),
                        },
                        {
                            id: 'fx',
                            label: '환율 스코어',
                            value: fxScore.value + ' / 100',
                            delay: 0.3,
                            sparkHeights: heroSparkHeights(Math.round(fxActiveRate.value)),
                        },
                        {
                            id: 'quest',
                            label: '정착 퀘스트',
                            value: settlementQuestDoneCount.value + ' / ' + settlementQuest.value.length,
                            delay: 0.45,
                            sparkHeights: heroSparkHeights(settlementQuestPct.value),
                        },
                    ];
                });

                const tickHeroPulse = () => {
                    heroPulseTick.value++;
                    heroBars.value = heroBars.value.map((h, i) => {
                        const wave = Math.sin(heroPulseTick.value * 0.35 + i * 0.55) * 18;
                        return Math.max(18, Math.min(96, 42 + wave + (Math.random() - 0.5) * 22));
                    });
                };

                const pushFxHistory = (rate) => {
                    try {
                        let arr = JSON.parse(localStorage.getItem(STORAGE_FX_HIST) || '[]');
                        arr = arr.filter((p) => Date.now() - p.t < 7 * 24 * 3600 * 1000);
                        arr.push({ t: Date.now(), r: rate });
                        if (arr.length > 24) arr = arr.slice(-24);
                        localStorage.setItem(STORAGE_FX_HIST, JSON.stringify(arr));
                    } catch (e) {}
                };

                const fetchFxMarket = async () => {
                    try {
                        const res = await fetch('https://open.er-api.com/v6/latest/NZD');
                        const json = await res.json();
                        if (json.result === 'success' && json.rates?.KRW) {
                            marketRate.value = Math.round(json.rates.KRW * 100) / 100;
                            fxRate.value = marketRate.value;
                            pushFxHistory(marketRate.value);
                            calcFromNzd();
                        }
                    } catch (e) {}
                };

                const binAddress = ref('79 Kingdale Road, Henderson, Auckland 0610');
                const binCollectionDay = ref('목요일');
                const binToggles = ref({ Red: true, Yellow: true, Blue: false, Green: false });
                const bins = [
                    { id: 'Red', name: 'Red', emoji: '🔴', desc: '일반 쓰레기', bg: 'bg-red-600/85' },
                    { id: 'Yellow', name: 'Yellow', emoji: '🟡', desc: '재활용', bg: 'bg-yellow-500/85' },
                    { id: 'Blue', name: 'Blue', emoji: '🔵', desc: '유리·통 (격주)', bg: 'bg-blue-600/85' },
                    { id: 'Green', name: 'Green', emoji: '🟢', desc: '음식물', bg: 'bg-green-600/85' },
                ];

                const binMessage = computed(() => {
                    const on = bins.filter((b) => binToggles.value[b.id]).map((b) => b.name);
                    if (on.length === 0) return '이번 주 낼 통을 선택하세요.';
                    return '이번 주 낼 통: ' + on.join(' + ') + ' · ' + binCollectionDay.value + ' 아침 수거';
                });

                const updateClock = () => {
                    const now = new Date();
                    clockTime.value = now.toLocaleTimeString('ko-KR', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
                    clockDate.value = now.toLocaleDateString('ko-NZ', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
                    holidayRefreshTick.value++;
                };

                const persistFx = () => {
                    localStorage.setItem(STORAGE_FX, JSON.stringify({
                        rate: fxRate.value,
                        baseline: fxBaseline.value,
                        nzd: nzdAmount.value,
                        krw: krwAmount.value,
                    }));
                };

                const loadFx = () => {
                    try {
                        const s = JSON.parse(localStorage.getItem(STORAGE_FX) || '{}');
                        if (s.rate != null && s.rate > 0) fxRate.value = s.rate;
                        if (s.baseline != null && s.baseline > 0) fxBaseline.value = s.baseline;
                        if (s.nzd != null) nzdAmount.value = s.nzd;
                        if (s.krw != null) krwAmount.value = s.krw;
                    } catch (e) {}
                };

                const calcFromNzd = () => {
                    if (fxLock.value === 'krw') return;
                    fxLock.value = 'nzd';
                    krwAmount.value = Math.round((nzdAmount.value || 0) * (fxRate.value || DEFAULT_RATE));
                    fxLock.value = null;
                    persistFx();
                };

                const calcFromKrw = () => {
                    if (fxLock.value === 'nzd') return;
                    fxLock.value = 'krw';
                    const r = fxRate.value || DEFAULT_RATE;
                    nzdAmount.value = r ? Math.round(((krwAmount.value || 0) / r) * 100) / 100 : 0;
                    fxLock.value = null;
                    persistFx();
                };

                const onRateChange = () => {
                    calcFromNzd();
                };

                const resetRate = () => {
                    fxRate.value = DEFAULT_RATE;
                    fxBaseline.value = DEFAULT_RATE;
                    calcFromNzd();
                };

                const toggleBin = (id) => {
                    binToggles.value[id] = !binToggles.value[id];
                    binToggles.value = { ...binToggles.value };
                    saveBins();
                };

                const saveBins = () => {
                    localStorage.setItem(
                        STORAGE_BIN,
                        JSON.stringify({
                            address: binAddress.value,
                            collectionDay: binCollectionDay.value,
                            toggles: binToggles.value,
                        })
                    );
                };

                const loadBins = () => {
                    try {
                        const s = JSON.parse(localStorage.getItem(STORAGE_BIN) || '{}');
                        if (s.address) binAddress.value = s.address;
                        if (s.collectionDay) binCollectionDay.value = s.collectionDay;
                        if (s.toggles) binToggles.value = { ...binToggles.value, ...s.toggles };
                    } catch (e) {}
                };

                watch(fxRate, () => {
                    if (fxLock.value) return;
                    calcFromNzd();
                });

                const stopMosquitoTone = () => {
                    try {
                        if (mosquitoOsc) {
                            mosquitoOsc.stop();
                            mosquitoOsc.disconnect();
                            mosquitoOsc = null;
                        }
                        if (mosquitoGain) {
                            mosquitoGain.disconnect();
                            mosquitoGain = null;
                        }
                        if (mosquitoAudioCtx && mosquitoAudioCtx.state !== 'closed') {
                            mosquitoAudioCtx.close();
                            mosquitoAudioCtx = null;
                        }
                    } catch (e) {}
                };

                const startMosquitoTone = () => {
                    stopMosquitoTone();
                    try {
                        const Ctx = window.AudioContext || window.webkitAudioContext;
                        if (!Ctx) return;
                        mosquitoAudioCtx = new Ctx();
                        mosquitoOsc = mosquitoAudioCtx.createOscillator();
                        mosquitoGain = mosquitoAudioCtx.createGain();
                        mosquitoOsc.type = 'sine';
                        mosquitoOsc.frequency.value = 20000;
                        mosquitoGain.gain.value = 0.04;
                        mosquitoOsc.connect(mosquitoGain);
                        mosquitoGain.connect(mosquitoAudioCtx.destination);
                        mosquitoOsc.start();
                    } catch (e) {}
                };

                const toggleMosquito = () => {
                    mosquitoPlaying.value = !mosquitoPlaying.value;
                    if (mosquitoPlaying.value) {
                        startMosquitoTone();
                    } else {
                        stopMosquitoTone();
                    }
                };

                onMounted(() => {
                    applyNeonTheme(neonTheme.value);
                    seedMockDataIfEmpty();
                    updateClock();
                    clockId = setInterval(updateClock, 1000);
                    loadCustom();
                    loadMemos();
                    loadFx();
                    loadBins();
                    loadGroceryWatch();
                    loadMartStores();
                    loadFuel();
                    loadRent();
                    loadKoreanMartSales();
                    loadProperty();
                    loadAtRoutes();
                    loadSettlementQuest();
                    quickNote.value = localStorage.getItem(STORAGE_NOTE) || quickNote.value;
                    fetchFxMarket();
                    runPingTest();
                    pingIntervalId = setInterval(runPingTest, 90000);
                    tickHeroPulse();
                    heroAnimId = setInterval(tickHeroPulse, 1400);
                    if (!localStorage.getItem(STORAGE_FX)) {
                        krwAmount.value = Math.round(nzdAmount.value * fxRate.value);
                        persistFx();
                    }
                });

                onUnmounted(() => {
                    if (clockId) clearInterval(clockId);
                    if (heroAnimId) clearInterval(heroAnimId);
                    if (pingIntervalId) clearInterval(pingIntervalId);
                    stopMosquitoTone();
                    mosquitoPlaying.value = false;
                });

                return {
                    clockTime,
                    clockDate,
                    envMode,
                    setEnv,
                    neonTheme,
                    neonThemes,
                    setNeonTheme,
                    mobileInputAttrs,
                    aucklandDayIndex,
                    nightMarkets,
                    nightMarketToday,
                    nightMarketWeek,
                    martCatalogLinks,
                    groceryWatchList,
                    groceryNewName,
                    persistGroceryWatch,
                    addGroceryWatchItem,
                    nzHolidayNext,
                    nzHolidayUpcoming,
                    martStores,
                    activeMartId,
                    activeMartCloseTime,
                    persistMartStores,
                    onMartCloseTimeChange,
                    resetMartCloseDefault,
                    martCountdown,
                    martHolidayAlert,
                    consulateStatus,
                    launcherGrid,
                    toolkitUrl,
                    blogBase,
                    dashOnLocal,
                    adminBase,
                    adminLoginUrl,
                    adminPostsUrl,
                    blogCategories,
                    blogForm,
                    blogBusy,
                    blogMsg,
                    blogMsgErr,
                    generateBlogAi,
                    copyBlogChatGptPrompt,
                    pasteBlogJsonFromClipboard,
                    saveBlogPost,
                    quickNote,
                    saveNote,
                    memoListSorted,
                    memoDraftTitle,
                    memoDraftBody,
                    activeMemoId,
                    selectMemo,
                    startNewMemo,
                    saveMemoDraft,
                    debouncedMemoAutosave,
                    deleteActiveMemo,
                    newName,
                    newUrl,
                    addLink,
                    removeLink,
                    linkTarget,
                    weather,
                    laundryScore,
                    laundryVisual,
                    laundryRingLen,
                    laundryRingOffset,
                    laundryBar,
                    laundryClothes,
                    fxRate,
                    fxBaseline,
                    fxVisual,
                    fxScore,
                    fxRingLen,
                    fxRingOffset,
                    fxScaleMin,
                    fxScaleMax,
                    fxMarkerPos,
                    fxBasePos,
                    fxDiffHtml,
                    fxSparkPoints,
                    fxSparkArea,
                    fxSparkW,
                    fxSparkH,
                    fxActiveRate,
                    heroChartW,
                    heroChartH,
                    heroGradFx,
                    heroGridLines,
                    heroGridCols,
                    heroFxLinePath,
                    heroFxAreaPath,
                    heroQuestPath,
                    heroFxDot,
                    heroQuestRingLen,
                    heroQuestRingOffset,
                    heroBars,
                    heroStatCards,
                    nzdAmount,
                    krwAmount,
                    calcFromNzd,
                    calcFromKrw,
                    onRateChange,
                    resetRate,
                    bins,
                    binToggles,
                    binAddress,
                    binMessage,
                    toggleBin,
                    saveBins,
                    loadBins,
                    mosquitoPlaying,
                    toggleMosquito,
                    mosquitoTipMemo,
                    asmrGroups,
                    newsMarqueeDoubled,
                    fuelPrices,
                    fuelTrend,
                    fuelQuickLinks,
                    saveFuelPrices,
                    weekendScores,
                    rentWeeklyAmount,
                    rentWeekday,
                    rentWeekdayOptions,
                    persistRent,
                    rentDDay,
                    fxRemitBoard,
                    pingStatus,
                    runPingTest,
                    koreanMartLinks,
                    koreanMartSales,
                    persistKoreanMartSales,
                    taxAnnualGross,
                    taxKiwiSaverPct,
                    irdTaxResult,
                    emergencyContacts,
                    settlementQuestPct,
                    settlementQuestDoneCount,
                    settlementQuest,
                    toggleSettlementQuest,
                    propertyQuickLinks,
                    propertyOcr,
                    propertyOcrNeonLabel,
                    propertySim,
                    propertyAreas,
                    propertyNorthShoreSummary,
                    propertyAreaSim,
                    persistProperty,
                    addPropertyArea,
                    atTransitApiReady,
                    atRoutes,
                    atRouteRows,
                    atNewRouteCode,
                    atNewRouteType,
                    atStatusOptions,
                    addAtRoute,
                    updateAtRouteStatus,
                    removeAtRoute,
                    schoolLevelFilters,
                    schoolCampLevel,
                    schoolCampQuickLinks,
                    schoolBreakNext,
                    schoolBreakUpcoming,
                    filteredCampVenues,
                };
            },
        }).mount('#app');
    </script>
</body>
</html>
② 오클랜드 실시간 유가 — 이번 주 TOP5

매주 월요일 아침 갱신하는 교민용 주유소 순위입니다. 당일 최저가는 Gaspy로 확인하세요.
유가 TOP3 툴 ↗
갱신: 2026-05-19 · 이번 주 (월요일 갱신)
Gaspy·교민 경험 기준 정리 — 당일 최저가는 Gaspy 앱으로 확인
West · Henderson

Gull — Lincoln Rd Henderson — 서부에서 자주 저렴
Waitomo — Lincoln Rd Henderson — Gull 인근 비교
Pak'nSave Fuel — Lincoln Rd Henderson — 장보기 겸
Z — Te Atatū South Te Atatū — 이동 시
Mobil — Massey Massey — 늦은 시간 편의
Central · CBD

Gull — Hobson St CBD — 시내 Gull
Waitomo — Quay St CBD — Waitomo 시내
Gull — Kingsland Kingsland — Central 근교
BP Connect — Victoria St CBD — 편의
Z — Newmarket Newmarket — 쇼핑 동선
North Shore

Gull — Wairau Rd Wairau — 노스쇼어 Gull
Waitomo — Albany Hwy Albany — Albany
Gull — Glenfield Glenfield — Glenfield
Mobil — Takapuna Takapuna — 해변 동선
Z — Browns Bay Browns Bay — 동부 해안
South · Manukau

Gull — Great South Rd Manukau — 남부 Gull
Waitomo — Manukau Manukau — 센터
Pak'nSave Fuel — Manukau Manukau — 마트 연계
Gull — Papatoetoe Papatoetoe — Papatoetoe
Z — Manurewa Manurewa — 남부 이동
③ "이것만은 제발 알고 오자" — 정착 잔혹동화

IRD·플랫·버스 미아·영사관 삽질기를 덤덤하고 날카른 개발자 톤으로 연재하세요. 코포·단톡에는 요약만 올리고 "자세한 삽질기는 블로그" 링크를 걸면 유입이 큽니다.
플랫(Flat) 계약 · 본드 · 사기 피하는 법
IRD 세금 번호 신청하다 뇌정지 온 썰
AT 버스 끊겨서 미아 된 눈물겨운 경험담
영사민원24 · 순회영사 D-Day 실전
블로그 · 오클랜드 치트키 글 보기 비자 점수 툴 영사 툴
④ "오늘 빨래 지수" — 주간 스포트라이트

이번 주 빨래 좋은 날: 화요일, 수요일, 목요일 — 최고는 화요일 (72점).
날짜	요일	지수	한줄
2026-05-26	화요일	72	밖에 널기 괜찮아요
2026-05-27	수요일	63	밖에 널기 괜찮아요
2026-05-28	목요일	67	밖에 널기 괜찮아요
2026-05-29	금요일	54	실내 건조 추천
2026-05-30	토요일	59	실내 건조 추천
2026-05-31	일요일	38	빨래 보류
2026-06-01	월요일	19	빨래 보류
대시보드 빨래 위젯