/* 就活REAL 学生フロント: デザインの土台 (モック) */
@layer tokens, base, layout, components;

@layer tokens {
  :root {
    /* 色: 既存サイトとロゴの青 (#0065cb) を軸にする */
    --blue-50: #eef5fd;
    --blue-100: #d9e9fb;
    --blue-500: #0065cb;
    --blue-600: #0054aa;
    --blue-900: #0b2a4d;
    --yellow-300: #ffd84d;
    --yellow-400: #ffc21a;
    --ink: #101a2a;
    --ink-2: #4a5568;
    --ink-3: #7b8696;
    --line: #dfe4ea;
    --surface: #ffffff;
    --bg: #f4f6f9;
    --danger: #c8283c;
    --danger-bg: #fdf0f1;
    --ok: #0f7b53;

    --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
    --font-head: "Zen Kaku Gothic New", var(--font);

    --r-s: 8px;
    --r-m: 14px;
    --r-l: 22px;
    --r-pill: 999px;
    --shadow-1: 0 1px 2px rgb(16 26 42 / 0.06), 0 4px 16px rgb(16 26 42 / 0.05);
    --tap: 52px;
    --gutter: 20px;
    --w-form: 560px;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.7;
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { font-family: var(--font-head); line-height: 1.35; margin: 0; letter-spacing: 0.01em; }
  p { margin: 0; }
  a { color: var(--blue-500); }
  :focus-visible { outline: 3px solid var(--yellow-400); outline-offset: 2px; }
}

@layer layout {
  .site-header {
    position: sticky; top: 0; z-index: 10;
    background: rgb(255 255 255 / 0.9); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .site-header .inner { max-width: var(--w-form); margin: 0 auto; padding: 12px var(--gutter); display: flex; align-items: center; justify-content: space-between; }
  .wordmark { font-family: var(--font-head); font-weight: 900; font-size: 20px; letter-spacing: 0.02em; color: var(--ink); text-decoration: none; }
  .wordmark b { color: var(--blue-500); }
  .header-note { font-size: 12px; color: var(--ink-3); }

  .page { max-width: var(--w-form); margin: 0 auto; padding: 24px var(--gutter) 140px; }
  .page-title { font-size: clamp(21px, 6vw, 26px); font-weight: 900; }
  .page-lead { margin-top: 8px; color: var(--ink-2); font-size: 14px; }

  .action-bar {
    position: fixed; inset: auto 0 0 0; z-index: 10;
    background: rgb(255 255 255 / 0.94); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  }
  .action-bar .inner { max-width: var(--w-form); margin: 0 auto; display: flex; gap: 12px; }
}

@layer components {
  /* 見出しのマーカー。ロゴの手書きの雰囲気を受ける */
  .mark { background: linear-gradient(transparent 62%, var(--yellow-300) 62%); padding: 0 2px; }

  /* 進み具合 */
  .steps { margin: 20px 0 28px; }
  .steps-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--ink-2); }
  .steps-meta strong { font-family: var(--font-head); font-size: 15px; color: var(--blue-500); }
  .steps-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: 8px; }
  .steps-bar i { height: 6px; border-radius: var(--r-pill); background: var(--line); }
  .steps-bar i.done { background: var(--blue-500); }
  .steps-bar i.now { background: linear-gradient(90deg, var(--blue-500) 55%, var(--blue-100) 55%); }

  /* まとまり */
  .card { background: var(--surface); border-radius: var(--r-l); box-shadow: var(--shadow-1); padding: 24px 20px; }
  .card + .card { margin-top: 16px; }
  .card-title { font-size: 17px; font-weight: 700; margin-bottom: 18px; }

  /* 入力欄 */
  .field + .field { margin-top: 22px; }
  .label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
  .badge { flex: none; white-space: nowrap; font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 7px; border-radius: 6px; }
  .badge.req { background: var(--blue-500); color: #fff; }
  .badge.opt { background: var(--bg); color: var(--ink-3); }
  .hint { font-size: 13px; color: var(--ink-2); margin: -2px 0 8px; }
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .row.ymd > :first-child { grid-column: 1 / -1; }

  .input, .select, .textarea {
    width: 100%; min-height: var(--tap);
    font: inherit; color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line); border-radius: var(--r-m);
    padding: 12px 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
  }
  .input::placeholder, .textarea::placeholder { color: #a9b2be; }
  .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 4px var(--blue-100); }
  .select {
    padding-right: 38px;
    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 1.5l5 5 5-5' fill='none' stroke='%234a5568' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
  }
  .textarea { min-height: 132px; resize: vertical; line-height: 1.7; }
  .sub-label { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; display: block; }

  .input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-bg); }
  .error-text { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--danger); }
  .error-text::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 12px; line-height: 18px; text-align: center; margin-top: 2px; }

  /* 選択肢: ラジオとチェックを、押しやすい面にする。JS は使わない */
  .choices { display: grid; gap: 10px; }
  .choices.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .choices.wrap { display: flex; flex-wrap: wrap; }
  .choice { position: relative; display: block; }
  .choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .choice span {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--tap); padding: 10px 16px;
    border: 1.5px solid var(--line); border-radius: var(--r-m);
    background: var(--surface); font-weight: 700; font-size: 15px; text-align: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .choices.cols-3 .choice span { padding: 10px 4px; font-size: 14px; white-space: nowrap; }
  .choices.wrap .choice span { border-radius: var(--r-pill); min-height: 46px; padding: 8px 18px; }
  .choice input:checked + span { background: var(--blue-50); border-color: var(--blue-500); color: var(--blue-600); }
  .choice input[type="checkbox"]:checked + span::before { content: ""; width: 14px; height: 8px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg) translateY(-2px); }
  .choice input:focus-visible + span { outline: 3px solid var(--yellow-400); outline-offset: 2px; }

  .group-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
  .group-head:first-of-type { margin-top: 4px; }
  .group-head b { font-size: 14px; }
  .link-btn { font: inherit; font-size: 13px; font-weight: 700; color: var(--blue-500); background: none; border: 0; padding: 6px 0; cursor: pointer; }

  /* ボタン */
  .btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 56px; padding: 0 24px;
    font: inherit; font-family: var(--font-head); font-weight: 700; font-size: 17px;
    border: 0; border-radius: var(--r-pill); cursor: pointer; text-decoration: none;
    transition: transform 0.1s, background 0.15s;
  }
  .btn:active { transform: scale(0.98); }
  .btn.primary { background: var(--blue-500); color: #fff; box-shadow: 0 6px 18px rgb(0 101 203 / 0.28); }
  .btn.primary:hover { background: var(--blue-600); }
  .btn.ghost { flex: 0 0 auto; background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); }
  .btn .arrow { width: 8px; height: 8px; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; transform: rotate(45deg); }

  .note { display: flex; gap: 10px; background: var(--blue-50); border-radius: var(--r-m); padding: 12px 14px; font-size: 13px; color: var(--blue-900); margin-top: 10px; }

  /* スタイル一覧のページ用 */
  .tile-page { max-width: 1040px; margin: 0 auto; padding: 40px var(--gutter) 80px; }
  .tile-grid .card { margin-top: 0; }
  .tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 24px; }
  .swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .swatch { border-radius: var(--r-m); padding: 34px 6px 8px; font-size: 10px; font-feature-settings: normal; line-height: 1.4; border: 1px solid rgb(16 26 42 / 0.06); }
  .swatch.dark { color: #fff; }
  .type-xl { font-family: var(--font-head); font-weight: 900; font-size: 34px; line-height: 1.3; }
  .type-l { font-family: var(--font-head); font-weight: 700; font-size: 22px; margin-top: 14px; }
  .type-m { margin-top: 10px; }
  .type-s { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
  .stack > * + * { margin-top: 12px; }
}

/* パソコン幅: 左に進み具合、右に入力欄の 2 段組み */
@layer layout {
  .side { display: none; }

  @media (min-width: 900px) {
    .site-header .inner { max-width: 1120px; padding: 16px 32px; }
    .wordmark { font-size: 22px; }
    .shell {
      display: grid; grid-template-columns: 240px minmax(0, 640px); gap: 64px; justify-content: center;
      max-width: 1120px; margin: 0 auto; padding: 56px 32px 96px;
    }
    .page { max-width: none; margin: 0; padding: 0; }
    .page-title { font-size: 32px; }
    .page-lead { font-size: 15px; margin-bottom: 32px; }
    .side { display: block; position: sticky; top: 104px; align-self: start; }
    .steps { display: none; }
    .action-bar { position: static; background: none; backdrop-filter: none; border: 0; padding: 28px 0 0; }
    .action-bar .inner { max-width: none; justify-content: flex-end; }
  }
}

@layer components {
  .side-title { font-size: 13px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.08em; margin-bottom: 20px; }
  .vsteps { list-style: none; margin: 0; padding: 0; }
  .vsteps li { position: relative; display: flex; align-items: center; gap: 14px; padding-bottom: 28px; font-weight: 700; color: var(--ink-3); }
  .vsteps li:last-child { padding-bottom: 0; }
  .vsteps li::before {
    content: attr(data-n); flex: none; position: relative; z-index: 1;
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface); border: 1.5px solid var(--line);
    font-family: var(--font-head); font-size: 14px; color: var(--ink-3);
  }
  .vsteps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--line); }
  .vsteps li.done { color: var(--ink); }
  .vsteps li.done::before { content: "\2713"; background: var(--blue-50); border-color: var(--blue-500); color: var(--blue-500); }
  .vsteps li.done:not(:last-child)::after { background: var(--blue-500); }
  .vsteps li.now { color: var(--blue-600); }
  .vsteps li.now::before { background: var(--blue-500); border-color: var(--blue-500); color: #fff; box-shadow: 0 0 0 5px var(--blue-100); }

  @media (min-width: 900px) {
    .card { padding: 32px; }
    .card + .card { margin-top: 20px; }
    .field + .field { margin-top: 26px; }
    .choices.cols-3 { max-width: 420px; }
    .choices.cols-3 .choice span { font-size: 15px; }
    .row.ymd { grid-template-columns: 2fr 1fr 1fr; max-width: 540px; }
    .action-bar .btn { flex: 0 0 auto; min-width: 280px; }
    .action-bar .btn.ghost { min-width: 0; }
    .row.ymd > :first-child { grid-column: auto; }
    .btn.primary:hover { transform: translateY(-1px); }
  }
}

