* { box-sizing: border-box; }
    body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:#f7f7f5; color:#222; }
    .app { max-width:520px; margin:0 auto; min-height:100vh; padding:24px 18px 110px; position:relative; }
    .header { margin-bottom:22px; padding-right:104px; }
    .title { font-size:30px; font-weight:900; margin:0 0 8px; letter-spacing:-0.6px; }
    .subtitle { font-size:15px; color:#666; line-height:1.5; margin:0; }
    .excel-toggle { position:absolute; top:24px; right:18px; width:auto; border:1px solid #D1D5DB; background:#fff; padding:8px 11px; border-radius:999px; font-size:12px; font-weight:800; cursor:pointer; margin-bottom:0; color:#475569; }
    .tabs { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:16px; }
    .tab-btn { border:1px solid #ddd; background:#fff; padding:13px 8px; border-radius:16px; font-size:14px; font-weight:800; cursor:pointer; }
    .tab-btn.active { backgroboutund:linear-gradient(135deg, #5FA8EF 0%, #7DB7F5 100%); color:#fff; border-color:#7DB7F5; }
    .page { display:none; } .page.active { display:block; }
    .card { background:#fff; border-radius:24px; padding:22px; box-shadow:0 8px 24px rgba(0,0,0,.06); margin-bottom:16px; }
    .section-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
    .section-title { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:800; margin:0; }
    .title-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:0 0 28px; color:#5FA8EF; }
    .title-icon svg { width:24px; height:24px; stroke:currentColor; }
    .skip-btn { border:none; background:transparent; color:#D5D5D5; opacity:0.75; padding:0; border-radius:0; font-size:13px; font-weight:800; cursor:pointer; }
    .skip-btn.active { background:transparent; color:#5FA8EF; opacity:1; }
    .options { display:flex; flex-wrap:wrap; gap:10px; }
    .option { border:1px solid #ECECEC; background:#fafafa; color:#5F6368; opacity:0.92; padding:10px 14px; border-radius:999px; font-size:14px; cursor:pointer; transition:.15s; }
    .option.active { background:#7DB7F5; color:#fff; border-color:#7DB7F5; opacity:1; box-shadow:0 4px 12px rgba(125,183,245,0.35); }
    .options[data-group="mood"] .option.active::before { content:"✓ "; }
    .input-box { width:100%; border:1px solid #ddd; border-radius:16px; padding:13px 14px; font-size:14px; outline:none; margin-top:10px; background:#fafafa; font-family:inherit; resize:vertical; }
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    input[type="number"] { -moz-appearance: textfield; }
    .input-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
    .guide { font-size:13px; color:#888; line-height:1.5; margin:10px 0 0; }
    .recommend-btn { width:100%; border:none; background:#7DB7F5; color:#fff; font-size:16px; font-weight:800; padding:17px; border-radius:18px; cursor:pointer; margin:4px 0 16px; }
    .recommend-btn:active { transform:scale(.98); }
    .loading-card, .result-card { display:none; text-align:center; animation:fadeIn .25s ease; }
    .loading-card { background: linear-gradient(180deg, #fff9f1 0%, #fff4ed 55%, #fff0e6 100%); border: 1px solid rgba(255, 138, 91, .18); box-shadow: 0 20px 50px rgba(255, 138, 91, .08); padding: 32px 24px; position: relative; overflow: hidden; }
    .loading-card::before { content: ""; position: absolute; top: -20px; right: -20px; width: 120px; height: 120px; background: rgba(255, 138, 91, .08); border-radius: 50%; }
    .loading-title { font-size: 20px; font-weight: 800; color: #cd6f35; margin-bottom: 20px; }
    .candidate-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
    .chip { background: #FF8A5B; color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; opacity: 0; animation: chipFade 0.3s ease forwards; }
    .chip.visible { opacity: 1; }
    .result-card { display:none; text-align:center; animation:fadeIn .25s ease; }
    .result-card.loading .menu-name { color:#7DB7F5; animation:menuPulse .8s ease-in-out infinite; }
    .result-label { font-size:14px; color:#777; margin-bottom:8px; }
    .menu-name { font-size:34px; font-weight:900; margin:8px 0 14px; letter-spacing:-.8px; word-break:keep-all; color:#FF6F3F; animation:menuPop .35s ease both; }
    .menu-name.loading { opacity:.92; }
    .menu-name.animate { animation: menuPop 0.5s ease; }
    .reason { font-size:15px; line-height:1.65; color:#444; margin-bottom:18px; }
    .tag-row { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
    .tag { font-size:13px; background:#f0f0ee; padding:7px 10px; border-radius:999px; color:#555; }
    .alternatives { background:#f7f7f5; border-radius:18px; padding:14px; text-align:left; margin-bottom:16px; white-space:pre-line; }
    .alternatives-title { font-size:14px; font-weight:800; margin-bottom:8px; }
    .alternative-list { font-size:14px; color:#555; line-height:1.6; }
    .sub-buttons { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .sub-buttons.one { grid-template-columns:1fr; }
    .sub-btn { border:1px solid #ddd; background:#fff; border-radius:14px; padding:12px; cursor:pointer; font-size:14px; font-weight:700; }
    .mode-panel { display:none; } .mode-panel.active { display:block; }
    .roulette-item { padding:18px; border:1px solid var(--main-border); border-radius:22px; background:linear-gradient(180deg,#fff 0%, #FFF9F5 100%); box-shadow:0 8px 24px rgba(255,138,91,.08); margin-bottom:14px; }
    .roulette-item:last-child { margin-bottom:0; }
    .roulette-title { font-weight:950; margin-bottom:6px; font-size:19px; color:var(--main-strong); letter-spacing:-.3px; }
    body.excel-mode .roulette-title { color:#217346; }
    .roulette-items { font-size:13px; color:#6B7280; line-height:1.55; word-break:keep-all; cursor:pointer; }
    .roulette-items.expanded { white-space:normal; }

    .roulette-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
    .roulette-more-wrap { position:relative; flex:0 0 auto; }
    .roulette-more-btn { border:none; background:transparent; padding:8px 10px; cursor:pointer; font-size:22px; font-weight:900; line-height:1; color:#777; font-family:inherit; margin:-8px -10px 0 0; }
    .roulette-more-menu { position:absolute; top:38px; right:0; min-width:104px; background:#fff; border:1px solid #e5e5e5; border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.12); padding:6px; display:none; z-index:20; }
    .roulette-more-menu.active { display:block; }
    .roulette-more-menu button { width:100%; border:none; background:#fff; padding:10px 12px; border-radius:10px; text-align:left; font-size:13px; font-weight:800; cursor:pointer; color:#333; font-family:inherit; }
    .roulette-more-menu button:hover { background:#f5f5f5; }
    .roulette-more-menu button.danger { color:#ef4444; }
    .roulette-action-row { margin-top:14px; }
    .roulette-action-row .sub-btn { width:100%; padding:13px; font-size:14px; border-radius:16px; background:linear-gradient(135deg,var(--main-soft) 0%, #FFEADF 100%); color:var(--main-strong); border-color:var(--main-border); font-weight:900; }
    .roulette-create-card { padding:26px 22px 24px; }
    .roulette-create-card .section-title { font-size:19px; }
    .roulette-create-card .recommend-btn { margin-bottom:0; padding:18px; }
    .roulette-action-popup-overlay { position:fixed; inset:0; z-index:100000; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.28); animation:fadeIn .2s ease; }
    .roulette-action-popup-overlay.active { display:flex !important; }
    .roulette-action-popup { width:min(300px,100%); background:#fff; border-radius:22px; padding:12px; box-shadow:0 16px 44px rgba(0,0,0,.18); }
    .roulette-action-popup-title { padding:10px 12px 12px; font-size:15px; font-weight:900; color:#222; }
    .roulette-action-popup-desc { margin:0 12px 10px; color:#777; font-size:13px; line-height:1.5; }
    .roulette-action-popup button { width:100%; border:none; background:#fff; padding:14px 12px; border-radius:14px; text-align:left; font-size:15px; font-weight:800; cursor:pointer; color:#222; font-family:inherit; }
    .roulette-action-popup button:hover { background:#f5f5f5; }
    .roulette-action-popup button.danger { color:#ef4444; }
    .roulette-action-popup button.cancel { color:#777; text-align:center; margin-top:4px; background:#f7f7f5; }
    .roulette-delete-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
    .roulette-delete-actions button { width:100%; border:none; border-radius:16px; padding:14px 12px; font-size:15px; font-weight:900; cursor:pointer; font-family:inherit; text-align:center; }
    .roulette-delete-actions .cancel { background:#f7f7f5; color:#777; margin-top:0; }
    .roulette-delete-actions .danger { background:#fff1f1; color:#ef4444; }
    body.excel-mode .roulette-more-btn, body.excel-mode .roulette-more-menu, body.excel-mode .roulette-more-menu button, body.excel-mode .roulette-action-popup, body.excel-mode .roulette-action-popup button { border-radius:0; }
    body.excel-mode .roulette-more-btn { color:#217346; }
    body.excel-mode .roulette-action-row .sub-btn { background:#e8f3e8; color:#217346; border-color:#b6cdb6; }
    .roulette-edit-guide { display:none; margin:10px 0 0; color:#5fa8ef; font-size:13px; font-weight:800; line-height:1.5; }
    .roulette-edit-guide.active { display:block; }
    .roulette-edit-cancel-btn { display:none; width:100%; border:1px solid #ddd; background:#fff; color:#777; font-size:14px; font-weight:900; padding:13px; border-radius:16px; cursor:pointer; margin-top:10px; font-family:inherit; }
    .roulette-edit-cancel-btn.active { display:block; }
    body.excel-mode .roulette-edit-guide { color:#217346; }
    body.excel-mode .roulette-edit-cancel-btn { border-radius:0; }

    .app-notice-popup-overlay { position:fixed; inset:0; z-index:100001; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.28); animation:fadeIn .2s ease; }
    .app-notice-popup-overlay.active { display:flex !important; }
    .app-notice-popup { width:min(300px,100%); background:#fff; border-radius:22px; padding:12px; box-shadow:0 16px 44px rgba(0,0,0,.18); }
    .app-notice-popup-title { padding:10px 12px 8px; font-size:15px; font-weight:900; color:#222; }
    .app-notice-popup-desc { margin:0 12px 14px; color:#777; font-size:13px; line-height:1.5; }
    .app-notice-popup button { width:100%; border:none; background:#f7f7f5; color:#777; padding:14px 12px; border-radius:14px; text-align:center; font-size:15px; font-weight:900; cursor:pointer; font-family:inherit; }
    body.excel-mode .app-notice-popup, body.excel-mode .app-notice-popup button { border-radius:0; }
    .item-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
    .item-chip { background:#f0f0ee; border-radius:999px; padding:8px 10px; font-size:13px; color:#444; }
    body.excel-mode { background-color:#f8faf8; background-image:linear-gradient(#dfe7df 1px,transparent 1px),linear-gradient(90deg,#dfe7df 1px,transparent 1px); background-size:32px 32px; }
    body.excel-mode .title::before { content:"📊 "; }
    body.excel-mode .card { border-radius:0; box-shadow:none; border:1px solid #9fb59f; background:rgba(255,255,255,.94); }
    body.excel-mode .tab-btn, body.excel-mode .option, body.excel-mode .sub-btn, body.excel-mode .recommend-btn, body.excel-mode .floating-recommend-btn, body.excel-mode .input-box, body.excel-mode .skip-btn, body.excel-mode .excel-toggle { border-radius:0; box-shadow:none; }
    body.excel-mode .tab-btn.active, body.excel-mode .option.active, body.excel-mode .recommend-btn, body.excel-mode .floating-recommend-btn, body.excel-mode .excel-toggle { background:#217346; border-color:#217346; color:#fff; }
    body.excel-mode .section-title::before { content:none; }
    body.excel-mode .skip-btn,
    body.excel-mode .skip-btn.active { background:transparent; border:none; }
    body.excel-mode .skip-btn.active { color:#217346; }
    body.excel-mode .title-icon { color:#217346; }
    body.excel-mode .alternatives { border-radius:0; border:1px solid #c7d8c7; background:#f8fff8; }
    body.excel-mode .tag, body.excel-mode .item-chip { border-radius:0; background:#e8f3e8; border:1px solid #b6cdb6; }
    body.excel-mode .menu-name { color:#217346; }

    .excel-result-table { display:none; }
    .excel-table { width:100%; border-collapse:collapse; background:#fff; table-layout:fixed; }
    .excel-table th, .excel-table td { border:1px solid #222; padding:8px 10px; vertical-align:top; word-break:keep-all; overflow-wrap:anywhere; }
    .excel-table th { background:#2f7d20; color:#111; font-weight:900; text-align:left; }
    .excel-table .excel-key { width:30%; font-weight:800; background:#fff; }
    .excel-table .excel-value { width:70%; white-space:pre-line; }
    body.excel-mode .excel-result-table { display:block; }
    body.excel-mode #resultCard > .result-label,
    body.excel-mode #resultCard > .menu-name,
    body.excel-mode #resultCard > .tag-row,
    body.excel-mode #resultCard > .reason,
    body.excel-mode #resultCard > .alternatives,
    body.excel-mode #payerResultCard > .result-label,
    body.excel-mode #payerResultCard > .menu-name,
    body.excel-mode #payerResultCard > .alternatives,
    body.excel-mode #rouletteResultCard > .result-label,
    body.excel-mode #rouletteResultCard > .menu-name { display:none; }
    body.excel-mode .result-card { text-align:left; }
    body.excel-mode .excel-result-table { background:#fff; padding:0; margin-bottom:16px; overflow:hidden; }
    body.excel-mode .excel-table { background:#fff; }
    body.excel-mode .excel-table td { background:#fff; }
    body.capture-mode .sub-buttons { display:none !important; }
    .floating-recommend-btn { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); width:min(calc(100% - 36px),484px); border:none; background:linear-gradient(135deg, #5FA8EF 0%, #7DB7F5 100%); color:#fff; font-size:17px; font-weight:900; padding:18px; border-radius:18px; cursor:pointer; z-index:50; box-shadow:0 10px 28px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; gap:10px; }
    .floating-recommend-btn:active { transform:translateX(-50%) scale(.98); }
    .recommend-btn-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
    .recommend-btn-icon svg { width:24px; height:24px; stroke:currentColor; }
    .recommend-btn-label { line-height:1; }


    .install-guide-overlay { position:fixed; inset:0; z-index:9998; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.42); animation:fadeIn .2s ease; }
    .install-guide-overlay.active { display:flex; }
    .install-guide-modal { width:min(360px,100%); background:#fff; border-radius:24px; padding:22px; box-shadow:0 16px 48px rgba(0,0,0,.18); }
    .install-guide-badge { display:inline-flex; align-items:center; gap:6px; margin-bottom:12px; padding:6px 10px; border-radius:999px; background:#eef6ff; color:#5fa8ef; font-size:12px; font-weight:900; }
    .install-guide-title { margin:0 0 14px; font-size:22px; font-weight:900; letter-spacing:-.5px; }
    .install-guide-steps { display:block; margin:0 0 18px; color:#777; font-size:13px; line-height:1.7; }
    .install-guide-step { background:transparent; border-radius:0; padding:0; font-size:13px; line-height:1.7; color:#777; }
    .install-guide-step strong { display:inline; color:#777; margin-bottom:0; font-size:13px; font-weight:800; }
    .install-guide-actions { display:block; }
    .install-guide-actions .install-guide-btn:not(.primary) { display:none; }
    .install-guide-btn { width:100%; border:none; background:#fff; border-radius:16px; padding:14px 10px; cursor:pointer; font-size:15px; font-weight:900; font-family:inherit; }
    .install-guide-btn.primary { background:#7DB7F5; color:#fff; }
    body.excel-mode .install-guide-modal { border-radius:0; border:1px solid #9fb59f; }
    body.excel-mode .install-guide-badge { border-radius:0; background:#e8f3e8; color:#217346; }
    body.excel-mode .install-guide-step, body.excel-mode .install-guide-btn { border-radius:0; }
    body.excel-mode .install-guide-btn.primary { background:#217346; color:#fff; }


    /* ===== Coral refresh UI: menu / payment fairy / my menu ===== */
    :root{
      --main:#FF8A5B;
      --main-strong:#FF6F3F;
      --main-soft:#FFF1E8;
      --main-softer:#FFF7F2;
      --main-border:#FFD1BD;
      --text:#111827;
      --sub:#6B7280;
      --line:#E5E7EB;
      --card:#FFFFFF;
    }
    body { background:#FBFAF7; color:var(--text); }
    .app { padding-top:24px; }
    .subtitle { color:var(--sub); }
    .excel-toggle { border-color:#D1D5DB; color:#475569; background:#fff; }
    .feature-hero{
      display:grid;
      grid-template-columns:1fr 132px;
      align-items:center;
      gap:10px;
      margin:0 0 14px;
      padding:18px 18px;
      border-radius:20px;
      background:linear-gradient(135deg,#FFF1E8 0%,#FFF7F2 100%);
      border:1px solid rgba(255,138,91,.18);
      overflow:hidden;
      min-height:132px;
    }
    .feature-hero-copy{ position:relative; z-index:1; }
    .feature-hero-title{ margin:0 0 16px; color:var(--main-strong); font-size:24px; font-weight:950; letter-spacing:-.8px; line-height:1.18; white-space:pre-line; }
    .feature-hero-desc{ margin:0; color:#374151; font-size:14px; font-weight:500; line-height:1.6; }
    .feature-hero-art{ position:relative; min-height:94px; display:flex; align-items:center; justify-content:center; }
    .feature-hero-art::before{ content:none; display:none; }
    .hero-food-plate,.hero-pig,.hero-lunchbox{ position:relative; width:118px; height:96px; }
    .hero-food-plate::before{ content:""; position:absolute; right:13px; top:12px; width:78px; height:78px; border-radius:50%; background:radial-gradient(circle at 50% 50%,#FFD86B 0 10%,#fff 11% 22%,transparent 23%), conic-gradient(#E84D3D 0 15%,#F6B34D 0 30%,#65B36F 0 47%,#7A4B2A 0 62%,#F3D4A0 0 78%,#3E7D46 0 100%); box-shadow:0 7px 18px rgba(0,0,0,.13), inset 0 0 0 8px #F8F3EA; border:5px solid #3B3330; }
    .hero-food-plate::after{ content:""; position:absolute; right:2px; top:65px; width:36px; height:22px; border-radius:50%; background:#8C4B2F; border:5px solid #F3E4CF; box-shadow:-62px 8px 0 -4px #C0894A; }
    .hero-pig::before{ content:""; position:absolute; right:18px; top:27px; width:72px; height:56px; border-radius:48% 52% 50% 50%; background:#FFC0B2; box-shadow:inset -8px -9px 0 rgba(255,138,91,.15),0 10px 18px rgba(0,0,0,.08); }
    .hero-pig::after{ content:"🐷"; position:absolute; right:33px; top:33px; font-size:34px; filter:saturate(.88); }
    .hero-pig .pig-hat{ position:absolute; right:28px; top:4px; width:0; height:0; border-left:17px solid transparent; border-right:17px solid transparent; border-bottom:40px solid var(--main-strong); transform:rotate(13deg); border-radius:8px; }
    .hero-pig .pig-wand{ position:absolute; right:95px; top:28px; width:38px; height:4px; background:#A66B45; transform:rotate(-35deg); border-radius:999px; }
    .hero-pig .pig-wand::before{ content:"★"; position:absolute; left:-13px; top:-18px; color:#F8B84E; font-size:25px; }
    .hero-pig .pig-calc{ position:absolute; right:0; bottom:9px; width:32px; height:42px; border-radius:7px; background:#555; box-shadow:inset 0 10px 0 #E5E7EB; }
    .hero-pig .pig-calc::after{ content:""; position:absolute; left:7px; top:18px; width:6px; height:6px; border-radius:2px; background:#F7B267; box-shadow:10px 0 #F7B267,0 10px #F7B267,10px 10px #F7B267; }
    .hero-lunchbox::before{ content:""; position:absolute; right:18px; top:30px; width:78px; height:48px; border-radius:14px; background:#FFD8C8; box-shadow:inset 0 -8px 0 rgba(255,138,91,.18),0 10px 18px rgba(0,0,0,.08); }
    .hero-lunchbox::after{ content:"🍙🥗"; position:absolute; right:24px; top:23px; font-size:36px; }
    .feature-hero-sparkle{ position:absolute; inset:0; pointer-events:none; }
    .feature-hero-sparkle::before{ content:"✦"; position:absolute; color:#FFB088; left:4px; top:6px; font-size:20px; }
    .feature-hero-sparkle::after{ content:"✦"; position:absolute; color:#FFD0A6; right:3px; bottom:5px; font-size:16px; }
    .tabs { gap:10px; }
    .tab-btn { border-color:var(--main-border); background:#fff; color:#111827; }
    .tab-btn.active { background:linear-gradient(135deg,var(--main) 0%,var(--main-strong) 100%); color:#fff; border-color:transparent; box-shadow:0 8px 18px rgba(255,111,63,.18); }
    .card { border:1px solid rgba(255,138,91,.08); box-shadow:0 10px 28px rgba(40,25,10,.06); }
    .title-icon { color:var(--main); }
    .skip-btn.active, .skip-btn { color:var(--main); }
    .option { background:#fff; border-color:var(--main-border); color:#111827; font-weight:800; }
    .option.active { background:linear-gradient(135deg,var(--main) 0%,var(--main-strong) 100%); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(255,111,63,.18); }
    .options[data-group="mood"] .option.active::before { content:""; }
    .input-box { background:#fff; border-color:var(--main-border); color:#111827; }
    .input-box:focus { border-color:var(--main); box-shadow:0 0 0 3px rgba(255,138,91,.12); }
    .guide { color:var(--sub); }
    .recommend-btn, .floating-recommend-btn { background:linear-gradient(135deg,var(--main) 0%,var(--main-strong) 100%); color:#fff; box-shadow:0 10px 24px rgba(255,111,63,.20); }
    .sub-btn { border-color:var(--main-border); color:#111827; }
    .install-guide-badge { background:var(--main-soft); color:var(--main-strong); }
    .install-guide-btn.primary { background:var(--main); }
    .payer-mode-options{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
    .payer-visual{ margin:20px auto 16px; min-height:124px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; }
    .payer-visual[hidden]{ display:none !important; }
    .payer-visual-text{ margin:0; font-size:14px; color:#374151; font-weight:800; line-height:1.55; }
    .draw-box-illust{ position:relative; width:116px; height:88px; margin:0 auto; }
    .draw-box-illust::before{ content:"?"; position:absolute; left:21px; top:24px; width:74px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:14px 14px 8px 8px; background:linear-gradient(135deg,#FFD8C8,#FFE7DA); color:var(--main-strong); font-size:42px; font-weight:950; box-shadow:0 10px 20px rgba(255,138,91,.13); }
    .draw-box-illust::after{ content:"★"; position:absolute; left:47px; top:0; color:#F6B84B; font-size:30px; text-shadow:-38px 42px 0 #FFD0A6,42px 38px 0 #FFD0A6; }
    .calc-illust{ position:relative; width:130px; height:94px; margin:0 auto; }
    .calc-illust::before{ content:""; position:absolute; left:18px; top:24px; width:48px; height:66px; border-radius:8px; background:#4B5563; box-shadow:inset 0 13px 0 #F1F5F9,0 10px 18px rgba(0,0,0,.10); }
    .calc-illust::after{ content:"₩"; position:absolute; left:72px; top:12px; width:45px; height:64px; border-radius:8px; background:#FFF1E8; color:var(--main-strong); font-size:27px; font-weight:950; display:flex; align-items:flex-start; justify-content:center; padding-top:10px; box-shadow:0 9px 18px rgba(255,138,91,.12), 24px 38px 0 -12px #F6B84B, 40px 38px 0 -12px #F6B84B; }
    .payer-result-btn{
      position:fixed;
      left:50%;
      bottom:18px;
      transform:translateX(-50%);
      width:min(calc(100% - 36px),484px);
      margin:0;
      z-index:50;
    }
    .payer-result-btn:active { transform:translateX(-50%) scale(.98); }
    .roulette-create-card { position:relative; overflow:hidden; }
    .roulette-create-card::after{ content:none; display:none; }
    .empty-menu-illust{ text-align:center; padding:10px 10px 6px; color:var(--sub); }
    .empty-menu-art{ width:180px; max-width:100%; margin:0 auto 8px; display:block; }
    .empty-menu-title{ margin:0 0 8px; font-size:18px; font-weight:950; color:#111827; }
    .empty-menu-desc{ margin:0; font-size:14px; color:var(--sub); }
    body.excel-mode .feature-hero{ display:none; }
    body.excel-mode .tab-btn.active, body.excel-mode .option.active, body.excel-mode .recommend-btn, body.excel-mode .floating-recommend-btn, body.excel-mode .excel-toggle { background:#217346; border-color:#217346; color:#fff; box-shadow:none; }
    body.excel-mode .option, body.excel-mode .tab-btn, body.excel-mode .input-box { border-color:#9fb59f; }
    body.excel-mode .skip-btn, body.excel-mode .skip-btn.active, body.excel-mode .title-icon { color:#217346; }


    .asset-img{ display:block; width:100%; height:auto; object-fit:contain; object-position:center; user-select:none; pointer-events:none; background:transparent; }
    .hero-asset-img{ display:block; width:auto; height:auto; max-width:150px; max-height:120px; margin-left:auto; background:transparent; }
    .hero-menu-asset{ max-width:170px; max-height:126px; transform:none; }
    .hero-payer-asset{ max-width:138px; max-height:126px; transform:none; }
    .hero-roulette-asset{ max-width:155px; max-height:120px; transform:none; }
    .payer-asset-img{ display:block; width:auto; height:auto; max-width:220px; max-height:160px; margin:0 auto; border-radius:0; background:transparent; }
    .payer-asset-box{ max-width:210px; max-height:170px; }
    .payer-asset-calc{ max-width:230px; max-height:165px; }
    .empty-menu-art-img{ width:160px; max-width:100%; margin:4px auto 12px; border-radius:0; background:transparent; }
    .roulette-more-btn{ color:var(--main-strong); }

    .hero-svg, .payer-svg, .empty-svg { width:100%; height:auto; display:block; }
    .hero-svg-wrap{ width:122px; height:96px; display:flex; align-items:center; justify-content:center; }
    .payer-illust-wrap{ width:150px; max-width:100%; margin:0 auto; }
    .saved-menu-section .section-title{ margin-bottom:2px; }


    /* ===== Excel mode only: remove illustrations + green accents ===== */

    /* 엑셀 모드: 결제 요청 설정의 큰 그림 삭제 */
    body.excel-mode .payer-visual .payer-asset-img,
    body.excel-mode .payer-visual .draw-box-illust,
    body.excel-mode .payer-visual .calc-illust,
    body.excel-mode .payer-illust-wrap {
      display: none !important;
    }

    body.excel-mode .payer-visual {
      min-height: 0;
      margin: 16px auto 14px;
      gap: 0;
    }

    body.excel-mode .payer-visual-text {
      color: #374151;
    }

    /* 엑셀 모드: 저장된 메뉴 빈 상태 그림 삭제 */
    body.excel-mode .empty-menu-art,
    body.excel-mode .empty-menu-art-img,
    body.excel-mode .empty-svg {
      display: none !important;
    }

    body.excel-mode .empty-menu-illust {
      padding: 18px 10px 8px;
    }

    body.excel-mode .empty-menu-title {
      color: #111827;
    }

    body.excel-mode .empty-menu-desc {
      color: #6B7280;
    }

    /* 엑셀 모드: 이미지 복사 / 다시 추천 버튼 초록 계열 */
    body.excel-mode .sub-buttons .sub-btn {
      border-color: #9fb59f;
      background: #ffffff;
      color: #217346;
      font-weight: 900;
    }

    body.excel-mode .sub-buttons .sub-btn:hover {
      background: #e8f3e8;
    }

    /* 엑셀 모드: 추가하기 버튼 초록 계열 */
    body.excel-mode .input-row .sub-btn {
      border-color: #9fb59f;
      background: #ffffff;
      color: #217346;
      font-weight: 900;
    }

    body.excel-mode .input-row .sub-btn:hover {
      background: #e8f3e8;
    }

    /* 엑셀 모드: 저장된 메뉴 카드 살구색 제거 */
    body.excel-mode .roulette-item {
      border-radius: 0;
      border-color: #9fb59f;
      background: #ffffff;
      box-shadow: none;
    }

    body.excel-mode .roulette-title {
      color: #217346;
    }

    body.excel-mode .roulette-items {
      color: #4B5563;
    }

    body.excel-mode .roulette-more-btn {
      color: #217346;
    }

    body.excel-mode .roulette-action-row .sub-btn {
      border-color: #9fb59f;
      background: #e8f3e8;
      color: #217346;
      box-shadow: none;
    }

    @media (max-width:380px){ .feature-hero{ grid-template-columns:1fr 104px; padding:16px; } .feature-hero-title{ font-size:21px; } .feature-hero-art{ transform:scale(.9); transform-origin:right center; } }

    @keyframes fadeIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
    @keyframes menuPop { 0% { opacity: 0; transform: scale(0.88); }
      60% { opacity: 1; transform: scale(1.06); }
      100% { transform: scale(1); }
    }
    @keyframes menuPulse { 0%, 100% { transform: scale(1); opacity: 0.9; }
      50% { transform: scale(1.02); opacity: 1; }
    }
    @keyframes chipFade { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }

/* ===== About page ===== */
.about-page {
  min-height: 100vh;
  padding: 24px 18px 40px;
  background: #FBFAF7;
  color: var(--text);
}

.about-container {
  width: min(100%, 760px);
  margin: 0 auto;
}

.about-top-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--sub);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.about-hero {
  display: grid;
  grid-template-columns: 1fr 118px;
  align-items: center;
  gap: 14px;
  padding: 24px;
  border: 1px solid rgba(255,138,91,.18);
  border-radius: 24px;
  background: linear-gradient(135deg,#FFF1E8 0%,#FFF7F2 100%);
  box-shadow: 0 10px 28px rgba(40,25,10,.06);
}

.about-label {
  margin: 0 0 8px;
  color: var(--main-strong);
  font-size: 13px;
  font-weight: 950;
}

.about-title {
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 950;
  letter-spacing: -.8px;
  line-height: 1.15;
}

.about-desc {
  margin: 0;
  color: #374151;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  word-break: keep-all;
}

.about-hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(255,111,63,.12);
  font-size: 44px;
}

.about-card {
  margin-top: 16px;
  padding: 22px;
  border: 1px solid rgba(255,138,91,.08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(40,25,10,.06);
}

.about-card h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.3px;
}

.about-card p {
  margin: 0;
  color: var(--sub);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
  word-break: keep-all;
}

.about-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.about-feature-item {
  padding: 16px;
  border: 1px solid var(--main-border);
  border-radius: 18px;
  background: var(--main-softer);
}

.about-feature-icon {
  display: block;
  margin-bottom: 8px;
  font-size: 24px;
}

.about-feature-item strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 950;
}

.about-feature-item p {
  font-size: 13px;
  line-height: 1.6;
}

.about-list {
  margin: 0;
  padding-left: 20px;
  color: var(--sub);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}

.about-excel-card {
  display: grid;
  grid-template-columns: 1fr 245px;
  gap: 18px;
  align-items: center;
}

.about-excel-preview {
  overflow: hidden;
  border: 1px solid #9fb59f;
  border-radius: 0;
  background: #fff;
  font-size: 12px;
}

.about-excel-toolbar {
  height: 28px;
  background: #217346;
}

.about-excel-row {
  display: grid;
  grid-template-columns: 1fr 64px;
}

.about-excel-row span {
  padding: 8px 9px;
  border-top: 1px solid #c7d8c7;
  border-right: 1px solid #c7d8c7;
  color: #111827;
}

.about-excel-row span:last-child {
  border-right: none;
  text-align: center;
}

.about-excel-row.header {
  background: #e8f3e8;
  font-weight: 950;
}

.about-footer {
  padding-top: 26px;
  text-align: center;
  color: #9a8a7b;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .about-hero {
    grid-template-columns: 1fr 80px;
    padding: 22px;
  }

  .about-title {
    font-size: 29px;
  }

  .about-hero-art {
    min-height: 80px;
    border-radius: 20px;
    font-size: 36px;
  }

  .about-feature-grid,
  .about-excel-card {
    grid-template-columns: 1fr;
  }
}


/* ===== Main bottom info + footer ===== */
.excel-toggle {
  top: 24px;
  right: 18px;
}

/* 푸터 위 안내 영역: 소개 / 앱처럼 사용하는 법 */
.main-bottom-info {
  margin: 44px 0 0;
  display: grid;
  gap: 18px;
}

.bottom-info-card {
  background: rgba(255, 248, 242, 0.94);
  border: 1px solid rgba(255, 138, 91, 0.24);
  border-radius: 28px;
  padding: 28px 26px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.bottom-info-title {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 950;
  color: var(--text, #111827);
  letter-spacing: -0.04em;
}

.bottom-info-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 700;
  color: var(--sub, #6B7280);
  word-break: keep-all;
}

.bottom-info-link {
  display: inline-flex;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 900;
  color: var(--main-strong, #FF6F3F);
  text-decoration: none;
}

.bottom-info-link:hover {
  text-decoration: underline;
}

.home-guide-list {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.home-guide-item {
  display: grid;
  gap: 4px;
  padding: 15px 16px;
  background: #ffffff;
  border: 1px solid rgba(255, 138, 91, 0.18);
  border-radius: 18px;
}

.home-guide-item strong {
  font-size: 15px;
  font-weight: 950;
  color: var(--text, #111827);
}

.home-guide-item span {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--sub, #6B7280);
  word-break: keep-all;
}

/* 메인 하단 푸터 */
.site-footer {
  margin: 34px calc(50% - 50vw) 0;
  padding: 28px 20px 36px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 248, 242, 0), #FFF4E8);
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.footer-links a {
  font-size: 14px;
  font-weight: 800;
  color: #8A8A8A;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--main-strong, #FF6F3F);
}

.footer-copy {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #777777;
}

/* 엑셀 모드 */
body.excel-mode .bottom-info-card,
body.excel-mode .home-guide-item {
  border-radius: 0;
  border-color: #9fb59f;
  box-shadow: none;
  background: #ffffff;
}

body.excel-mode .bottom-info-link,
body.excel-mode .footer-links a:hover {
  color: #217346;
}

body.excel-mode .site-footer {
  background: linear-gradient(180deg, rgba(248, 250, 248, 0), #e8f3e8);
  border-top-color: #c7d8c7;
}

@media (max-width: 640px) {
  .main-bottom-info {
    margin-top: 34px;
    gap: 14px;
  }

  .bottom-info-card {
    border-radius: 24px;
    padding: 24px 22px;
  }

  .bottom-info-title {
    font-size: 22px;
  }

  .bottom-info-text {
    font-size: 15px;
  }

  .home-guide-item {
    border-radius: 16px;
    padding: 14px 15px;
  }

  .footer-links {
    gap: 18px;
  }

  .footer-links a {
    font-size: 13px;
  }

  .footer-copy {
    font-size: 13px;
  }
}
/* ===== Dish loader animation: 3안 접시 위 등장형 ===== */
.dish-loading-card {
  display: none;
  text-align: center;
  overflow: hidden;
  padding: 28px 22px 26px;
  border: 1px solid rgba(255, 138, 91, 0.16);
  background:
    radial-gradient(circle at 85% 12%, rgba(255, 138, 91, 0.12) 0 56px, transparent 57px),
    linear-gradient(180deg, #fffaf5 0%, #ffffff 100%);
}

.dish-loader {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 214px;
  padding: 8px 0 2px;
}

.dish-sparkle {
  position: absolute;
  color: #ff8a5b;
  font-size: 18px;
  opacity: 0.72;
  animation: dishSparkle 0.9s ease-in-out infinite alternate;
}

.dish-sparkle-left {
  top: 42px;
  left: calc(50% - 104px);
}

.dish-sparkle-right {
  top: 64px;
  right: calc(50% - 104px);
  animation-delay: 0.18s;
}

.dish-cloche {
  position: relative;
  width: 132px;
  height: 102px;
  margin: 0 auto 2px;
  animation: dishFloat 1.05s ease-in-out infinite;
}

.dish-cloche-knob {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 18px;
  height: 12px;
  transform: translateX(-50%);
  border: 3px solid #b9a899;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: #fffaf5;
  z-index: 3;
}

.dish-cloche-dome {
  position: absolute;
  left: 50%;
  top: 18px;
  width: 106px;
  height: 62px;
  transform: translateX(-50%);
  border: 3px solid #b9a899;
  border-bottom: 0;
  border-radius: 106px 106px 0 0;
  background:
    radial-gradient(circle at 36% 34%, rgba(255, 255, 255, 0.95) 0 8px, transparent 9px),
    linear-gradient(135deg, #fff7ef 0%, #ffe6d5 100%);
  box-shadow: inset -8px -10px 0 rgba(255, 138, 91, 0.10), 0 12px 22px rgba(255, 111, 63, 0.10);
  z-index: 2;
}

.dish-cloche-face {
  position: absolute;
  left: 50%;
  top: 52px;
  width: 46px;
  height: 18px;
  transform: translateX(-50%);
  z-index: 4;
}

.dish-cloche-face::before,
.dish-cloche-face::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #8d7c70;
}

.dish-cloche-face::before {
  left: 10px;
}

.dish-cloche-face::after {
  right: 10px;
}

.dish-cloche-plate {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 122px;
  height: 18px;
  transform: translateX(-50%);
  border: 3px solid #b9a899;
  border-radius: 999px;
  background: #fffaf5;
  box-shadow: 0 12px 20px rgba(17, 24, 39, 0.06);
  z-index: 1;
}

.dish-loading-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 900;
  color: #6b5a50;
  letter-spacing: -0.03em;
}

.dish-candidate-pill {
  min-width: 130px;
  max-width: 86%;
  padding: 12px 20px;
  border: 1px solid rgba(255, 138, 91, 0.26);
  border-radius: 18px;
  background: #ffffff;
  color: #111827;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -0.04em;
  box-shadow: 0 12px 24px rgba(255, 111, 63, 0.10);
  word-break: keep-all;
}

.dish-candidate-pill.is-changing {
  animation: dishCandidatePop 0.18s ease-out;
}

.dish-loading-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
}

.dish-loading-dots span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ff8a5b;
  opacity: 0.38;
  animation: dishDot 0.72s ease-in-out infinite;
}

.dish-loading-dots span:nth-child(2) {
  animation-delay: 0.12s;
}

.dish-loading-dots span:nth-child(3) {
  animation-delay: 0.24s;
}

.menu-name.animate {
  animation: resultMenuPop 0.52s cubic-bezier(.2, .9, .22, 1.15);
}

@keyframes dishFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes dishSparkle {
  from { transform: scale(0.86) rotate(-8deg); opacity: 0.36; }
  to { transform: scale(1.08) rotate(8deg); opacity: 0.88; }
}

@keyframes dishCandidatePop {
  0% { opacity: 0; transform: translateY(8px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dishDot {
  0%, 100% { opacity: 0.28; transform: translateY(0); }
  50% { opacity: 0.95; transform: translateY(-3px); }
}

@keyframes resultMenuPop {
  0% { transform: scale(0.94); opacity: 0; }
  60% { transform: scale(1.045); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

body.excel-mode .dish-loading-card {
  display: none !important;
}

@media (max-width: 640px) {
  .dish-loading-card {
    padding: 24px 18px 24px;
  }

  .dish-loader {
    min-height: 200px;
  }

  .dish-cloche {
    transform: scale(0.92);
    transform-origin: center;
    margin-bottom: -2px;
  }

  .dish-candidate-pill {
    font-size: 18px;
    min-width: 120px;
  }
}