:root{--ink:#1a1a2e;--paper:#faf8f3;--accent:#e63946;--gold:#f4a261;--teal:#2a9d8f;--lavender:#a8dadc;--muted:#6b7280;--card:#ffffff;--border:#e5e0d8;--shadow:0 4px 24px rgba(26,26,46,0.10);}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Noto Sans JP',sans-serif;background:var(--paper);color:var(--ink);min-height:100vh;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:999;opacity:.4;}
.screen{display:none;min-height:100vh;}
.screen.active{display:flex;flex-direction:column;}
/* HERO */
#screen-hero{background:var(--ink);color:var(--paper);position:relative;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 80%,rgba(42,157,143,.25) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 80% 20%,rgba(230,57,70,.20) 0%,transparent 50%);}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(250,248,243,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(250,248,243,.04) 1px,transparent 1px);background-size:60px 60px;animation:gridMove 20s linear infinite;}
@keyframes gridMove{from{transform:translate(0,0)}to{transform:translate(60px,60px)}}
.hero-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:60px 24px;text-align:center;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(230,57,70,.15);border:1px solid rgba(230,57,70,.4);border-radius:999px;padding:6px 16px;margin-bottom:32px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#ff6b6b;font-family:'Space Mono',monospace;animation:fadeSlideDown .8s ease both;}
.hero-badge::before{content:'●';font-size:8px;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero-title{font-family:'Zen Kurenaido',serif;font-size:clamp(52px,12vw,96px);letter-spacing:.05em;line-height:1;margin-bottom:8px;animation:fadeSlideUp .8s ease .1s both;}
.hero-title span{color:var(--accent);}
.hero-sub{font-family:'Space Mono',monospace;font-size:clamp(10px,2vw,13px);letter-spacing:.2em;color:rgba(250,248,243,.5);margin-bottom:40px;animation:fadeSlideUp .8s ease .2s both;}
.hero-desc{max-width:520px;font-size:15px;line-height:1.9;color:rgba(250,248,243,.8);margin-bottom:48px;animation:fadeSlideUp .8s ease .3s both;}
.hero-stats{display:flex;gap:32px;justify-content:center;margin-bottom:56px;animation:fadeSlideUp .8s ease .4s both;}
.hero-stat{text-align:center;}
.hero-stat .num{font-family:'Space Mono',monospace;font-size:28px;font-weight:700;color:var(--gold);}
.hero-stat .label{font-size:10px;letter-spacing:.1em;color:rgba(250,248,243,.5);margin-top:4px;}
.btn-start{display:inline-flex;align-items:center;gap:12px;background:var(--accent);color:white;border:none;cursor:pointer;padding:18px 48px;border-radius:4px;font-family:'Noto Sans JP',sans-serif;font-size:16px;font-weight:700;letter-spacing:.05em;transition:all .2s;animation:fadeSlideUp .8s ease .5s both;}
.btn-start:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(230,57,70,.4);}
.btn-start .arrow{font-size:20px;transition:transform .2s;}
.btn-start:hover .arrow{transform:translateX(4px);}
/* BASIC */
#screen-basic{background:var(--paper);align-items:center;justify-content:center;padding:40px 24px;}
.basic-container{width:100%;max-width:560px;}
.section-label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;}
.section-title{font-family:'Zen Kurenaido',serif;font-size:28px;margin-bottom:4px;}
.section-desc{font-size:13px;color:var(--muted);margin-bottom:32px;line-height:1.7;}
.basic-step{display:none;}
.basic-step.active{display:block;}
.step-indicator{display:flex;align-items:center;gap:8px;margin-bottom:28px;}
.step-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:all .3s;}
.step-dot.done{background:var(--teal);}
.step-dot.active{background:var(--accent);transform:scale(1.4);}
.step-q{font-size:13px;letter-spacing:.05em;color:var(--muted);margin-bottom:8px;font-family:'Space Mono',monospace;}
.step-title{font-size:20px;font-weight:700;margin-bottom:8px;line-height:1.5;}
.step-hint{font-size:12px;color:var(--muted);margin-bottom:20px;}
.input-field,.select-field{width:100%;padding:14px 16px;border:2px solid var(--border);border-radius:6px;font-family:'Noto Sans JP',sans-serif;font-size:15px;background:var(--card);transition:border-color .2s;outline:none;}
.select-field{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;}
.input-field:focus,.select-field:focus{border-color:var(--accent);}
.location-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:0;}
.location-label{font-size:12px;color:var(--muted);margin-bottom:6px;}
.btn-next{width:100%;padding:16px;background:var(--ink);color:var(--paper);border:none;border-radius:6px;cursor:pointer;font-family:'Noto Sans JP',sans-serif;font-size:15px;font-weight:700;margin-top:20px;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn-next:hover{background:#2d2d4e;transform:translateY(-1px);}
.btn-next:disabled{background:var(--border);cursor:not-allowed;transform:none;}
.btn-back-small{background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;margin-top:12px;display:flex;align-items:center;gap:4px;font-family:'Noto Sans JP',sans-serif;}
/* QUIZ */
#screen-quiz{background:var(--paper);align-items:center;padding:0;}
.quiz-header{width:100%;background:var(--ink);padding:16px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10;}
.quiz-logo{font-family:'Zen Kurenaido',serif;font-size:18px;color:var(--paper);letter-spacing:.05em;}
.quiz-logo span{color:var(--accent);}
.progress-wrap{flex:1;margin:0 24px;}
.progress-bar{height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;}
.progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .5s cubic-bezier(.4,0,.2,1);}
.progress-text{font-family:'Space Mono',monospace;font-size:10px;color:rgba(255,255,255,.4);text-align:right;margin-top:4px;}
.quiz-body{width:100%;max-width:640px;margin:0 auto;padding:40px 24px 80px;}
.quiz-emoji{font-size:48px;margin-bottom:16px;animation:emojiPop .4s cubic-bezier(.34,1.56,.64,1) both;}
.quiz-nav{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:24px;}
.btn-quiz-next{width:100%;padding:16px;background:var(--ink);color:var(--paper);border:none;border-radius:6px;cursor:pointer;font-family:'Noto Sans JP',sans-serif;font-size:15px;font-weight:700;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn-quiz-next:hover{background:#2d2d4e;transform:translateY(-1px);}
.btn-quiz-next:disabled{background:var(--border);cursor:not-allowed;transform:none;color:var(--muted);}
.btn-quiz-back{background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;display:flex;align-items:center;justify-content:center;gap:4px;font-family:'Noto Sans JP',sans-serif;padding:8px;transition:color .2s;}
.btn-quiz-back:hover{color:var(--ink);}
.btn-quiz-back:disabled{opacity:0.3;cursor:not-allowed;}
@keyframes emojiPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.quiz-q-num{font-family:'Space Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.2em;margin-bottom:8px;}
.quiz-question{font-size:clamp(18px,3.5vw,24px);font-weight:700;line-height:1.6;margin-bottom:36px;animation:fadeSlideUp .4s ease both;}
.quiz-options{display:flex;flex-direction:column;gap:12px;}
.option-btn{width:100%;text-align:left;padding:18px 20px;border-radius:8px;border:2px solid var(--border);background:var(--card);cursor:pointer;font-family:'Noto Sans JP',sans-serif;font-size:14px;line-height:1.6;transition:all .2s;display:flex;align-items:flex-start;gap:14px;animation:fadeSlideUp .4s ease both;}
.option-btn:nth-child(1){animation-delay:.05s}.option-btn:nth-child(2){animation-delay:.10s}.option-btn:nth-child(3){animation-delay:.15s}.option-btn:nth-child(4){animation-delay:.20s}
.option-btn:hover{border-color:var(--accent);background:rgba(230,57,70,.04);transform:translateX(4px);}
.option-btn.selected{border-color:var(--accent);background:rgba(230,57,70,.08);}
.option-label{width:26px;height:26px;min-width:26px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:var(--muted);transition:all .2s;}
.option-btn:hover .option-label,.option-btn.selected .option-label{border-color:var(--accent);color:var(--accent);background:rgba(230,57,70,.08);}
/* LOADING */
#screen-loading{background:var(--ink);color:var(--paper);align-items:center;justify-content:center;text-align:center;}
.loading-orb{width:80px;height:80px;border-radius:50%;background:conic-gradient(var(--accent),var(--gold),var(--teal),var(--accent));margin:0 auto 32px;animation:orbSpin 1.5s linear infinite;filter:blur(1px);box-shadow:0 0 40px rgba(230,57,70,.4);}
@keyframes orbSpin{to{transform:rotate(360deg)}}
.loading-text{font-family:'Zen Kurenaido',serif;font-size:24px;margin-bottom:16px;}
.loading-sub{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.15em;color:rgba(255,255,255,.4);}
.loading-steps{margin-top:40px;display:flex;flex-direction:column;gap:8px;text-align:left;max-width:280px;}
.loading-step{font-size:12px;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:10px;transition:color .3s;}
.loading-step.active{color:var(--gold);}
.loading-step.done{color:var(--teal);}
/* RESULT */
#screen-result{background:var(--paper);align-items:stretch;}
.result-hero{padding:48px 24px;text-align:center;position:relative;overflow:hidden;}
.result-hero-bg{position:absolute;inset:0;opacity:.6;}
.result-badge-wrap{position:relative;z-index:1;}
.result-cluster-emoji{font-size:64px;margin-bottom:16px;animation:emojiPop .6s cubic-bezier(.34,1.56,.64,1) both;}
.result-cluster-num{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.4);margin-bottom:6px;}
.result-cluster-name{font-family:'Zen Kurenaido',serif;font-size:clamp(28px,6vw,42px);color:var(--paper);margin-bottom:8px;animation:fadeSlideUp .5s ease .1s both;}
.result-cluster-copy{font-size:14px;color:var(--gold);letter-spacing:.05em;animation:fadeSlideUp .5s ease .2s both;margin-bottom:24px;}
.result-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px;animation:fadeSlideUp .5s ease .3s both;}
.result-badge{padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;border:1.5px solid;}
.badge-uturn{background:rgba(42,157,143,.15);border-color:var(--teal);color:var(--teal);}
.badge-iturn{background:rgba(244,162,97,.15);border-color:var(--gold);color:var(--gold);}
.result-body{max-width:680px;width:100%;margin:0 auto;padding:40px 24px 80px;}
.result-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:28px;margin-bottom:20px;box-shadow:var(--shadow);animation:fadeSlideUp .5s ease both;}
.cta-note{
  margin-top:14px;
  font-size:13px;
  line-height:1.8;
  color:rgba(255,255,255,.78);
  text-align:center;
}
.result-card:nth-child(1){animation-delay:.1s}.result-card:nth-child(2){animation-delay:.2s}.result-card:nth-child(3){animation-delay:.3s}.result-card:nth-child(4){animation-delay:.4s}
.card-label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.card-label::after{content:'';flex:1;height:1px;background:var(--border);}
.result-area-name{font-family:'Zen Kurenaido',serif;font-size:36px;margin-bottom:4px;}
.result-pref{font-size:13px;color:var(--muted);margin-bottom:16px;}
.area-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px;}
.stat-item{background:var(--paper);border-radius:8px;padding:14px;text-align:center;}
.stat-value{font-family:'Space Mono',monospace;font-size:22px;font-weight:700;color:var(--ink);}
.stat-label{font-size:10px;color:var(--muted);margin-top:4px;letter-spacing:.05em;}

