/* ポイ旅 — PayPay App Style Guide 準拠トークン
   ブランドカラー(#FF0033)とPayPay Gradationは使用しない。
   Extended color assets + Functional Color のみで構成する。 */
:root{
  /* Extended color assets（無彩色8階調） */
  --c-text:        #242323;
  --c-text-sub:    #606060;
  --c-text-weak:   #909090;
  --c-border-mid:  #BABABA;
  --c-border:      #DDDDDD;
  --c-divider:     #EEEEEE;
  --c-base:        #F7F7F7;
  --c-white:       #FFFFFF;

  /* Functional Color */
  --c-success:     #20BF7A;
  --c-error:       #FD5C5C;
  --c-caution:     #FFB900;
  --c-action:      #3895FF;   /* 白背景の上でのみテキストに使う（F7F7F7上は2.84で不足） */
  --c-text-navy:   #002970;   /* グレー地に置くリンク/強調 */

  /* Shape */
  --r-card: 8px;
  --r-sheet: 20px;
  --r-select: 15px;

  /* Shadow（光源は上部90°のみ） */
  --sh-low:  0 2px 6px rgba(0,0,0,.08);
  --sh-mid:  0 6px 15px rgba(0,0,0,.15);
  --sh-high: 0 8px 20px rgba(0,0,0,.3);

  /* Spacing（4の倍数） */
  --sp-edge: 16px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  --touch: 44px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--c-base);
  color:var(--c-text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  font-size:14px;
  line-height:1.5;
  padding-bottom:96px;
}
button{ font:inherit; color:inherit; }
a{ color:var(--c-text-navy); }
:focus-visible{ outline:2px solid var(--c-action); outline-offset:2px; border-radius:4px; }

