/* LabQSL スタイル */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
input::placeholder, textarea::placeholder { color: var(--hl-placeholder-color); opacity: 1; }
body { font-family: 'Noto Sans JP', 'Noto Sans', 'Roboto Condensed', sans-serif; background: #f8f9fb; color: #374151; font-size: var(--hl-fs-body); line-height: 1.74; letter-spacing: 0.04em; }
a { color: #2c7be5; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ヘッダー */
.lqsl-header { background: #001B46; color: #fff; display: block; height: auto; padding: 0; }
.lqsl-header__logo-text { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: 2px; }
.lqsl-header__nav a { color: #cde; margin: 0 12px; font-size: 13px; }
.lqsl-header__nav a:hover { color: #fff; text-decoration: none; }
.lqsl-header__user { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.lqsl-header__user a { color: #cde; }
.lqsl-callsign { font-weight: 700; color: #2c5f9e; }

/* メイン */
.lqsl-main { min-height: calc(100vh - 54px - 60px); }
.lqsl-container { max-width: 1100px; margin: 0 auto; padding: var(--hl-container-pt) var(--hl-container-px) var(--hl-container-pb); }
/* コンテンツ幅モディファイア（inline max-width の共通化） */
.lqsl-container--w560 { max-width: 560px; }
.lqsl-container--w680 { max-width: 680px; }
.lqsl-container--w720 { max-width: 720px; }
.lqsl-container--w800 { max-width: 800px; }

/* ── KPIカード（ダッシュボード基準・全ページ共通の先頭カード群） ── */
.lqsl-kpi { display:grid; grid-template-columns:repeat(auto-fit, minmax(155px, 1fr)); gap:12px; margin-bottom:20px; }
.lqsl-kpi__card { background:#fff; border:1px solid #e2e4e9; border-radius:10px; padding:20px 16px 18px; display:flex; flex-direction:column; gap:2px; border-top:3px solid var(--kpi-color,#e2e4e9); }
.lqsl-kpi__label { font-size:14px; font-weight:700; color:var(--hl-text-subtle); letter-spacing:.04em; }
.lqsl-kpi__num { font-family:'Oswald',sans-serif; font-size:30px; font-weight:700; color:#1a1f36; line-height:1.1; }
.lqsl-kpi__num span { font-size:var(--hl-fs-base); font-weight:600; color:var(--hl-text-subtle); margin-left:2px; }
.lqsl-kpi__note { font-size:var(--hl-fs-xs); color:var(--hl-text-muted); margin-top:2px; }
.lqsl-kpi__note--up   { color:#10b981; }
.lqsl-kpi__note--down { color:#f87171; }

/* ── アワード共通ヒーロー（構造は共通・色/背景/画像のみ差し替え） ── */
.award-hero { position:relative; overflow:hidden; border-radius:16px; padding:22px 26px; margin-bottom:24px; color:#fff; background:var(--award-bg,#0f2a4a); }
.award-hero__bg { position:absolute; inset:0; border-radius:16px; overflow:hidden; pointer-events:none; }
.award-hero__bg img { position:absolute; right:-50px; top:50%; transform:translateY(-50%); object-fit:contain; }
.award-hero__bg::after { content:""; position:absolute; inset:0; background:var(--award-overlay, linear-gradient(90deg, var(--award-bg,#0f2a4a) 0%, var(--award-bg,#0f2a4a) 34%, transparent 86%)); }
.award-hero--photo .award-hero__bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transform:none; }
.award-hero__bgtext { position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:120px; font-weight:900; opacity:.06; line-height:1; pointer-events:none; letter-spacing:-.02em; z-index:0; }
.award-hero__logo { position:absolute; right:16px; top:12px; height:40%; width:auto; opacity:.55; pointer-events:none; z-index:0; mix-blend-mode:luminosity; }
.award-hero__image2 { position:absolute; pointer-events:none; z-index:0; mix-blend-mode:luminosity; }
.award-hero__body { position:relative; z-index:1; }
.award-hero__label { font-size:11px; font-weight:700; letter-spacing:.12em; opacity:.6; margin-bottom:4px; }
.award-hero__code-badge { display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; color:#0f2a4a; padding:3px 12px; border-radius:99px; margin-right:10px; vertical-align:middle; }
.award-hero__title { font-size:18px; font-weight:800; margin:0 0 12px; line-height:1.25; display:flex; align-items:center; flex-wrap:wrap; gap:6px 0; }
.award-hero__subtitle { font-size:13px; opacity:.85; margin:0 0 12px; }
.award-hero__row { display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:space-between; }
.award-hero__row--top { align-items:flex-start; }
.award-hero__main { flex:1; min-width:200px; }
.award-hero__count { display:flex; align-items:baseline; gap:8px; }
.award-hero__count-num { font-family:'Roboto Condensed',sans-serif; font-size:42px; font-weight:700; line-height:1; color:var(--award-accent,#64b5f6); }
.award-hero__count-num.is-achieved { color:#ffd700; }
.award-hero__count-total { font-family:'Roboto Condensed',sans-serif; font-size:18px; font-weight:600; opacity:.7; }
.award-hero__count-unit { font-size:13px; opacity:.5; margin-left:2px; }
.award-hero__bar { background:rgba(255,255,255,.15); border-radius:6px; height:7px; margin-top:10px; overflow:hidden; max-width:440px; }
.award-hero__bar-fill { background:var(--award-accent,#64b5f6); height:100%; border-radius:6px; transition:width .5s; }
.award-hero__bar-fill.is-full { background:#ffd700; }
.award-hero__bar--qsl { height:5px; margin-top:5px; }
.award-hero__bar-fill.is-qsl { background:#fff; opacity:.85; }
.award-hero__note { font-size:11px; opacity:.55; margin-top:4px; }
.award-hero__note--qsl { opacity:.85; font-weight:700; }
.award-hero__badge { display:inline-flex; align-items:center; gap:6px; background:rgba(255,215,0,.15); border:1.5px solid rgba(255,215,0,.5); border-radius:20px; padding:3px 14px; margin-top:10px; font-size:13px; font-weight:800; color:#ffd700; letter-spacing:.05em; }
.award-hero__credit { margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.12); font-size:11px; line-height:1.75; opacity:.8; max-width:640px; }
.award-hero__credit a { color:#9fd0ff; text-decoration:none; font-weight:600; }
.award-hero__credit a:hover { text-decoration:underline; }
/* 達成メダル画像オーバーレイ（ZA/JCC/JCG/WAJA/AJD等） */
.award-hero__medal { flex-shrink:0; position:relative; display:inline-block; }
.award-hero__medal img { display:block; height:120px; width:auto; }
.award-hero__medal-overlay { position:absolute; top:38%; left:50%; transform:translate(-50%,-50%); text-align:center; line-height:1.3; pointer-events:none; }
.award-hero__medal-code { font-size:18px; font-weight:900; color:#3d2000; font-family:'Oswald',sans-serif; letter-spacing:.04em; text-shadow:0 1px 3px rgba(255,255,255,.4); }
.award-hero__medal-sub { font-size:11px; font-weight:800; color:#5a3200; letter-spacing:.06em; }
/* アクションボタン行（POTA等） */
.award-hero__actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
/* 複数アワードのミニ進捗カードgrid（japan/index.php） */
.award-hero__subcards { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:12px; margin-top:14px; }
.award-hero__subcard { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:12px; text-decoration:none; transition:background .2s; display:block; }
.award-hero__subcard:hover { background:rgba(255,255,255,.12); text-decoration:none; }
.award-hero__subcard-label { font-size:13px; font-weight:700; letter-spacing:.08em; margin-bottom:6px; white-space:nowrap; }
.award-hero__subcard-count { display:flex; align-items:baseline; gap:5px; flex-wrap:nowrap; margin:0 0 10px; }
.award-hero__subcard-num { font-family:'Roboto Condensed',sans-serif; font-size:32px; font-weight:700; line-height:1; color:#fff; white-space:nowrap; }
.award-hero__subcard-total { font-size:14px; color:rgba(255,255,255,.7); white-space:nowrap; }
.award-hero__subcard-bar { background:rgba(255,255,255,.1); border-radius:99px; height:8px; overflow:hidden; }
.award-hero__subcard-fill { height:100%; border-radius:99px; transition:width .5s; }
.award-hero__subcard-pct { font-size:13px; color:rgba(255,255,255,.6); margin-top:5px; }
/* 統計ボックス（POTA等の写真背景ヒーロー内） */
.award-hero__statsbox { background:rgba(0,0,0,.35); backdrop-filter:blur(4px); border-radius:14px; padding:12px 18px; min-width:280px; flex-shrink:0; }
.award-hero__statsbox-title { font-size:10px; font-weight:700; letter-spacing:.08em; opacity:.7; margin-bottom:6px; }
.award-hero__statsgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.award-hero__stat-num { font-family:'Roboto Condensed',sans-serif; font-size:20px; font-weight:800; line-height:1; }
.award-hero__stat-label { font-size:10px; opacity:.7; margin-top:2px; white-space:nowrap; }
.award-hero__credit .en { opacity:.72; }

/* フッター */
.lqsl-footer { background: #001B46; color: #aaa; text-align: center; padding: 16px; font-size: 12px; }
.lqsl-footer a { color: #7df; }
.lqsl-footer__inner { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.lqsl-footer__nav a { margin: 0 8px; }
.lqsl-footer--auth { margin-top: 24px; background: transparent; color: #999; }
.lqsl-footer--lp { background: #001B46; color: #aaa; padding: 24px; }

/* 認証ページ */
.lqsl-body--auth { background: linear-gradient(135deg, #001B46 0%, #0a3d7c 100%); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 40px 16px; }
.lqsl-auth-wrap { width: 100%; max-width: 440px; }
.lqsl-auth-logo { text-align: center; margin-bottom: 24px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.lqsl-auth-logo__link { text-decoration:none; display:flex; align-items:center; justify-content:center; gap:10px; }
.lqsl-auth-logo__svg svg { height:56px !important; width:auto !important; }
.lqsl-auth-logo__pagebadge svg { height:45px !important; width:auto !important; }
.lqsl-auth-logo__text { font-size: 32px; font-weight: 700; color: #fff; letter-spacing: 3px; }
.lqsl-auth-logo__sub { font-size: 12px; color: #8ab; margin:0; }
.lqsl-auth-card { background: #fff; border-radius: var(--hl-r-md); padding: 32px; border: var(--hl-bw) solid #CECECE; }
.lqsl-auth-card__title { font-size: 22px; font-weight: 700; text-align: center; margin-bottom: 24px; color: #001B46; }
.lqsl-auth-card__sub { font-size: 13px; color: #777; text-align: center; margin-bottom: 20px; }
.lqsl-auth-card__foot { text-align: center; margin-top: 20px; font-size: 13px; color: #777; }
.lqsl-auth-card__foot .sep { margin: 0 8px; color: #ccc; }
.lqsl-auth-card__hamlab { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; text-align: center; font-size: 13px; color: #777; }
.lqsl-auth-card__hamlab p { margin-bottom: 10px; }

/* フォーム */
.lqsl-form { display: flex; flex-direction: column; gap: var(--hl-gap-form); }
.lqsl-form__group { display: flex; flex-direction: column; gap: var(--hl-gap-field); }
.lqsl-form__group label { font-size: 12px; font-weight: 700; color: #9ca3af; letter-spacing: 0.06em; }
/* ── 入力欄 共通スタイル（ログ入力クイック基準に統一） ── */
.lqsl-input,
.lqsl-form__group input, .lqsl-form__group select, .lqsl-form__group textarea {
  border: 1.5px solid #d1d5db; border-radius: 5px; padding: 6px 8px;
  font-size: 16px; font-family: 'Roboto Condensed', 'Noto Sans JP', sans-serif;
  color: #1a1f36; background: #fff; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.lqsl-form__group input, .lqsl-form__group select, .lqsl-form__group textarea { width: 100%; }
.lqsl-input, .lqsl-form__group input, .lqsl-form__group select { height: 35px; }
.lqsl-form__group textarea { height: auto; min-height: 76px; line-height: 1.6; padding: 8px; }
.lqsl-form__group select { min-width: 160px; }
/* チェックボックス・ラジオは高さ固定・全幅の対象外 */
.lqsl-form__group input[type=checkbox], .lqsl-form__group input[type=radio],
.lqsl-input[type=checkbox], .lqsl-input[type=radio] { width: auto; height: auto; }
.lqsl-input:focus,
.lqsl-form__group input:focus, .lqsl-form__group select:focus, .lqsl-form__group textarea:focus {
  outline: none; border-color: var(--hl-bc-focus); box-shadow: 0 0 0 3px rgba(37,99,235,.08); background: #fff;
}
.lqsl-form__group.has-error input, .lqsl-form__group.has-error select { border-color: var(--hl-bc-error); }
/* ── パスワード表示切替 ── */
.lqsl-password-field { position: relative; }
.lqsl-password-field input { padding-right: 38px; }
.lqsl-password-toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer; color: var(--hl-text-subtle);
  border-radius: 4px;
}
.lqsl-password-toggle:hover { color: var(--hl-text-muted); background: #f3f4f6; }
.lqsl-password-toggle svg { width: 18px; height: 18px; }
.lqsl-password-toggle .lqsl-eye-off { display: none; }
.lqsl-password-toggle[aria-pressed="true"] .lqsl-eye-on { display: none; }
.lqsl-password-toggle[aria-pressed="true"] .lqsl-eye-off { display: block; }
.lqsl-form__error { font-size: var(--hl-fs-sm); color: var(--hl-bc-error); }
.lqsl-form__agree { font-size: 13px; }
.lqsl-form__agree input { width: auto; height: auto; margin-right: 6px; }
/* コールサイン欄は他の入力欄より大きく（全体共通ルール） */
.lqsl-input--callsign { font-family: 'Roboto Condensed', monospace; text-transform: uppercase; font-weight: 700; font-size: 18px; letter-spacing: 2px; }
.lqsl-input--grid { font-family: 'Roboto Condensed', monospace; text-transform: uppercase; letter-spacing: 1px; }
.lqsl-input--disabled { background: #f9fafb; color: #9ca3af; border-color: #e5e7eb !important; }

/* ══ ボタン統一デザインシステム ══════════════════════════════
   役割別ルール:
     メイン行動  → lqsl-btn--primary  (#2563eb 青)
     補助行動    → lqsl-btn--outline  (白背景+枠線)
     破壊的行動  → lqsl-btn--danger   (#dc2626 赤)
     LP用        → lqsl-btn--ghost    (透明+白枠)
     無効状態    → lqsl-btn--disabled / [disabled]
   サイズ: デフォルト(13px) / --sm(12px) / --lg(15px)
   ════════════════════════════════════════════════════════ */

/* ─── 基底 ─── */
.lqsl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hl-gap-field);
  font-size: var(--hl-btn-fs); font-weight: 700; font-family: inherit;
  padding: var(--hl-btn-pd); border-radius: var(--hl-btn-radius); border: var(--hl-bw-md) solid transparent;
  line-height: 1; white-space: nowrap; cursor: pointer; text-align: center;
  text-decoration: none; flex-shrink: 0;
  transition: opacity .15s, background .15s, border-color .15s;
  letter-spacing: 0.03em;
}
.lqsl-btn:hover { opacity: .88; text-decoration: none; }

/* ─── バリアント ─── */
.lqsl-btn--primary  { background: var(--hl-accent); color: #fff !important; border-color: var(--hl-accent); }
.lqsl-btn--outline  { background: var(--hl-white); color: var(--hl-text) !important; border-color: var(--hl-bc-input); }
.lqsl-btn--outline:hover  { background: var(--hl-bg); border-color: var(--hl-text-subtle); opacity: 1; }
.lqsl-btn--secondary { background: var(--hl-white); color: var(--hl-text) !important; border-color: var(--hl-bc-input); }
.lqsl-btn--secondary:hover { background: var(--hl-bg); border-color: var(--hl-text-subtle); opacity: 1; }
.lqsl-btn--danger   { background: #dc2626; color: #fff !important; border-color: #dc2626; }
.lqsl-btn--success  { background: #15803d; color: #fff !important; border-color: #15803d; }
.lqsl-btn--ghost    { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.5); }
.lqsl-btn--ghost:hover { background: rgba(255,255,255,.1); opacity: 1; }

/* ─── サイズ ─── */
.lqsl-btn--sm  { font-size: var(--hl-fs-xs) !important; padding: var(--hl-pd-btn-sm) !important; border-radius: var(--hl-r-sm) !important; }
.lqsl-btn--lg  { font-size: var(--hl-fs-lg) !important; padding: 11px 28px 13px !important; }
.lqsl-btn--full { width: 100%; display: flex; }

/* ─── 無効 ─── */
.lqsl-btn--disabled,
.lqsl-btn[disabled] {
  background: #f9fafb !important; color: #d1d5db !important;
  border-color: #e5e7eb !important; pointer-events: none; opacity: 1 !important; cursor: default;
}

/* ─── テキストリンクボタン ─── */
.lqsl-btn-text { background: none; border: none; cursor: pointer; color: var(--hl-blue); font-size: var(--hl-fs-base); padding: 0; font-family: inherit; }
.lqsl-btn-text:hover { text-decoration: underline; }
.lqsl-btn-text--danger { color: var(--hl-danger); }

/* ══ ダッシュボード用ボタン (db-btn) ═══════════════════════
   ※ 後方互換エイリアス。新規コードでは lqsl-btn を使うこと。
   ════════════════════════════════════════════════════════ */
.db-btn { display: inline-flex; align-items: center; gap: var(--hl-gap-field); font-weight: 700; border: var(--hl-bw-md) solid transparent; border-radius: var(--hl-r-md); text-decoration: none; white-space: nowrap; cursor: pointer; flex-shrink: 0; line-height: 1; transition: opacity .15s, background .15s, border-color .15s; }
.db-btn:hover { text-decoration: none; opacity: .88; }
.db-btn--primary  { font-size: var(--hl-fs-base); padding: var(--hl-pd-btn); background: var(--hl-accent); color: #fff !important; border-color: var(--hl-accent); }
.db-btn--outline  { font-size: var(--hl-fs-base); padding: 7px 16px; background: var(--hl-white); color: var(--hl-text) !important; border-color: var(--hl-bc-input); }
.db-btn--outline:hover { background: var(--hl-bg); border-color: var(--hl-text-subtle); opacity: 1; }
.db-btn--colored  { font-size: var(--hl-fs-xs); padding: var(--hl-pd-btn-sm); border-radius: var(--hl-r-sm); color: inherit; }
.db-btn--disabled { font-size: var(--hl-fs-xs); padding: var(--hl-pd-btn-sm); border-radius: var(--hl-r-sm); background: #f9fafb !important; color: #d1d5db !important; border-color: #e5e7eb !important; pointer-events: none; opacity: 1 !important; }
.db-btn--sm { font-size: var(--hl-fs-xs) !important; padding: var(--hl-pd-btn-sm) !important; border-radius: var(--hl-r-sm) !important; }

/* アラート — バリアントはステータストークンを使用 */
.lqsl-alert { padding: var(--hl-pd-alert); border-radius: var(--hl-r-lg); margin-bottom: var(--hl-gap-form); font-size: var(--hl-fs-base); font-weight: 500; }
.lqsl-alert--success { background: var(--hl-success-bg); border: 1px solid var(--hl-success-border); color: var(--hl-success); }
.lqsl-alert--warn    { background: var(--hl-warning-bg); border: 1px solid var(--hl-warning-border); color: var(--hl-warning); }
.lqsl-alert--error   { background: var(--hl-danger-bg);  border: 1px solid var(--hl-danger-border);  color: var(--hl-danger); }
.lqsl-alert--info    { background: var(--hl-info-bg);    border: 1px solid var(--hl-info-border);    color: var(--hl-info); }
.lqsl-info-box { background: var(--hl-info-bg); border: 1px solid var(--hl-info-border); border-radius: 10px; padding: 14px 16px; }

/* ページタイトル */
.lqsl-page-title { font-size: var(--hl-page-title-size); font-weight: var(--hl-page-title-weight); color: var(--hl-page-title-color); margin-bottom: 0; letter-spacing: 0.02em; line-height: 1.3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lqsl-page-title-wrap { margin-bottom: var(--hl-page-title-mb); }
.lqsl-page-title-wrap hr { border: none; border-top: 1px solid var(--hl-title-hr-color); margin: var(--hl-title-hr-margin) 0; }
.lqsl-page-subtitle { font-size: var(--hl-page-subtitle-size); color: var(--hl-page-subtitle-color); margin-top: 4px; line-height: 1.7; }

/* セクション */
.lqsl-section { background: #fff; border-radius: var(--hl-r-xl); border: var(--hl-bw) solid var(--hl-bc); padding: var(--hl-pd-section); margin-bottom: var(--hl-mb-section); }
/* overflow:hidden が必要な場合のみ付与（デフォルトは外さない ← popup クリッピング防止） */
.lqsl-section--clip { overflow: hidden; }
.lqsl-section__title { font-size: var(--hl-fs-lg); font-weight: 700; color: #1a1f36; margin-bottom: 16px; letter-spacing: 0.03em; display: flex; align-items: center; gap: 6px; }
/* セクション内ヘッダー行（タイトル + border-bottom パターン） */
.lqsl-section__head {
  padding: 12px 18px;
  border-bottom: 1px solid var(--hl-bc-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.lqsl-section__head-title { font-size: var(--hl-fs-lg); font-weight: 700; color: #1a1f36; display: flex; align-items: center; gap: 6px; }
/* セクション内ボディ（ヘッダーと組み合わせて使う） */
.lqsl-section__body { padding: 14px 18px; }
.lqsl-section--empty { text-align: center; padding: 40px 24px; color: #9ca3af; }
.lqsl-section--empty p { margin-bottom: 16px; }
.lqsl-text--or { display: block; margin: 8px 0; color: #9ca3af; font-size: 13px; }

/* テーブル */
.lqsl-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.lqsl-table { width: 100%; border-collapse: collapse; font-size: var(--hl-fs-base); }
.lqsl-table thead th { background: #f3f4f6; color: var(--hl-text-muted); padding: 8px 12px; text-align: left; font-weight: 700; white-space: nowrap; font-size: var(--hl-fs-sm); letter-spacing: 0.06em; text-transform: uppercase; border-bottom: var(--hl-bw) solid var(--hl-bc); }
.lqsl-table tbody tr:nth-child(odd)  { background: var(--hl-white); }
.lqsl-table tbody tr:nth-child(even) { background: #fafafa; }
.lqsl-table tbody tr:hover { background: var(--hl-accent-soft); }
.lqsl-table td { border-bottom: var(--hl-bw) solid var(--hl-bc-subtle); padding: 8px 12px; font-size: var(--hl-fs-base); color: var(--hl-text); vertical-align: middle; }
.lqsl-table tbody tr:last-child td { border-bottom: none; }
.lqsl-table__row--primary { background: var(--hl-accent-soft) !important; }
.lqsl-table__actions { white-space: nowrap; display: flex; gap: 8px; }

/* バッジ */
.lqsl-badge { display: inline-block; padding: 1px 8px 3px; border-radius: var(--hl-r-sm); font-size: var(--hl-fs-sm); font-weight: 700; }
.lqsl-badge--primary { background: var(--hl-accent); color: #fff; }
.lqsl-badge--status-unverified { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; }
.lqsl-badge--status-email_verified { background: #f0fdf4; color: #15803d; border: 1px solid #86efac; }
/* 状態バッジ（契約状態など）。lqsl-alert のバリアント名と揃える */
.lqsl-badge--success { background: var(--hl-success-bg); color: var(--hl-success); border: 1px solid var(--hl-success-border); }
.lqsl-badge--warn    { background: var(--hl-warning-bg); color: var(--hl-warning); border: 1px solid var(--hl-warning-border); }
.lqsl-badge--error   { background: var(--hl-danger-bg);  color: var(--hl-danger);  border: 1px solid var(--hl-danger-border); }
.lqsl-badge--info    { background: var(--hl-info-bg);    color: var(--hl-info);    border: 1px solid var(--hl-info-border); }

/* 項目名＋値の2列テーブル（マイプラン等）。行の縞模様・hover は使わない */
.lqsl-table--kv tbody tr,
.lqsl-table--kv tbody tr:nth-child(odd),
.lqsl-table--kv tbody tr:nth-child(even),
.lqsl-table--kv tbody tr:hover { background: transparent; }
.lqsl-table--kv th {
  width: 34%;
  padding: 10px 12px 10px 0;
  text-align: left;
  vertical-align: top;
  font-size: var(--hl-fs-sm);
  font-weight: 700;
  color: var(--hl-text-subtle);
  white-space: nowrap;
  border-bottom: var(--hl-bw) solid var(--hl-bc-subtle);
}
.lqsl-table--kv td { padding: 10px 0; }
.lqsl-table--kv tbody tr:last-child th { border-bottom: none; }
@media (max-width: 767px) {
  /* スマホでは項目名を値の上に積む（横並びだと値が潰れるため） */
  .lqsl-table--kv th,
  .lqsl-table--kv td { display: block; width: auto; }
  .lqsl-table--kv th { border-bottom: none; padding-bottom: 2px; }
  .lqsl-table--kv td { padding-top: 0; padding-bottom: 12px; border-bottom: var(--hl-bw) solid var(--hl-bc-subtle); }
  .lqsl-table--kv tbody tr:last-child td { border-bottom: none; }
}

/* コールサイン */
.lqsl-callsign { font-family: var(--hl-font-cs); font-weight: 700; font-size: var(--hl-fs-cs); letter-spacing: var(--hl-ls-cs); color: var(--hl-color-cs); }

/* ダッシュボード */
.lqsl-dashboard__callsign { font-size: 28px; font-weight: 700; color: #1a1f36; margin-bottom: 24px; font-family: 'Roboto Condensed', monospace; letter-spacing: 2px; }
.lqsl-stats { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.lqsl-stats__card { background: #fff; border-radius: var(--hl-r-xl); border: var(--hl-bw) solid var(--hl-bc); padding: 20px 24px; text-align: center; min-width: 120px; flex: 1; }
.lqsl-stats__num { font-size: 36px; font-weight: 700; color: #1a1f36; font-family: 'Oswald', sans-serif; }
.lqsl-stats__label { font-size: 12px; color: #9ca3af; margin-top: 4px; }
.lqsl-stats__card--alert .lqsl-stats__num { color: #dc2626; }
.lqsl-quick-actions { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.lqsl-hamlab-cta { background: #f0f9ff; border-radius: var(--hl-r-xl); border: var(--hl-bw) solid #bae6fd; padding: 16px 20px; text-align: center; font-size: var(--hl-fs-base); color: #374151; }
.lqsl-hamlab-cta__link { font-weight: 700; color: #2563eb; }
.lqsl-link { font-size: 13px; color: #2563eb; }
.lqsl-text--muted { color: #9ca3af; font-size: var(--hl-fs-base); }

/* LP */
.lqsl-body--lp { background: #fff; }
.lqsl-lp-header { background: #001B46; padding: 0 32px; height: 60px; display: flex; align-items: center; justify-content: space-between; }
.lqsl-lp-header__logo { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: 2px; }
.lqsl-lp-header__actions { display: flex; gap: 12px; }
.lqsl-lp-hero { background: linear-gradient(135deg, #001B46 0%, #0a3d7c 100%); color: #fff; padding: 80px 20px; text-align: center; }
.lqsl-lp-hero__title { font-size: 36px; font-weight: 700; line-height: 1.4; margin-bottom: 20px; }
.lqsl-lp-hero__sub { font-size: 16px; color: #cde; margin-bottom: 32px; line-height: 1.8; }
.lqsl-lp-hero__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.lqsl-lp-hero__powered { font-size: 12px; color: #8ab; }
.lqsl-lp-hero__powered a { color: #7df; }
.lqsl-lp-features { padding: 60px 20px; background: #f8f9fa; }
.lqsl-lp-features__inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.lqsl-lp-feature { background: #fff; border-radius: 4px; border: 1px solid #CECECE; padding: 24px; }
.lqsl-lp-feature h3 { font-size: 16px; margin-bottom: 10px; color: #001B46; }
.lqsl-lp-feature p { font-size: 14px; color: #666; line-height: 1.7; }

/* verify */
.lqsl-verify-result { text-align: center; padding: 16px; }
.lqsl-verify-result h1 { font-size: 20px; margin-bottom: 16px; }
.lqsl-verify-result--ok h1 { color: #276749; }
.lqsl-verify-result--error h1 { color: #c53030; }
.lqsl-verify-result p { margin-bottom: 16px; color: #666; }

/* プロフィール */
.lqsl-profile-img-preview img { border-radius: 50%; border: 2px solid #ddd; margin-bottom: 8px; }

/* レスポンシブ */
@media (max-width: 600px) {
    .lqsl-header__nav { display: none; }
    .lqsl-stats { flex-direction: column; }
    .lqsl-quick-actions { flex-direction: column; }
    .lqsl-lp-hero__title { font-size: 24px; }
    .lqsl-container { padding: var(--hl-container-pt-sp) var(--hl-container-px-sp) var(--hl-container-pb-sp); }
    .lqsl-section { padding: 18px 16px; border-radius: 10px; }
    .lqsl-page-title { font-size: var(--hl-page-title-size-sp); }
}

/* ─── フッター（全サービス共通） ──────────────────────────────── */
.hl-footer { background: var(--hl-navy); color: #94a3b8; text-align: center; padding: 16px; font-size: 12px; }
.hl-footer a { color: #7dd3fc; }
.hl-footer__inner { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.hl-footer__nav a { margin: 0 8px; }

/* ─── アワードルールカード ─── */
.hl-rule-card {
  margin-bottom: 16px;
  padding: 18px 20px 20px;
}
.hl-rule-card__label {
  font-size: var(--hl-fs-sm);
  font-weight: 800;
  color: var(--hl-text-muted);
  letter-spacing: .10em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hl-rule-card__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hl-bc-subtle);
}
.hl-rule-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.hl-rule-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.hl-rule-item__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--hl-accent-soft);
  color: var(--hl-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 17px;
}
.hl-rule-item__title {
  font-size: var(--hl-fs-base);
  font-weight: 700;
  color: var(--hl-text);
  margin-bottom: 3px;
  letter-spacing: .02em;
}
.hl-rule-item__body {
  font-size: var(--hl-fs-sm);
  color: var(--hl-text-muted);
  line-height: 1.6;
}

/* ─── 申請サポートCTA ─── */
.hl-apply-cta {
  margin-bottom: 16px;
  padding: 20px 22px;
  border-left: 4px solid var(--hl-accent);
}
.hl-apply-cta__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hl-apply-cta__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--hl-accent-soft);
  color: var(--hl-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.hl-apply-cta__body {
  flex: 1;
  min-width: 0;
}
.hl-apply-cta__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--hl-text);
  margin-bottom: 8px;
}
.hl-apply-cta__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 6px;
}
.hl-apply-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hl-apply-stat__label {
  font-size: 10px;
  font-weight: 700;
  color: var(--hl-text-subtle);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hl-apply-stat__val {
  font-size: 18px;
  font-weight: 800;
  color: var(--hl-text);
  font-family: 'Oswald', sans-serif;
  line-height: 1;
}
.hl-apply-stat__val--accent { color: var(--hl-accent); }
.hl-apply-cta__note {
  font-size: 11px;
  color: var(--hl-text-subtle);
  line-height: 1.5;
}
.hl-apply-cta__btn-wrap {
  flex-shrink: 0;
}

/* ─── JCC/QTH サジェストポップアップ（共通） ─── */
.cm-suggest-popup {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(37,99,235,.18), 0 1.5px 4px rgba(0,0,0,.08);
  z-index: 500;
}
.cm-suggest-popup__title {
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px 4px;
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
  font-family: sans-serif;
}
.cm-suggest-popup .code-suggestions-col {
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 1px solid #f1f5f9;
}
.cm-suggest-popup .code-suggestions-col:last-child { border-bottom: none; }
.cm-suggest-popup .code-suggestions-col:hover { background: #eff6ff; }

/* マイプラン（app/billing/my_plan.php） */
.myplan-note { display: inline-block; font-size: var(--hl-fs-xs); color: var(--hl-text-subtle); line-height: 1.7; }
.myplan-protect { margin-top: 14px; }
.myplan-protect p { margin: 4px 0; }

/* アップグレード案内。無料でご利用中の方にだけ表示する */
.myplan-upsell__lead   { margin: 0 0 14px; line-height: 1.8; }
.myplan-plans          { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.myplan-plan           { flex: 1 1 220px; border: 1.5px solid var(--hl-bc, #e2e4e9); border-radius: 10px; padding: 14px 16px; background: #fff; }
.myplan-plan__name     { font-size: var(--hl-fs-lg); font-weight: 700; color: #1a1f36; margin-bottom: 8px; }
.myplan-plan__prices   { list-style: none; margin: 0; padding: 0; }
/* 支払い間隔ごとに1行。金額とその行の申込ボタンを対にして、
   見た金額とそのまま申し込めるようにする（共通ボタン1つだと着地がずれる）。 */
.myplan-plan__prices li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; }
.myplan-plan__prices li + li { border-top: 1px solid var(--hl-bc, #e2e4e9); }
.myplan-plan__interval { font-size: var(--hl-fs-xs); color: var(--hl-text-subtle); min-width: 3.5em; }
.myplan-plan__amount   { font-family: 'Oswald', sans-serif; font-size: 18px; color: var(--hl-text); }
.myplan-plan__badge    { font-size: 11px; font-weight: 700; color: #92400e; background: #fef3c7; border-radius: 99px; padding: 2px 9px; }
/* ボタンは行の右端へ。狭い画面では折り返して横幅いっぱいになる。 */
.myplan-plan__apply    { margin-left: auto; white-space: nowrap; }
/* キャンペーン価格の行だけオレンジ。lqsl-btn--primary は使えない
   （アプリの --hl-accent は青のため、申込フローのオレンジと食い違う）。 */
.myplan-plan__apply--campaign {
  background: var(--hl-campaign);
  border-color: var(--hl-campaign);
  color: #fff !important;
}
.myplan-plan__apply--campaign:hover {
  background: var(--hl-campaign-hover);
  border-color: var(--hl-campaign-hover);
}
@media (max-width: 480px) {
  .myplan-plan__apply  { margin-left: 0; width: 100%; justify-content: center; }
}
.myplan-upsell__cta    { margin: 0 0 10px; }

/* ── 上限に達した案内の中に置く「プランを見る」ボタン ──────────────
   警告文の中に並べるため、警告そのものより目立たせない。
   ただし押せることは明確に分かる必要があるので、枠線つきの実ボタンにする。 */
.lqsl-upgrade-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px;
  background: var(--hl-white, #fff);
  border: 1.5px solid var(--hl-accent, #4a7fc1);
  color: var(--hl-accent, #4a7fc1) !important;
  font-weight: 700;
  white-space: nowrap;
}
.lqsl-upgrade-btn:hover {
  background: var(--hl-accent, #4a7fc1);
  color: var(--hl-white, #fff) !important;
  opacity: 1;
}
/* アラート内では上の余白を詰め、文章と地続きに見せる */
.lqsl-alert .lqsl-upgrade-btn { margin-top: 10px; }

/* ── プラン変更ガイド（マイプラン内・開閉式）──────────────────────
   変更手続きは事務局対応だが、流れが分からないと手続き前の問い合わせが増える。
   依頼する前にこの場で読めるようにして、必要な依頼だけが届くようにする。 */
.myplan-guide            { margin: 4px 0 16px; border: 1px solid var(--hl-bc, #e2e4e9); border-radius: 10px; background: var(--hl-bg, #f7f8fa); }
.myplan-guide__summary   { cursor: pointer; padding: 12px 16px; font-size: var(--hl-fs-sm); font-weight: 700; color: var(--hl-text); list-style: none; display: flex; align-items: center; gap: 8px; }
.myplan-guide__summary::-webkit-details-marker { display: none; }
.myplan-guide__summary::after { content: '▾'; margin-left: auto; color: var(--hl-text-subtle); transition: transform .15s; }
.myplan-guide[open] .myplan-guide__summary::after { transform: rotate(180deg); }
.myplan-guide__summary:hover { color: var(--hl-blue); }
.myplan-guide__body      { padding: 0 16px 16px; }
.myplan-guide__intro     { margin: 0 0 14px; }
.myplan-guide__case      { background: #fff; border: 1px solid var(--hl-bc, #e2e4e9); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; }
.myplan-guide__case-title{ margin: 0 0 10px; font-size: var(--hl-fs-sm); font-weight: 700; color: #1a1f36; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.myplan-guide__badge     { font-size: 11px; font-weight: 700; padding: 2px 9px 3px; border-radius: 99px; white-space: nowrap; }
/* 「すぐ」は前向きな変化なので成功色、「満了後」は待ちが発生するので注意色 */
.myplan-guide__badge--now { background: var(--hl-success-bg); color: var(--hl-success); border: 1px solid var(--hl-success-border); }
.myplan-guide__badge--end { background: var(--hl-warning-bg); color: var(--hl-warning); border: 1px solid var(--hl-warning-border); }
.myplan-guide__dl        { margin: 0; display: grid; grid-template-columns: 8em 1fr; gap: 6px 14px; font-size: var(--hl-fs-xs); }
.myplan-guide__dl dt     { color: var(--hl-text-subtle); }
.myplan-guide__dl dd     { margin: 0; color: var(--hl-text); }
.myplan-guide__note      { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--hl-warning-bg); border: 1px solid var(--hl-warning-border); color: var(--hl-warning); font-size: var(--hl-fs-xs); line-height: 1.8; }
@media (max-width: 560px) {
  .myplan-guide__dl      { grid-template-columns: 1fr; gap: 2px; }
  .myplan-guide__dl dt   { margin-top: 8px; }
}