/* パーソナライズ診断理由 */
.reason-intro{font-size:14px;line-height:1.9;color:#374151;margin-bottom:16px;}
.reason-answers{display:flex;flex-direction:column;gap:8px;margin:16px 0;padding:16px;background:var(--paper);border-radius:8px;border-left:3px solid var(--accent);}
.reason-answer-item{font-size:13px;color:var(--muted);line-height:1.7;}
.reason-answer-item strong{color:var(--ink);}
.reason-conclusion{font-size:14px;line-height:1.9;color:#374151;margin-top:16px;}
/* エリア最新情報 */
.area-news{margin-top:16px;}
.area-news-loading{display:flex;align-items:center;gap:10px;padding:16px;background:var(--paper);border-radius:8px;font-size:13px;color:var(--muted);}
.area-news-content{font-size:13px;line-height:1.8;color:#374151;}
.area-news-content .news-item{padding:12px 16px;background:var(--paper);border-radius:8px;margin-bottom:8px;border-left:3px solid var(--teal);display:flex;flex-direction:column;gap:4px;}
.area-news-content .news-tag{font-family:'Space Mono',monospace;font-size:11px;font-weight:900;color:var(--teal);letter-spacing:.05em;}
.area-news-content .news-text{font-size:14px;font-weight:700;color:var(--ink);line-height:1.5;}
.area-news-content .news-source{font-size:11px;color:var(--muted);margin-top:8px;font-family:'Space Mono',monospace;}
.spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
/* 企業カード */
.company-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.company-name{font-size:22px;font-weight:900;color:var(--ink);letter-spacing:.02em;}
.company-card{border:2px solid var(--border);border-radius:10px;padding:20px;margin-top:12px;background:var(--paper);transition:border-color .2s,transform .2s;}
.company-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.company-distance-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:11px;font-weight:700;margin-bottom:10px;font-family:'Space Mono',monospace;}
.dist-same{background:rgba(42,157,143,.1);color:var(--teal);border:1px solid rgba(42,157,143,.3);}
.dist-pref{background:rgba(168,218,220,.2);color:#2a7f8a;border:1px solid rgba(168,218,220,.5);}
.dist-near{background:rgba(244,162,97,.1);color:#c47c2e;border:1px solid rgba(244,162,97,.3);}
.dist-east{background:rgba(230,57,70,.08);color:var(--accent);border:1px solid rgba(230,57,70,.2);}
.dist-far{background:rgba(107,114,128,.1);color:var(--muted);border:1px solid var(--border);}
.company-pitch{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px;line-height:1.5;font-style:italic;}
.company-location{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px;}
.company-desc{font-size:12px;color:#6b7280;margin-top:8px;line-height:1.7;}
.company-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:var(--accent);font-size:12px;font-weight:700;text-decoration:none;transition:gap .2s;}
.company-link:hover{gap:10px;}
/* CTA */
.cta-card{background:var(--ink);border-radius:12px;padding:36px 28px;text-align:center;margin-top:24px;overflow:hidden;position:relative;animation:fadeSlideUp .5s ease .5s both;}
.cta-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(230,57,70,.2),transparent 60%),radial-gradient(ellipse at 70% 50%,rgba(42,157,143,.15),transparent 60%);}
.cta-card *{position:relative;z-index:1;}
.cta-title{font-family:'Zen Kurenaido',serif;font-size:24px;color:var(--paper);margin-bottom:8px;}
.cta-desc{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:24px;line-height:1.7;}
.cta-btn{display:inline-flex;align-items:center;gap:10px;background:#06c755;color:white;padding:16px 32px;border-radius:8px;font-size:15px;font-weight:700;text-decoration:none;transition:all .2s;font-family:'Noto Sans JP',sans-serif;border:none;cursor:pointer;}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(6,199,85,.4);}
.retry-btn{display:block;margin:20px auto 0;background:none;border:2px solid var(--border);border-radius:8px;padding:12px 24px;color:var(--muted);cursor:pointer;font-family:'Noto Sans JP',sans-serif;font-size:13px;transition:all .2s;}
.retry-btn:hover{border-color:var(--ink);color:var(--ink);}
.footer{text-align:center;padding:24px 20px 32px;font-family:'Space Mono',monospace;font-size:.68rem;color:rgba(26,26,46,.35);letter-spacing:.08em;}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeSlideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

.gold-text{color:var(--gold);}

/* --- Share buttons --- */
.share-wrap{margin-top:16px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:12px}
.share-title{font-weight:700;margin-bottom:8px}
.share-buttons{display:flex;flex-wrap:wrap;gap:8px}
.share-btn{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:10px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.18);text-decoration:none;background:rgba(255,255,255,.06);cursor:pointer}
.share-btn:active{transform:translateY(1px)}
.share-note{margin-top:8px;font-size:12px;opacity:.85}
/* ============================================================
   SNS SHARE BUTTONS - app.css に追加する CSS
   
   既存の .share-buttons, .share-btn セレクタを以下に置き換える
   ============================================================ */

/* シェアセクション */
.share-section {
    margin-top: 40px;
    animation: fadeSlideUp .5s ease both;
    animation-delay: .5s;
}

.share-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--ink);
    margin-bottom: 8px;
    font-family: 'Noto Sans JP', sans-serif;
}