/* ステップ 2、3、確認、完了で使う部品 */
@layer components {
  a.btn { text-decoration: none; }
  .w-s { max-width: 180px; }
  .w-m { max-width: 280px; }
  .mt { margin-top: 10px; }
  .big { overflow-wrap: anywhere; }
  .done-page .big { font-size: 17px; }
  .steps-gap { height: 24px; }
  .card-title:last-child { margin-bottom: 0; }
  .note.ok { background: #e9f7f0; color: #0b5a3d; }
  .note.ok::before { content: ""; flex: none; width: 14px; height: 8px; margin-top: 5px; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); }

  /* チェックボックス 1 つ */
  .check { display: flex; align-items: flex-start; gap: 12px; min-height: var(--tap); padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--surface); font-weight: 700; cursor: pointer; }
  .check input { appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 2px solid #b6bfcb; border-radius: 7px; background: #fff; display: grid; place-items: center; cursor: pointer; }
  .check input::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
  .check input:checked { background: var(--blue-500); border-color: var(--blue-500); }
  .check input:checked::after { opacity: 1; }
  .check:has(input:checked) { border-color: var(--blue-500); background: var(--blue-50); }
  .check.strong { margin-top: 24px; font-size: 15px; line-height: 1.6; }

  /* 「現住所と同じ」を外したときだけ出す。JS は使わない */
  .when-off { margin-top: 22px; }
  .card:has(#same:checked) .when-off { display: none; }

  /* 学校の候補 */
  .combo { position: relative; }
  .suggest { list-style: none; margin: 6px 0 0; padding: 6px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-m); box-shadow: 0 12px 32px rgb(16 26 42 / 0.12); }
  .suggest li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
  .suggest li b { color: var(--blue-600); }
  .suggest li small { flex: none; font-size: 11px; font-weight: 700; color: var(--ink-2); background: var(--bg); padding: 3px 8px; border-radius: 6px; }
  .suggest li[aria-selected="true"], .suggest li:hover { background: var(--blue-50); }
  .combo + .link-btn { margin-top: 6px; }

  .choices.cols-2 { grid-template-columns: 1fr 1fr; }
  .row.grad { grid-template-columns: 1fr 1fr; align-items: start; }

  /* 確認画面 */
  .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .card-head .card-title { margin: 0; }
  .card-head .link-btn { text-decoration: none; }
  .summary { margin: 0; }
  .summary > div { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
  .summary > div:first-child { border-top: 0; }
  .summary dt { font-size: 13px; color: var(--ink-2); padding-top: 2px; }
  .summary dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
  .empty { font-weight: 400; color: var(--ink-3); }
  .consent { font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
  .consent .card-title { color: var(--ink); }
  .consent h3 { font-family: var(--font); font-size: 14px; color: var(--ink); margin: 16px 0 4px; }
  .consent ul { margin: 0; padding-left: 1.3em; }
  .consent .check { color: var(--ink); }

  /* 完了画面 */
  .done-page { text-align: center; padding-top: 48px; padding-bottom: 64px; }
  .done-page .card { text-align: left; }
  .done-page .page-lead { margin-bottom: 28px; }
  .done-mark { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: var(--blue-500); display: grid; place-items: center; box-shadow: 0 0 0 10px var(--blue-100); }
  .done-mark::after { content: ""; width: 28px; height: 15px; border-left: 5px solid #fff; border-bottom: 5px solid #fff; transform: rotate(-45deg) translate(2px, -3px); }
  .flow { list-style: none; counter-reset: flow; margin: 0; padding: 0; }
  .flow li { counter-increment: flow; display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; padding: 12px 0; }
  .flow li::before { content: counter(flow); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--blue-50); color: var(--blue-600); font-family: var(--font-head); font-weight: 700; display: grid; place-items: center; }
  .flow li span { grid-column: 2; font-size: 14px; color: var(--ink-2); }
  .done-actions { display: flex; justify-content: center; margin-top: 28px; }

  @media (min-width: 900px) {
    .done-page { max-width: 640px; margin: 0 auto; padding-top: 72px; }
    .summary > div { grid-template-columns: 12em 1fr; gap: 12px; }
    .row.grad { max-width: 460px; }
  }
}

/* 実装で足した部品 */
@layer components {
  [x-cloak] { display: none !important; }
  .vsteps a { color: inherit; text-decoration: none; }
  .vsteps a:hover { text-decoration: underline; }
  .error-summary { display: flex; gap: 10px; background: var(--danger-bg); color: var(--danger); border-radius: var(--r-m); padding: 14px 16px; font-weight: 700; font-size: 14px; margin-bottom: 16px; }
  .picked { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--ok); }
  .picked::before { content: ""; width: 12px; height: 7px; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg) translateY(-2px); }
  .sub-field { margin-top: 12px; }
  .pre { white-space: pre-wrap; }
}

@layer components {
  /* 候補が多いときは、一覧の中でスクロールさせる */
  .suggest { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
}

@layer components {
  /* 人には見せない入力欄。display: none にすると見破られやすいので、画面の外に置く */
  .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
}