/* ============================================
   のりかえ — 平和島 → 麻布台ヒルズ
   セージグリーン × ボタニカル
   ============================================ */
:root {
  --sage-50:#F4F7F1; --sage-100:#E5EDDF; --sage-200:#C9D9BD; --sage-300:#AEC59B;
  --sage-400:#9CAF88; --sage-500:#7E956A; --sage-600:#607851; --sage-700:#4A5E40;
  --cream-50:#FAF8EE; --cream-100:#F4F2E8; --cream-200:#ECE9D8;
  --text:#4A5240; --text-mute:#8A9080; --text-light:#B5B8A8; --text-dark:#2C3328;
  --bg:#F4F2E8; --card:#FFFFFC; --card-soft:#F8F6EC; --border:#E5E2D2; --border-soft:#EFEDE0;
  --shadow-sm:0 1px 3px rgba(74,82,64,.04);
  --shadow:0 2px 12px rgba(74,82,64,.05),0 1px 3px rgba(74,82,64,.04);
  --shadow-lg:0 8px 28px rgba(74,82,64,.08);
  --danger:#C97474; --ok:#7E956A;

  /* 路線カラー(公式準拠) */
  --keikyu:#D7152A;   /* 京急本線 */
  --asakusa:#E85298;  /* 都営浅草線 */
  --hibiya:#9CA3A6;   /* 東京メトロ日比谷線 */

  --font-jp:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif;
  --font-en:'Cormorant Garamond',Georgia,serif;
  --font-ui:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Yu Gothic UI','Meiryo',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overscroll-behavior:none;}
body{font-family:var(--font-ui);background:var(--bg);color:var(--text);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:.01em;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
svg{display:block;}
ul{list-style:none;}

/* 背景装飾 */
.bg-decor{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.bg-leaf{position:absolute;background-repeat:no-repeat;background-size:contain;opacity:.16;}
.bg-leaf-tr{width:60vw;height:60vw;max-width:560px;max-height:560px;top:-12vw;right:-12vw;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><g fill='none' stroke='%237E956A' stroke-width='1.2' stroke-linecap='round'><path d='M50 350 Q 200 200 380 50'/><path d='M70 360 Q 110 280 80 240'/><path d='M120 320 Q 160 250 130 220'/><path d='M170 280 Q 210 220 180 195'/><path d='M220 235 Q 260 180 230 160'/><ellipse cx='90' cy='250' rx='6' ry='14' fill='%23AEC59B' stroke='none' transform='rotate(-30 90 250)'/><ellipse cx='140' cy='230' rx='6' ry='14' fill='%23AEC59B' stroke='none' transform='rotate(-25 140 230)'/><ellipse cx='190' cy='200' rx='6' ry='14' fill='%23AEC59B' stroke='none' transform='rotate(-22 190 200)'/></g></svg>");}
.bg-leaf-br{width:40vw;height:40vw;max-width:420px;max-height:420px;bottom:-8vw;left:-8vw;opacity:.12;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><g fill='none' stroke='%237E956A' stroke-width='1.2' stroke-linecap='round'><path d='M20 380 Q 150 250 320 80'/><path d='M60 380 Q 80 320 120 300'/><ellipse cx='100' cy='320' rx='6' ry='14' fill='%23AEC59B' stroke='none' transform='rotate(-40 100 320)'/></g></svg>");}
.bg-glow{position:absolute;width:80vw;height:80vw;top:-30vw;left:-20vw;background:radial-gradient(circle,rgba(255,250,220,.5) 0%,rgba(255,250,220,0) 60%);}

/* レイアウト */
#app{position:relative;min-height:100vh;z-index:1;display:flex;flex-direction:column;}
.topbar{position:relative;z-index:2;padding:calc(env(safe-area-inset-top) + 18px) 22px 12px;}
.brand{font-family:var(--font-en);font-size:30px;font-weight:500;color:var(--sage-600);letter-spacing:.02em;line-height:1;}
.brand-dot{color:var(--sage-400);}
.brand-sub{font-family:var(--font-jp);font-size:12.5px;color:var(--text-mute);margin-top:4px;letter-spacing:.06em;}
.content{position:relative;z-index:2;flex:1;padding:8px 18px calc(env(safe-area-inset-bottom) + 92px);max-width:520px;width:100%;margin:0 auto;}

/* タブバー */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:space-around;
  padding:8px 12px calc(env(safe-area-inset-bottom) + 8px);
  background:rgba(255,255,252,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--border-soft);}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-light);
  font-family:var(--font-jp);font-size:11px;padding:4px 10px;border-radius:14px;transition:color .2s,background .2s;}
.tab svg{width:23px;height:23px;}
.tab.active{color:var(--sage-600);background:var(--sage-50);}

/* 見出し */
.section-title{font-family:var(--font-jp);font-size:15px;font-weight:600;color:var(--text-dark);margin:18px 2px 10px;display:flex;align-items:center;gap:7px;}
.section-title .em{font-family:var(--font-en);font-size:13px;color:var(--text-light);font-weight:400;letter-spacing:.08em;}

/* ============================================
   ルートマップ
   ============================================ */
.route-summary{background:var(--card);border:1px solid var(--border-soft);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);margin-top:6px;}
.route-summary .head{font-family:var(--font-jp);font-size:13px;color:var(--text-mute);margin-bottom:10px;}
.line-chips{display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
.line-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-jp);font-size:12.5px;font-weight:500;color:var(--text-dark);background:var(--card-soft);border:1px solid var(--border-soft);border-radius:999px;padding:5px 11px 5px 9px;}
.line-chip .dot{width:11px;height:11px;border-radius:50%;flex:none;}
.chip-arrow{color:var(--text-light);font-size:13px;}
.route-meta{display:flex;gap:18px;margin-top:13px;padding-top:12px;border-top:1px dashed var(--border);}
.route-meta div{font-family:var(--font-jp);}
.route-meta .k{font-size:10.5px;color:var(--text-light);}
.route-meta .v{font-size:16px;color:var(--sage-600);font-weight:600;}
.route-meta .v small{font-size:11px;font-weight:400;color:var(--text-mute);margin-left:2px;}