.num{ font-variant-numeric:tabular-nums; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:var(--sp-2);
  height:56px; padding:0 var(--sp-4);
  background:var(--c-white);
  border-bottom:1px solid var(--c-divider);
}
.header__back{
  width:var(--touch); height:var(--touch); margin-left:-10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:var(--r-card); cursor:pointer;
}
.header__back:active{ background:#F2F2F2; }
.header__back[hidden]{ display:none; }
.header__lockup{ display:flex; flex-direction:column; justify-content:center; min-width:0; }
.header__title{ font-size:16px; font-weight:700; margin:0; line-height:1.25; }
/* ディスクリプタはロゴと常に一体で出す。単独でサービス名だけを見せない。 */
.header__descriptor{ font-size:10px; color:var(--c-text-sub); line-height:1.3; white-space:nowrap; }
.header__step{ margin-left:auto; font-size:12px; color:var(--c-text-weak); }

/* ---------- Layout: Card pattern（画面端 左右16px） ---------- */
.screen{ padding:var(--sp-4) var(--sp-edge) var(--sp-8); max-width:640px; margin:0 auto; }
/* 画面遷移のアニメーション。下層へは左→右、戻るときは逆に動かす。 */
.screen--forward{ animation:pushIn .22s cubic-bezier(.2,.7,.3,1); }
.screen--back{ animation:popIn .22s cubic-bezier(.2,.7,.3,1); }
@keyframes pushIn{ from{ transform:translateX(16px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
@keyframes popIn{ from{ transform:translateX(-16px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
.screen[hidden]{ display:none; }

.card{
  background:var(--c-white);
  border-radius:var(--r-card);
  box-shadow:var(--sh-low);
  padding:var(--sp-4);
  margin-bottom:var(--sp-3);
}
.card--tap{ cursor:pointer; width:100%; text-align:left; border:0; display:block; }
.card--tap:active{ background:#F2F2F2; }

.section-title{ font-size:14px; font-weight:700; margin:var(--sp-6) 0 var(--sp-2); }
.section-title:first-child{ margin-top:0; }
.lead{ font-size:14px; color:var(--c-text-sub); margin:0 0 var(--sp-4); }

.hero{ margin:var(--sp-2) 0 var(--sp-4); }
.hero__title{ font-size:20px; line-height:1.5; font-weight:700; margin:0; }

/* ---------- Form ---------- */
.field{ margin-bottom:var(--sp-4); }
.field__label{ display:block; font-size:12px; font-weight:700; color:var(--c-text-sub); margin-bottom:var(--sp-2); }
.field__hint{ font-size:12px; color:var(--c-text-sub); margin:var(--sp-1) 0 0; }
.input, .select{
  width:100%; min-height:var(--touch);
  padding:0 var(--sp-3);
  background:var(--c-white);
  color:var(--c-text);
  border:1px solid var(--c-border-mid);
  border-radius:var(--r-card);
  font-size:16px;
}
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23606060' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:40px; }
.input:focus, .select:focus{ border-color:var(--c-action); }

/* Select Button（選択UIの第一候補） */
.segment{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.segment__item{
  flex:1 1 0; min-width:96px; min-height:var(--touch);
  padding:var(--sp-2) var(--sp-3);
  background:var(--c-white);
  color:var(--c-text-weak);
  border:1px solid var(--c-border-mid);
  border-radius:var(--r-select);
  font-size:14px; cursor:pointer;
  white-space:nowrap;
}
.segment__item[aria-pressed="true"]{
  background:var(--c-action);
  color:var(--c-white);
  border-color:var(--c-action);
  font-weight:700;
}
.segment__item:active{ background:#F2F2F2; }
.segment__item[aria-pressed="true"]:active{ background:#2F82E0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  width:100%; min-height:48px; padding:0 var(--sp-4);
  border:0; border-radius:var(--r-card);
  font-size:16px; font-weight:700; cursor:pointer;
}
.btn--primary{ background:var(--c-action); color:var(--c-white); }
.btn--primary:active{ background:#2F82E0; }
.btn--secondary{ background:var(--c-white); color:var(--c-text-navy); border:1px solid var(--c-border-mid); }
.btn--secondary:active{ background:#F2F2F2; }
.btn--quiet{ background:var(--c-divider); color:var(--c-text-sub); }
.btn--quiet:active{ background:var(--c-border); }
/* 非活性は透過ではなく別の色で表す */
.btn[disabled]{ background:var(--c-divider); color:var(--c-text-weak); cursor:not-allowed; }

.btn-row{ margin-top:var(--sp-4); }

/* ---------- Label / chip ---------- */
.label{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:4px;
  font-size:11px; font-weight:700; white-space:nowrap;
}
.label--rank{ background:var(--c-action); color:var(--c-white); }
.label--sub{ background:var(--c-divider); color:var(--c-text-sub); }
.label--ok{ background:#E7F8F0; color:#0E8A56; }
.label--warn{ background:#FFF6E0; color:#8A6100; }
.label--alert{ background:#FFECEC; color:#C42E2E; }

/* ---------- 結果カード ---------- */
.result{ position:relative; }
.result__head{ display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.result__airline{ font-size:16px; font-weight:700; margin:0; }
.result__route{ font-size:14px; color:var(--c-text-sub); margin:0 0 var(--sp-3); }
.kv{ display:flex; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--c-divider); }
.kv:first-of-type{ border-top:0; }
.kv__k{ font-size:14px; color:var(--c-text-sub); }
.kv__v{ font-size:14px; font-weight:700; text-align:right; }
.kv__v--big{ font-size:20px; }
.amount{ font-size:28px; font-weight:700; letter-spacing:-.01em; }
.amount__unit{ font-size:14px; font-weight:700; margin-left:2px; }

.meter{ height:6px; background:var(--c-divider); border-radius:3px; overflow:hidden; margin-top:var(--sp-2); }
.meter__bar{ height:100%; background:var(--c-action); border-radius:3px; transition:width .45s cubic-bezier(.2,.7,.3,1); }
.meter__bar--short{ background:var(--c-caution); }

/* ---------- List ---------- */
.list{ background:var(--c-white); border-radius:var(--r-card); box-shadow:var(--sh-low); overflow:hidden; margin-bottom:var(--sp-3); }
.list__item{
  display:flex; align-items:flex-start; gap:var(--sp-3);
  width:100%; min-height:var(--touch); padding:var(--sp-3) var(--sp-4);
  background:var(--c-white); border:0; text-align:left; cursor:pointer;
  position:relative;
}
.list__item + .list__item::before{
  content:""; position:absolute; top:0; left:16px; right:0; height:1px; background:var(--c-divider);
}
.list__item:active{ background:#F2F2F2; }
.list__body{ flex:1; min-width:0; }
.list__title{ display:block; font-size:16px; color:var(--c-text); margin:0; }
.list__desc{ display:block; font-size:14px; color:var(--c-text-sub); margin:2px 0 0; }
.list__item--done .list__title{ color:var(--c-text-weak); text-decoration:line-through; }

.check{
  flex:0 0 auto; width:24px; height:24px; margin-top:2px;
  border-radius:50%; border:1.5px solid var(--c-border-mid); background:var(--c-white);
  display:inline-flex; align-items:center; justify-content:center;
}
.check--done{ background:var(--c-success); border-color:var(--c-success); color:var(--c-white); }
.check--pop{ animation:checkPop .28s cubic-bezier(.2,1.4,.4,1); }
@keyframes checkPop{ 0%{ transform:scale(.6); } 60%{ transform:scale(1.15); } 100%{ transform:scale(1); } }
.check svg{ display:block; }

/* 理由・注意の行。チェックリストではないので押下フィードバックを持たない */
.reason{ display:flex; align-items:flex-start; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); position:relative; }
.reason + .reason::before{ content:""; position:absolute; top:0; left:16px; right:0; height:1px; background:var(--c-divider); }
.reason__icon{ flex:0 0 auto; width:20px; height:20px; margin-top:1px; }
.reason__icon--ok{ color:var(--c-success); }
.reason__icon--caution{ color:#8A6100; }
.reason__text{ flex:1; min-width:0; font-size:14px; }
.reason--caution .reason__text{ color:#8A6100; }

/* ---------- Notice ---------- */
.notice{ border-radius:var(--r-card); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-3); font-size:14px; }
.notice__title{ display:flex; align-items:center; gap:var(--sp-2); font-weight:700; margin:0 0 var(--sp-1); }
.notice p{ margin:0; }
.notice--stop{ background:#FFECEC; color:#7A1F1F; }
.notice--go{ background:#E7F8F0; color:#0B5F3C; }
.notice--info{ background:var(--c-white); color:var(--c-text-sub); box-shadow:var(--sh-low); }

/* ---------- Progress ---------- */
.progress{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.progress__count{ font-size:20px; font-weight:700; }
.progress__track{ flex:1; height:8px; background:var(--c-divider); border-radius:4px; overflow:hidden; }
.progress__bar{ height:100%; background:var(--c-success); border-radius:4px; transition:width .25s ease; }

/* ---------- Half sheet ---------- */
.sheet-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40; display:flex; align-items:flex-end; justify-content:center; }
.sheet-overlay[hidden]{ display:none; }
.sheet{
  width:100%; max-width:640px; max-height:86vh; overflow-y:auto;
  background:var(--c-white);
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  padding:var(--sp-5) var(--sp-4) var(--sp-8);
  box-shadow:var(--sh-high);
  animation:slideUp .25s ease;
}
@keyframes slideUp{ from{ transform:translateY(24px); } to{ transform:translateY(0); } }
.sheet__grip{ width:40px; height:4px; border-radius:2px; background:var(--c-border); margin:0 auto var(--sp-4); }
.sheet__title{ font-size:16px; font-weight:700; margin:0 0 var(--sp-2); }
.sheet__step{ font-size:12px; color:var(--c-text-weak); margin:0 0 var(--sp-3); }

/* ---------- Tab bar ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; background:var(--c-white); border-top:1px solid var(--c-divider);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar__item{
  flex:1; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:none; border:0; cursor:pointer; color:var(--c-text-weak); font-size:11px;
}
.tabbar__item[aria-current="page"]{ color:var(--c-action); font-weight:700; }
.tabbar__item:active{ background:#F2F2F2; }

/* ---------- QA ---------- */
.qa__q{ margin-bottom:var(--sp-2); }
.qa__a{ font-size:14px; color:var(--c-text-sub); margin:0; white-space:pre-wrap; }
.bubble{ background:var(--c-white); border-radius:var(--r-card); box-shadow:var(--sh-low); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-2); }
.bubble--me{ background:var(--c-action); color:var(--c-white); margin-left:15%; }
.bubble--me p{ color:var(--c-white); }

.foot{ font-size:12px; color:var(--c-text-sub); margin-top:var(--sp-6); }
.foot a{ color:var(--c-text-navy); }


/* ---------- ルート表記 ---------- */
.route{ display:flex; align-items:flex-start; gap:6px; font-size:14px; color:var(--c-text-sub); margin:0 0 var(--sp-3); }
.route__icon{ flex:0 0 auto; width:20px; height:20px; margin-top:1px; color:var(--c-text-weak); }
.route__icon svg{ display:block; }
.route__text{ min-width:0; }

/* ---------- 到達ラインチャート ---------- */
.reach{ background:var(--c-white); border-radius:var(--r-card); box-shadow:var(--sh-low); padding:var(--sp-4); margin-bottom:var(--sp-3); }
.reach__title{ font-size:14px; font-weight:700; margin:0 0 var(--sp-1); }
.reach__lead{ font-size:12px; color:var(--c-text-sub); margin:0 0 var(--sp-4); }
.reach__plot{ position:relative; }
.reach__row + .reach__row{ margin-top:var(--sp-3); }
.reach__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-2); margin-bottom:var(--sp-1); }
.reach__label{ font-size:12px; color:var(--c-text-sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reach__value{ font-size:12px; font-weight:700; color:var(--c-text); white-space:nowrap; }
.reach__track{ height:8px; background:var(--c-divider); border-radius:4px; overflow:hidden; }
.reach__bar{ height:100%; background:var(--c-action); border-radius:4px; transition:width .45s cubic-bezier(.2,.7,.3,1); }
.reach__bar--short{ background:var(--c-caution); }
/* 保有ポイントの位置を示す破線。バーと同じ座標系に重ねる */
.reach__hold{
  position:absolute; top:0; bottom:0; width:0;
  border-left:1px dashed var(--c-text);
  pointer-events:none;
}
.reach__legend{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-4); font-size:11px; color:var(--c-text-sub); }
.reach__key{ display:inline-flex; align-items:center; gap:4px; }
.reach__swatch{ width:10px; height:10px; border-radius:2px; }
.reach__swatch--line{ width:12px; height:0; border-top:1px dashed var(--c-text); border-radius:0; }

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}


/* ---------- カード型ブロック ----------
   カード会社のワードマーク・人物像・外周の装飾フレームは描かない。
   金の面、ICチップ、非接触マーク、エンボスの立体感といった業界共通の要素だけで
   「カードらしさ」を出す。assets/card.jpg を置けば写真に差し替わる。 */
.cardface{
  --gold:#C8A22B;
  --gold-edge:#9C7A12;
  --gold-ink:#4A3A08;
  position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
  aspect-ratio:1.586 / 1; max-height:210px; min-height:150px;
  padding:var(--sp-4);
  margin-bottom:var(--sp-4);
  background-color:var(--gold);
  /* 金属面の細かなヘアライン。特定カードの地紋ではない */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 6L6 0' stroke='%23000' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
  border-radius:12px;
  box-shadow:var(--sh-mid), inset 0 0 0 1px rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.18);
  overflow:hidden;
}
/* 絶対配置にすると、カードが低いときに金額と重なる。通常フローで積む */
.cardface__art{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:var(--sp-4);
  margin-top:var(--sp-3);
  color:var(--gold-ink);
}
.cardface__chip{ display:block; filter:drop-shadow(0 1px 0 rgba(255,255,255,.35)); }
.cardface__wave{ display:block; }

.cardface__body{ position:relative; z-index:1; display:flex; flex-direction:column; gap:2px; }
/* エンボス（浮き出し）。光源は上部90°なので、ハイライトを上に置く */
.cardface__label,
.cardface__amount,
.cardface__name{
  color:var(--gold-ink);
  text-shadow:0 -1px 0 rgba(255,255,255,.45), 0 1px 1px rgba(0,0,0,.22);
}
.cardface__label{ font-size:10px; letter-spacing:.12em; }
.cardface__amount{ font-size:32px; font-weight:700; line-height:1.1; letter-spacing:.01em; }
.cardface__unit{ font-size:15px; margin-left:3px; }
.cardface__name{ font-size:11px; letter-spacing:.06em; margin-top:var(--sp-2); }

/* 画像を置いた場合。カード面は写真に任せ、数値だけを読める帯に乗せる */
.cardface--photo{ padding:0; background:none; box-shadow:var(--sh-mid); }
.cardface__photo{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
.cardface__overlay{
  position:absolute; left:var(--sp-4); bottom:var(--sp-4); z-index:1;
  padding:6px 10px; border-radius:6px;
  background:var(--c-white); color:var(--c-text);
  font-size:20px; font-weight:700; line-height:1.2;
  box-shadow:var(--sh-low);
}