/* ============================================================
   jin-sys / Cable Report 共通スタイル
   v1.02 水色テーマ（サクラエディタ風）を全ページに適用
   ============================================================ */

/* --- デザイントークン（v1.02のindex.html / cable-report.htmlから抽出） --- */
:root {
  --accent: #1a6ea0;
  --accent-light: #d0e8f5;
  --accent-dark: #0d4f7a;
  --link: #0d5e8c;
  --link-hover: #094a6e;
  --text: #333;
  --text-sub: #555;
  --white: #fff;
  --main-bg: #e8f4fc;
  --border: #a8d4ec;
  --border-dark: #1a6ea0;
  --card-bg: #f0f7fc;
  --card-border: #b8d8ec;
  --disabled: #999;
  --gold-badge: #d4940a;
  --green: #2e8b57;
  --cta-bg: #1a6ea0;
  --cta-hover: #155d87;
}

/* --- リセット --- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* --- ベース --- */
body {
  font-family: "Meiryo", "メイリオ", sans-serif;
  color: var(--text);
  background: linear-gradient(to right, var(--main-bg), var(--white) 15%, var(--white) 85%, var(--main-bg));
  line-height: 1.8;
  font-size: 15px;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }
p { margin: 0.5rem 0; }
ul { padding-left: 1.5rem; margin: 0.5rem 0; }
li { margin: 0.25rem 0; }

/* --- ヘッダー（サクラエディタ風 角括弧ナビ） --- */
header {
  background: var(--white);
  border-bottom: 3px solid var(--accent);
  padding: 0.5rem 1rem;
  text-align: center;
}
header nav { font-size: 14px; margin-bottom: 0.25rem; }
header nav a {
  color: var(--link);
  text-decoration: none;
  margin: 0 0.5rem;
}
header nav a:hover { text-decoration: underline; }
header nav a::before { content: "[ "; color: var(--disabled); }
header nav a::after  { content: " ]"; color: var(--disabled); }

/* --- コンテナ --- */
.container { max-width: 820px; margin: 0 auto; padding: 0 1rem 2rem; }

/* --- メインタイトル（二重線帯） --- */
.main-title {
  background: var(--accent-light);
  border: 2px solid var(--border-dark);
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: var(--accent-dark);
  max-width: 820px;
  margin: 1.5rem auto 0.5rem;
}

/* --- セクション見出し --- */
.section-heading {
  background: var(--accent-light);
  border-left: 5px solid var(--border-dark);
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 0.75rem;
  font-size: 17px;
  font-weight: bold;
  color: var(--accent-dark);
  margin: 2rem 0 1rem;
}

section { margin-bottom: 1rem; }

/* --- 情報ボックス --- */
.info-box {
  border: 1px solid var(--border);
  background: var(--white);
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
}
.info-box h3 { color: var(--link); font-size: 15px; margin-bottom: 0.25rem; }

/* --- CTAボタン --- */
.cta-area { text-align: center; margin: 1.5rem 0; }
.btn {
  display: inline-block;
  padding: 0.7rem 2rem;
  background: var(--cta-bg);
  color: var(--white);
  text-decoration: none;
  border-radius: 4px;
  font-size: 15px;
  font-weight: bold;
  margin: 0.25rem;
  transition: background 0.2s;
}
.btn:hover { background: var(--cta-hover); color: var(--white); }
.btn-outline {
  background: var(--white);
  color: var(--accent);
  border: 2px solid var(--accent);
}
.btn-outline:hover { background: var(--accent-light); color: var(--accent-dark); }

/* --- サービスカード --- */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.service-card {
  border: 2px solid var(--border);
  background: var(--white);
  padding: 1.25rem;
  position: relative;
}
.service-card h3 { color: var(--accent-dark); font-size: 17px; margin-bottom: 0.5rem; }
.service-card p  { font-size: 14px; color: var(--text-sub); }
.service-card ul { padding-left: 1.25rem; font-size: 14px; margin: 0.5rem 0; color: var(--text-sub); }

