/* ======================================================================
   共通スタイル（全領域で読み込む）
   ----------------------------------------------------------------------
   ・サイズ指定は px ではなく rem / vw / vh を優先する。
     （利用者のブラウザ設定に追従し、拡大縮小しても崩れにくくなる）
   ・共通フォントは Noto Sans JP。
   ・アイコンは Font Awesome（Free）を使う。
   ====================================================================== */

/* ----------------------------------------------------------------------
   デザイントークン（色・余白・角丸などの共通値）
   ここを変えれば全体の見た目が変わる。
   ---------------------------------------------------------------------- */
:root {
    /* 文字色 */
    --text-primary:   #1f1e1c;   /* 本文 */
    --text-secondary: #5f5e5a;   /* 補足 */
    --text-muted:     #8a887f;   /* control・注釈 */
    --text-accent:    #524ab7;   /* 強調・リンク */

    /* 背景 */
    --surface-0:      #f4f2ec;   /* ページ背景 */
    --surface-1:      #faf9f5;   /* カード背景（淡い） */
    --surface-2:      #ffffff;   /* カード背景（白） */

    /* 罫線 */
    --border:         #e6e4dd;
    --border-strong:  #d5d3ca;
    --border-accent:  #524ab7;

    /* 状態色 */
    --bg-success:     #e3f3ec;  --text-success: #1d7a5a;
    --bg-warning:     #f6edda;  --text-warning: #9a6a12;
    --bg-danger:      #f6e3e2;  --text-danger:  #a4322c;
    --bg-accent:      #ecebf8;

    /* 角丸 */
    --radius-sm:      0.375rem;
    --radius:         0.5rem;
    --radius-lg:      0.75rem;

    /* 影 */
    --shadow:         0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.08);
    --shadow-lg:      0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);

    /* 余白（8pxベース → rem換算） */
    --space-1:        0.25rem;
    --space-2:        0.5rem;
    --space-3:        0.75rem;
    --space-4:        1rem;
    --space-5:        1.25rem;
    --space-6:        1.5rem;
    --space-8:        2rem;
    --space-12:       3rem;

    /* コンテンツの最大幅 */
    --content-width:  75rem;   /* 1200px 相当 */
}

/* ----------------------------------------------------------------------
   リセット
   ---------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* rem の基準。ブラウザ既定（16px）を尊重する */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-primary);
    background: var(--surface-0);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
}

p {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--text-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ----------------------------------------------------------------------
   フォーム部品
   ---------------------------------------------------------------------- */
input,
select,
textarea,
button {
    font-family: inherit;
    font-size: 1rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 0.0625rem solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-primary);
    line-height: 1.6;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 0.1875rem var(--bg-accent);
}

/* ボタン */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.625rem 1.25rem;
    border: 0.0625rem solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn:hover {
    background: var(--surface-1);
    text-decoration: none;
}

/* 主要ボタン（カートに入れる・保存する 等） */
.btn-primary {
    background: var(--text-accent);
    border-color: var(--text-accent);
    color: #fff;
}

.btn-primary:hover {
    background: #443dab;
    border-color: #443dab;
}

/* 小さめのボタン（一覧の行内などで使う） */
.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
}

/* 危険な操作（削除・停止 等） */
.btn-danger {
    border-color: var(--text-danger);
    color: var(--text-danger);
}

.btn-danger:hover {
    background: var(--bg-danger);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ----------------------------------------------------------------------
   共通の部品
   ---------------------------------------------------------------------- */

/* コンテンツの外枠 */
.container {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* カード */
.card {
    background: var(--surface-2);
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

/* バッジ（状態表示） */
.badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.6;
    white-space: nowrap;
}

.badge-success { background: var(--bg-success); color: var(--text-success); }
.badge-warning { background: var(--bg-warning); color: var(--text-warning); }
.badge-danger  { background: var(--bg-danger);  color: var(--text-danger); }
.badge-accent  { background: var(--bg-accent);  color: var(--text-accent); }
.badge-info    { background: #e5f0fb;            color: #1f5f9e; }
.badge-muted   { background: var(--surface-0);  color: var(--text-secondary); }

/* パンくず（カテゴリ・コーデ・商品詳細で使用） */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.breadcrumb a {
    color: var(--text-secondary);
}

.breadcrumb .sep::before {
    content: "／";
    color: var(--text-muted);
}

/* 読み込み中 */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30vh;
    color: var(--text-muted);
}

/* 画面読み上げ専用（視覚的には隠すが、支援技術には読ませる） */
.sr-only {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    padding: 0;
    margin: -0.0625rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------------------------------------
   メンテナンス中の表示
   ---------------------------------------------------------------------- */
.site-closed {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-4);
}

.closed-box {
    max-width: 32rem;
    text-align: center;
    background: var(--surface-2);
    border: 0.0625rem solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-12) var(--space-8);
}

.closed-box h1 {
    font-size: 1.5rem;
    margin-bottom: var(--space-4);
}

.closed-box p {
    color: var(--text-secondary);
}