/* 縦の路線図 */
.map{margin-top:6px;padding:6px 2px 2px;}
.stn{position:relative;display:flex;align-items:stretch;min-height:46px;text-decoration:none;color:inherit;border-radius:12px;transition:background .15s;}
.stn:active{background:rgba(124,149,106,.10);}
.stn .pin{flex:none;width:17px;height:17px;color:var(--text-light);opacity:.65;margin-left:auto;transition:color .15s,opacity .15s;}
.stn:active .pin{color:var(--sage-500);opacity:1;}
.stn.minor .pin{width:14px;height:14px;opacity:.45;}
.stn .pin svg{width:100%;height:100%;display:block;}
.stn .rail{position:relative;width:46px;flex:none;display:flex;justify-content:center;}
.stn .rail::before{content:"";position:absolute;top:0;bottom:0;width:6px;border-radius:3px;background:var(--lc,var(--sage-300));}
.stn:first-child .rail::before{top:50%;}
.stn:last-child .rail::before{bottom:50%;}
.stn .node{position:relative;z-index:2;align-self:center;width:15px;height:15px;border-radius:50%;background:#fff;border:3.5px solid var(--lc,var(--sage-400));margin-top:0;}
.stn.major .node{width:19px;height:19px;}
.stn .body{flex:1;align-self:center;padding:7px 2px 7px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.stn .nm{font-family:var(--font-jp);font-size:15px;color:var(--text-dark);font-weight:500;line-height:1.2;}
.stn .nm .yomi{display:block;font-size:10px;color:var(--text-light);font-weight:400;letter-spacing:.04em;margin-top:1px;}
.stn .code{font-family:var(--font-en);font-size:11px;color:#fff;font-weight:500;padding:2px 7px;border-radius:6px;background:var(--lc,var(--sage-400));letter-spacing:.03em;flex:none;}
.stn.minor{min-height:30px;}
.stn.minor .node{width:9px;height:9px;border-width:2.5px;}
.stn.minor .nm{font-size:12.5px;color:var(--text-mute);font-weight:400;}
.stn.minor .nm .yomi{display:none;}
.stn.minor .code{font-size:9.5px;padding:1px 5px;opacity:.85;}

/* 区切り(乗車/直通/乗換/到着)バッジ */
.flag{margin:2px 0 2px 46px;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;font-family:var(--font-jp);font-size:12.5px;font-weight:500;}
.flag svg{width:17px;height:17px;flex:none;}
.flag.board{background:rgba(215,21,42,.07);color:#9c1020;border:1px solid rgba(215,21,42,.15);}
.flag.thru{background:var(--card-soft);color:var(--text-mute);border:1px dashed var(--border);}
.flag.transfer{background:rgba(232,82,152,.09);color:#b32e6e;border:1px solid rgba(232,82,152,.18);font-weight:600;}
.flag.goal{background:var(--sage-50);color:var(--sage-700);border:1px solid var(--sage-200);font-weight:600;}
.flag .big{font-size:13.5px;}

.tip{margin:16px 2px 4px;padding:13px 15px;background:var(--card-soft);border:1px solid var(--border-soft);border-radius:14px;font-family:var(--font-jp);font-size:12.5px;color:var(--text-mute);line-height:1.7;}
.tip b{color:var(--text-dark);font-weight:600;}

/* ============================================
   地図(実座標)
   ============================================ */
.map-note{margin:2px 2px 12px;font-family:var(--font-jp);font-size:12.5px;color:var(--text-mute);line-height:1.7;}
.map-note b{color:var(--sage-700);font-weight:600;}
.geo-card{position:relative;background:linear-gradient(180deg,#FCFBF4,#F6F4E9);border:1px solid var(--border-soft);border-radius:20px;padding:10px;box-shadow:var(--shadow);overflow:hidden;}
.geo-card::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--border-soft) 1px,transparent 1px),linear-gradient(90deg,var(--border-soft) 1px,transparent 1px);background-size:30px 30px;opacity:.35;pointer-events:none;}
.geo-svg{position:relative;z-index:1;width:100%;height:auto;display:block;overflow:visible;}
.geo-svg a{cursor:pointer;-webkit-tap-highlight-color:transparent;}
.compass{position:absolute;top:12px;right:14px;z-index:2;font-family:var(--font-en);font-size:13px;color:var(--text-light);display:flex;flex-direction:column;align-items:center;line-height:1;}
.compass span{font-size:14px;}
.mlabel{font-family:var(--font-jp);font-size:12px;font-weight:600;fill:var(--text-dark);}
.mlabel.tr{fill:#b32e6e;}
.mlabel.goal{fill:var(--sage-700);}
.mlabel.start{fill:var(--keikyu);}
.mlabel.minor{font-size:10px;font-weight:400;fill:var(--text-mute);}
.sea-label{font-family:var(--font-jp);font-size:12px;font-weight:600;fill:#6f97a4;letter-spacing:2px;}
.start-dot,.goal-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 3px -1px;border:2px solid;background:#fff;}
.start-dot{border-color:var(--keikyu);}
.goal-dot{border-color:#607851;}

/* 途中駅名トグル */
.label-toggle{display:inline-flex;align-items:center;gap:9px;margin:0 2px 12px;padding:7px 14px 7px 8px;
  background:var(--card);border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow-sm);
  font-family:var(--font-jp);font-size:12.5px;color:var(--text-mute);transition:border-color .2s,color .2s;}
.label-toggle .lt-knob{position:relative;width:34px;height:20px;border-radius:999px;background:var(--border);transition:background .2s;flex:none;}
.label-toggle .lt-knob::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform .2s;}
.label-toggle.on{border-color:var(--sage-300);color:var(--sage-700);}
.label-toggle.on .lt-knob{background:var(--sage-400);}
.label-toggle.on .lt-knob::after{transform:translateX(14px);}
.label-toggle:active{transform:scale(.98);}

/* ============================================
   暗記カード(フラッシュカード)
   ============================================ */
.flash-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:10px;}
.flash-counter{font-family:var(--font-en);font-size:14px;color:var(--text-light);letter-spacing:.1em;}
.flashcard{width:100%;cursor:pointer;}
.flash-face{min-height:260px;
  border-radius:22px;padding:28px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:var(--shadow-lg);
  animation:cardin .25s ease;}
@keyframes cardin{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.flash-front{background:var(--card);border:1px solid var(--border-soft);}
.flash-back{background:var(--sage-500);border:1px solid var(--sage-600);}
.flash-tag{font-family:var(--font-en);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px;}
.flash-front .flash-tag{color:var(--text-light);}
.flash-back .flash-tag{color:var(--sage-100);}
.flash-q{font-family:var(--font-jp);font-size:19px;font-weight:500;color:var(--text-dark);line-height:1.6;}
.flash-a{font-family:var(--font-jp);font-size:21px;font-weight:600;color:#fff;line-height:1.6;}
.flash-hint{margin-top:18px;font-family:var(--font-jp);font-size:11px;}
.flash-front .flash-hint{color:var(--text-light);}
.flash-back .flash-hint{color:var(--sage-100);opacity:.85;}
.flash-nav{display:flex;gap:12px;width:100%;}
.btn{flex:1;font-family:var(--font-jp);font-size:14px;font-weight:500;padding:13px;border-radius:14px;transition:transform .1s,background .2s;}
.btn:active{transform:scale(.97);}
.btn-ghost{background:var(--card);border:1px solid var(--border);color:var(--text-mute);}
.btn-primary{background:var(--sage-500);color:#fff;border:1px solid var(--sage-600);}

/* ============================================
   クイズ
   ============================================ */
.quiz-wrap{margin-top:10px;}
.quiz-progress{height:6px;border-radius:3px;background:var(--border-soft);overflow:hidden;margin-bottom:18px;}
.quiz-progress span{display:block;height:100%;background:var(--sage-400);transition:width .35s;}
.quiz-q{background:var(--card);border:1px solid var(--border-soft);border-radius:18px;padding:22px 20px;box-shadow:var(--shadow);font-family:var(--font-jp);font-size:18px;font-weight:600;color:var(--text-dark);line-height:1.6;text-align:center;margin-bottom:16px;}
.quiz-opts{display:flex;flex-direction:column;gap:11px;}
.opt{font-family:var(--font-jp);font-size:15px;color:var(--text-dark);background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:15px 16px;text-align:left;transition:transform .1s,border-color .2s,background .2s;}
.opt:active{transform:scale(.99);}
.opt.correct{border-color:var(--sage-400);background:var(--sage-50);color:var(--sage-700);font-weight:600;}
.opt.wrong{border-color:var(--danger);background:rgba(201,116,116,.08);color:var(--danger);}
.opt.dim{opacity:.5;}
.opt .mark{float:right;font-weight:700;}
.quiz-feedback{margin-top:16px;text-align:center;font-family:var(--font-jp);font-size:13px;color:var(--text-mute);min-height:20px;}
.quiz-next{margin-top:18px;}

.result{text-align:center;padding:30px 16px;}
.result .score{font-family:var(--font-en);font-size:58px;font-weight:500;color:var(--sage-600);line-height:1;}
.result .score small{font-size:24px;color:var(--text-light);}
.result .msg{font-family:var(--font-jp);font-size:16px;color:var(--text-dark);margin:14px 0 26px;font-weight:500;}
.result .sub{font-family:var(--font-jp);font-size:12.5px;color:var(--text-mute);margin-top:-18px;margin-bottom:26px;}