.share-subtitle {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Share Buttons Container */
.share-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

/* Share Button Styles */
.share-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 14px;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
    font-family: 'Noto Sans JP', sans-serif;
    white-space: nowrap;
}

.share-btn:hover {
    transform: translateY(-2px);
}

.share-icon {
    font-size: 28px;
    display: block;
    line-height: 1;
}

.share-label {
    font-size: 12px;
    letter-spacing: .05em;
    display: block;
}

/* Instagram */
.share-instagram {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    border-color: rgba(255,255,255,.3);
}

.share-instagram:hover {
    box-shadow: 0 8px 16px rgba(224, 148, 51, .3);
    border-color: rgba(255,255,255,.5);
}

/* TikTok */
.share-tiktok {
    background: linear-gradient(135deg, #25f4ee 0%, #2cbde9 50%, #000 100%);
    color: white;
    border-color: rgba(255,255,255,.3);
}

.share-tiktok:hover {
    box-shadow: 0 8px 16px rgba(37, 244, 238,.3);
    border-color: rgba(255,255,255,.5);
}

/* X (Twitter) */
.share-x {
    background: #000;
    color: white;
    border-color: rgba(255,255,255,.3);
}

.share-x:hover {
    background: #1a1a1a;
    border-color: rgba(255,255,255,.5);
    box-shadow: 0 8px 16px rgba(0, 0, 0,.3);
}

/* LINE */
.share-line {
    background: #00b900;
    color: white;
    border-color: rgba(255,255,255,.3);
}

.share-line:hover {
    box-shadow: 0 8px 16px rgba(0, 185, 0,.3);
    border-color: rgba(255,255,255,.5);
}

/* Copy Button */
.share-copy {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--border);
}