.badge {
  display: inline-block; background: var(--accent); color: var(--white);
  padding: 1px 10px; border-radius: 8px; font-size: 12px; font-weight: bold; margin-left: 0.5rem;
}
.badge.soon { background: var(--disabled); }

.service-link {
  display: inline-block; margin-top: 0.75rem; padding: 0.5rem 1.5rem;
  background: var(--accent); color: var(--white); text-decoration: none;
  border-radius: 4px; font-size: 14px; font-weight: bold;
}
.service-link:hover { background: var(--accent-dark); color: var(--white); }

/* --- お知らせ --- */
.news ul { font-size: 14px; padding-left: 1.25rem; }
.news li { margin: 0.2rem 0; }
.news .date { color: var(--accent); font-weight: bold; }

/* --- 特長グリッド --- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.75rem; margin: 0.75rem 0;
}
.feature-item {
  border: 1px solid var(--border); background: var(--white); padding: 0.75rem 1rem;
}
.feature-item h3 { color: var(--accent-dark); font-size: 15px; margin-bottom: 0.25rem; }
.feature-item p  { font-size: 14px; color: var(--text-sub); }

/* --- CSVエクスポート手順 --- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.75rem; margin: 0.75rem 0;
}
.step-box {
  border: 1px solid var(--border); background: var(--white); padding: 0.75rem 1rem;
}
.step-box h3 { color: var(--accent-dark); font-size: 15px; margin-bottom: 0.5rem; }
.step-box code {
  display: block; background: var(--card-bg); border: 1px solid var(--border);
  padding: 0.5rem 0.75rem; margin: 0.5rem 0; font-size: 14px; font-family: "Meiryo", sans-serif;
}
.step-box img { max-width: 100%; border: 1px solid var(--border); margin-top: 0.5rem; }
.step-box p { font-size: 14px; color: var(--text-sub); }

/* --- 使い方 --- */
.howto-list { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin: 0.75rem 0; }
.howto-item {
  border: 1px solid var(--border); background: var(--white); padding: 0.75rem 1rem;
  text-align: center; flex: 1; min-width: 180px; max-width: 240px;
}
.howto-item .num {
  display: inline-flex; width: 32px; height: 32px; background: var(--accent); color: var(--white);
  border-radius: 50%; align-items: center; justify-content: center; font-weight: bold; font-size: 15px;
  margin-bottom: 0.3rem;
}
.howto-item h3 { font-size: 15px; color: var(--accent-dark); margin-bottom: 0.2rem; }
.howto-item p { font-size: 13px; color: var(--text-sub); }

/* --- 料金プランカード（LP用） --- */
.plan-cards { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin: 0.75rem 0; }
.plan-card {
  border: 2px solid var(--border); background: var(--white); padding: 1.25rem 1rem;
  flex: 1; min-width: 230px; max-width: 270px; text-align: center; position: relative;
}
.plan-card.recommended { border-color: var(--gold-badge); }
.plan-card.recommended::before {
  content: "おすすめ"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--gold-badge); color: var(--white); padding: 1px 14px; border-radius: 10px;
  font-size: 12px; font-weight: bold;
}
.plan-card h3 { color: var(--accent-dark); font-size: 16px; margin-bottom: 0.3rem; }
.plan-card .price { font-size: 22px; font-weight: bold; color: var(--accent); margin: 0.5rem 0; }
.plan-card .price span { font-size: 13px; font-weight: normal; color: var(--text-sub); }
.plan-card ul { list-style: none; padding: 0; text-align: left; margin: 0.5rem 0; font-size: 14px; }
.plan-card ul li { padding: 0.2rem 0; border-bottom: 1px solid #eef5fa; }
.plan-card ul li::before { content: "✓ "; color: var(--accent); font-weight: bold; }
.plan-card ul li.disabled { color: var(--disabled); }
.plan-card ul li.disabled::before { content: "— "; color: #ccc; }
.plan-cta {
  display: block; margin-top: 0.75rem; padding: 0.5rem; text-decoration: none;
  font-weight: bold; font-size: 14px; border-radius: 4px;
}
.plan-cta:hover { opacity: 0.85; }
.plan-cta.primary { background: var(--cta-bg); color: var(--white); }
.plan-cta.secondary { background: #e8e8e8; color: var(--text); }
.pricing-note { text-align: center; color: var(--text-sub); font-size: 13px; margin: 0.5rem 0; }

/* --- 変更履歴 --- */
.changelog ul { font-size: 14px; }
.changelog li { margin: 0.2rem 0; }
.changelog .date { color: var(--accent); font-weight: bold; }

/* --- テーブル（特商法等） --- */
table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; }
th, td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; font-size: 14px; }
th { background: var(--accent-light); color: var(--accent-dark); width: 200px; white-space: nowrap; }

/* --- 認証系ページ（ログイン・登録・パスワード） --- */
.auth-page {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: linear-gradient(to right, var(--main-bg), var(--white) 15%, var(--white) 85%, var(--main-bg));
}
.auth-card {
  background: var(--white); padding: 2rem; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); width: 100%; max-width: 360px;
}
.auth-card h1 {
  margin: 0 0 1.5rem; color: var(--accent-dark); font-size: 1.25rem;
}
.auth-card label { display: block; margin-bottom: 0.25rem; font-size: 0.875rem; }
.auth-card input {
  width: 100%; padding: 0.5rem; margin-bottom: 1rem;
  border: 1px solid #ccc; border-radius: 4px;
}
.auth-card button {
  width: 100%; padding: 0.75rem; background: var(--accent);
  color: var(--white); border: none; border-radius: 4px; cursor: pointer; font-size: 1rem;
}
.auth-card button:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-card .error { color: #c00; font-size: 0.875rem; margin-bottom: 1rem; }
.auth-card .success { color: #0a0; font-size: 0.875rem; margin-bottom: 1rem; }
.auth-card a { color: var(--accent); text-decoration: none; font-size: 0.875rem; }

/* --- 変換画面（app） --- */
.app-header {
  background: var(--white);
  border-bottom: 3px solid var(--accent);
  padding: 0.5rem 1rem;
  text-align: center;
}
.app-header nav a {
  color: var(--link); text-decoration: none; margin: 0 0.5rem;
}
.app-header nav a::before { content: "[ "; color: var(--disabled); }
.app-header nav a::after  { content: " ]"; color: var(--disabled); }
.app-header nav a:hover { text-decoration: underline; }

.app-main {
  max-width: 640px; margin: 0 auto; padding: 1.5rem;
}
.app-main h1 { font-size: 1.25rem; color: var(--accent-dark); }
.app-main label { display: block; margin: 0.75rem 0 0.25rem; font-weight: bold; }
.app-main input[type="text"],
.app-main input[type="file"],
.app-main select {
  width: 100%; padding: 0.5rem; margin-bottom: 0.5rem;
  border: 1px solid #ccc; border-radius: 4px;
}
.app-main .row { display: flex; gap: 1rem; flex-wrap: wrap; }
.app-main .row > div { flex: 1; min-width: 140px; }
.app-main button {
  background: var(--accent); color: var(--white); padding: 0.75rem 1.5rem;
  border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; margin-top: 1rem;
}
.app-main button:disabled { opacity: 0.6; cursor: not-allowed; }
.app-main .error { color: #c00; margin-top: 1rem; }
.app-main .trial { font-size: 0.875rem; color: #666; margin-top: 0.5rem; }

.plan-badge {
  display: inline-block; background: var(--accent); color: var(--white);
  padding: 2px 10px; border-radius: 8px; font-size: 0.75rem; margin-left: 0.5rem;
}

.upgrade-banner {
  background: #FDEDEE; border: 1px solid #F5B7B1; border-radius: 8px;
  padding: 1rem; margin-bottom: 1rem; text-align: center;
}
.upgrade-banner a { color: var(--accent); font-weight: bold; }

.warning-banner {
  background: #FFF3CD; border: 1px solid #FFEAA7; border-radius: 8px;
  padding: 0.75rem; margin-bottom: 1rem; text-align: center; font-size: 0.9rem;
}
.warning-banner a { color: var(--accent); font-weight: bold; }

.logout-link { color: #aaa; font-size: 0.85rem; cursor: pointer; text-decoration: underline; }

/* --- 料金選択画面（pricing専用） --- */
.pricing-main { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; }
.pricing-main h1 { text-align: center; color: var(--accent-dark); margin-bottom: 0.5rem; }
.pricing-main .subtitle { text-align: center; color: #888; margin-bottom: 2rem; font-size: 0.95rem; }

.plans { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
.plans .plan-card { min-width: 250px; max-width: 300px; transition: transform 0.2s, box-shadow 0.2s; }
.plans .plan-card:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.plans .plan-card.current { border-color: var(--accent); }

.plan-name { font-size: 1.25rem; font-weight: bold; color: var(--accent-dark); }
.plan-price { font-size: 2rem; font-weight: bold; color: var(--accent); margin: 0.75rem 0; }
.plan-price span { font-size: 0.85rem; font-weight: normal; color: #888; }
.plan-features { list-style: none; padding: 0; margin: 1rem 0; text-align: left; }
.plan-features li { padding: 0.4rem 0; border-bottom: 1px solid #f0f0f0; font-size: 0.92rem; }
.plan-features li::before { content: "✓ "; color: var(--accent); font-weight: bold; }
.plan-features li.disabled { color: #aaa; }
.plan-features li.disabled::before { content: "— "; color: #ccc; }

.plan-btn {
  display: block; width: 100%; padding: 0.75rem; border: none; border-radius: 6px;
  font-size: 1rem; cursor: pointer; margin-top: 1rem; font-weight: bold; transition: opacity 0.2s;
}
.plan-btn:hover { opacity: 0.88; }
.plan-btn.primary { background: var(--accent); color: var(--white); }
.plan-btn.secondary { background: #e0e0e0; color: var(--text); }
.plan-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.current-badge {
  display: inline-block; background: var(--accent); color: var(--white);
  padding: 2px 10px; border-radius: 8px; font-size: 0.75rem; margin-left: 0.5rem;
}
.trial-banner {
  background: #FFF3CD; border: 1px solid #FFEAA7; border-radius: 8px;
  padding: 1rem; margin-bottom: 1.5rem; text-align: center;
}
.proration-note { text-align: center; color: #888; font-size: 0.85rem; margin-top: 1.5rem; }
.billing-link { text-align: center; margin-top: 1.5rem; }
.billing-link a { color: var(--accent); }
.error-msg { color: #c00; text-align: center; margin: 1rem 0; }

/* FAQ */
.faq { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 2rem; }
.faq h2 { text-align: center; color: var(--accent-dark); margin-bottom: 1.5rem; }
.faq-item { margin-bottom: 1.25rem; }
.faq-item h3 { font-size: 1rem; color: var(--accent); margin-bottom: 0.25rem; }
.faq-item p  { font-size: 0.92rem; color: var(--text-sub); }

/* --- フッター --- */
footer {
  background: var(--white); border-top: 2px solid var(--accent);
  text-align: center; padding: 1rem; font-size: 13px; color: var(--text-sub); margin-top: 2rem;
}
footer a { color: var(--link); text-decoration: none; margin: 0 0.4rem; }
footer a:hover { text-decoration: underline; }

/* --- レスポンシブ --- */
@media (max-width: 640px) {
  .main-title { font-size: 18px; }
  th { width: 120px; }
  .plan-card { min-width: 100%; }
  .plans .plan-card { min-width: 100%; max-width: 100%; }
}