.share-copy:hover {
    background: var(--card);
    border-color: var(--accent);
    color: var(--accent);
}

.share-copy:active {
    transform: translateY(0);
}

/* Share Note (feedback message) */
.share-note {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    min-height: 20px;
    animation: fadeIn .3s ease;
}

.share-note.success {
    color: var(--teal);
    font-weight: 700;
}

/* レスポンシブ対応 */
@media (max-width: 640px) {
    .share-buttons {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .share-btn {
        padding: 14px 12px;
    }

    .share-icon {
        font-size: 24px;
    }

    .share-label {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .share-buttons {
        grid-template-columns: 1fr;
    }

    .share-btn {
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        padding: 12px;
    }

    .share-icon {
        font-size: 20px;
    }

    .share-label {
        font-size: 12px;
    }
}

/* Fade animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===== Cluster Backgrounds (CSP-safe) ===== */

/* 00 超都市成長型 */
.result-hero.cluster-00{
  background: linear-gradient(135deg,#0b1f3a,#1f4e79);
}
.result-hero.cluster-00 .result-hero-bg{
  background:
    radial-gradient(ellipse at 25% 45%, #4ea8ff33, transparent 60%),
    radial-gradient(ellipse at 75% 35%, #1f78ff22, transparent 50%);
}

/* 01 若者流入加速型 */
.result-hero.cluster-01{
  background: linear-gradient(135deg,#1a2a6c,#b21f1f);
}
.result-hero.cluster-01 .result-hero-bg{
  background:
    radial-gradient(ellipse at 30% 50%, #ff6b6b33, transparent 60%),
    radial-gradient(ellipse at 70% 30%, #ffb34722, transparent 50%);
}

/* 02 地方中核安定型 */
.result-hero.cluster-02{
  background: linear-gradient(135deg,#0f2027,#2c5364);
}
.result-hero.cluster-02 .result-hero-bg{
  background:
    radial-gradient(ellipse at 35% 55%, #48cae433, transparent 60%),
    radial-gradient(ellipse at 65% 35%, #0096c722, transparent 50%);
}

/* 03 郊外ベッドタウン型 */
.result-hero.cluster-03{
  background: linear-gradient(135deg,#2c3e50,#4ca1af);
}
.result-hero.cluster-03 .result-hero-bg{
  background:
    radial-gradient(ellipse at 25% 50%, #9be7ff33, transparent 60%),
    radial-gradient(ellipse at 70% 30%, #6dd5fa22, transparent 50%);
}

/* 04 工業集積成長型 */
.result-hero.cluster-04{
  background: linear-gradient(135deg,#232526,#414345);
}
.result-hero.cluster-04 .result-hero-bg{
  background:
    radial-gradient(ellipse at 30% 55%, #aaaaaa33, transparent 60%),
    radial-gradient(ellipse at 70% 30%, #77777722, transparent 50%);
}

/* 05 自然没入型 */
.result-hero.cluster-05{
  background: linear-gradient(135deg,#0d2818,#1b4332);
}
.result-hero.cluster-05 .result-hero-bg{
  background:
    radial-gradient(ellipse at 30% 50%, #52b78833, transparent 60%),
    radial-gradient(ellipse at 70% 30%, #2d6a4f22, transparent 50%);
}

/* 06 人口減少進行型 */
.result-hero.cluster-06{
  background: linear-gradient(135deg,#1c1c1c,#3a3a3a);
}
.result-hero.cluster-06 .result-hero-bg{
  background:
    radial-gradient(ellipse at 25% 50%, #66666633, transparent 60%),
    radial-gradient(ellipse at 75% 35%, #44444422, transparent 50%);
}

/* 07 観光特化型 */
.result-hero.cluster-07{
  background: linear-gradient(135deg,#ff9966,#ff5e62);
}
.result-hero.cluster-07 .result-hero-bg{
  background:
    radial-gradient(ellipse at 30% 50%, #ffd16633, transparent 60%),
    radial-gradient(ellipse at 70% 30%, #ff9f1c22, transparent 50%);
}

/* 08 教育研究拠点型 */
.result-hero.cluster-08{
  background: linear-gradient(135deg,#141e30,#243b55);
}
.result-hero.cluster-08 .result-hero-bg{
  background:
    radial-gradient(ellipse at 35% 55%, #a5d8ff33, transparent 60%),
    radial-gradient(ellipse at 65% 35%, #74c0fc22, transparent 50%);
}

/* 09 子育て支援充実型 */
.result-hero.cluster-09{
  background: linear-gradient(135deg,#fceabb,#f8b500);
}
.result-hero.cluster-09 .result-hero-bg{
  background:
    radial-gradient(ellipse at 30% 50%, #fff3b033, transparent 60%),
    radial-gradient(ellipse at 70% 30%, #ffd60a22, transparent 50%);
}

/* 10 ITスタートアップ型 */
.result-hero.cluster-10{
  background: linear-gradient(135deg,#000428,#004e92);
}
.result-hero.cluster-10 .result-hero-bg{
  background:
    radial-gradient(ellipse at 25% 45%, #4ea8ff33, transparent 60%),
    radial-gradient(ellipse at 75% 35%, #1f78ff22, transparent 50%);
}

/* 11 伝統文化継承型 */
.result-hero.cluster-11{
  background: linear-gradient(135deg,#3a1c71,#d76d77,#ffaf7b);
}
.result-hero.cluster-11 .result-hero-bg{
  background:
    radial-gradient(ellipse at 30% 50%, #ffaf7b33, transparent 60%),
    radial-gradient(ellipse at 70% 30%, #d76d7722, transparent 50%);
}

/* ===== Share buttons (final / 4 buttons) ===== */
.result-body .share-wrap{
  margin-top: 18px;
  padding: 0;
  border: none;
  border-radius: 0;
}

.result-body .share-title{
  font-weight: 700;
  margin-bottom: 12px;
}

.result-body .share-buttons{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.result-body .share-btn{
  height: 54px;                 /* ←大きすぎる場合は48に */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  border: none;
}

.result-body .share-btn:hover{
  opacity: .92;
  transform: translateY(-1px);
}

/* brand colors */
.result-body .share-x{ background:#000; }
.result-body .share-line{ background:#06C755; }
.result-body .share-ig{
  background: linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);
}
.result-body .share-tt{ background:#111; }

@media (max-width: 680px){
  .result-body .share-buttons{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* share-btn 共通 hover（背景は触らない） */
.share-btn:hover{
  transform: translateY(-2px);
}

/* Instagram */
.share-btn.share-instagram:hover{
  background: linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  color:#fff;
}

/* TikTok */
.share-btn.share-tiktok:hover{
  background: linear-gradient(135deg,#25f4ee 0%,#2cbde9 50%,#000 100%);
  color:#fff;
}

/* X */
.share-btn.share-x:hover{
  background:#1a1a1a;
  color:#fff;
}

/* LINE */
.share-btn.share-line:hover{
  background:#00b900;
  color:#fff;
}

/* 診断理由の段落間マージン（CSP対応） */
.reason-conclusion--outro{
  margin-top:12px;
}

.stat-value--pos{ color:#2a9d8f; }
.stat-value--neg{ color:#e63946; }

.empty-state{
  text-align:center;
  padding:24px;
  color:var(--muted);
  font-size:13px;
}

.empty-state__icon{
  font-size:32px;
  margin-bottom:8px;
}

.empty-state__title{
  font-weight:700;
  margin-bottom:4px;
}

.empty-state__text{
  color:var(--muted);
}