/* =============================================================
   shop_common.css ― 会員制ショップ共通スタイル
   既存 shop.html / student_common.css と同じブランドトークンを流用。
   新しい配色は作らない（brief §8）。
   ============================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --color-ink:#1a1a1a;
  --color-main:#2c1a0e;    /* 古材黒 */
  --color-sub:#4a3728;     /* 墨茶 */
  --color-cta:#7c2d12;     /* 柿渋（最重要CTA） */
  --color-accent:#8b6914;  /* 金茶（補助） */
  --color-light:#f7f2e8;   /* 和紙 */
  --color-light2:#ede5d5;  /* 古紙（カード背景） */
  --color-border:#ddd5c5;
  --color-gray:#666;
  --font-serif:'Noto Serif JP','游明朝','YuMincho',serif;
  --font-sans:'Noto Sans JP','Yu Gothic',sans-serif;
  --max-w:1000px;
}
body{font-family:var(--font-sans);color:var(--color-ink);background:var(--color-light);line-height:1.9;}
a{color:inherit;text-decoration:none;}
.container{max-width:var(--max-w);margin:0 auto;padding:0 22px;}

/* header / hero */
.header{background:var(--color-main);padding:16px 22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.header__logo{font-family:var(--font-serif);color:#fff;font-size:1.05rem;letter-spacing:0.12em;}
.header__logo span{display:block;font-size:0.52rem;opacity:0.6;font-weight:300;letter-spacing:0.1em;margin-top:2px;}
.header__nav{display:flex;gap:16px;align-items:center;}
.header__back{color:rgba(255,255,255,0.75);font-size:0.78rem;}
.header__back:hover{color:#fff;}

.hero{background:var(--color-sub);color:#fff;padding:52px 22px 44px;text-align:center;}
.hero__label{font-size:0.66rem;letter-spacing:0.3em;color:rgba(255,255,255,0.5);margin-bottom:12px;}
.hero__title{font-family:var(--font-serif);font-size:clamp(1.5rem,5vw,2.1rem);font-weight:700;letter-spacing:0.08em;}
.hero__lead{max-width:680px;margin:18px auto 0;font-size:0.92rem;color:rgba(255,255,255,0.85);}

/* breadcrumb */
.crumb{font-size:0.78rem;color:var(--color-gray);padding:18px 0 0;}
.crumb a{color:var(--color-cta);}
.crumb span{margin:0 6px;color:var(--color-border);}

/* section */
.section{padding:34px 0 8px;}
.section__title{font-family:var(--font-serif);font-size:1.25rem;font-weight:700;color:var(--color-main);letter-spacing:0.06em;padding-bottom:10px;border-bottom:2px solid var(--color-main);margin-bottom:22px;}
.section__sub{font-family:var(--font-serif);font-size:1.02rem;color:var(--color-main);margin:22px 0 12px;}
.lead{font-size:0.92rem;color:#444;margin-bottom:18px;}

/* 三つの入り口カード（トップ） */
.entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px;}
.entry-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--color-border);border-radius:6px;padding:26px 22px;transition:box-shadow .2s,transform .15s,border-color .2s;}
a.entry-card:hover{box-shadow:0 6px 22px rgba(44,26,14,.1);border-color:var(--color-accent);transform:translateY(-2px);}
.entry-card__label{font-size:0.62rem;letter-spacing:0.24em;color:var(--color-accent);margin-bottom:10px;}
.entry-card__title{font-family:var(--font-serif);font-size:1.15rem;font-weight:700;color:var(--color-main);margin-bottom:10px;}
.entry-card__desc{font-size:0.84rem;color:var(--color-gray);line-height:1.8;flex:1;}
.entry-card__link{margin-top:16px;font-size:0.82rem;color:var(--color-cta);font-weight:500;}

/* 道標チップ（部門／モノ軸へのリンク群） */
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{background:#fff;border:1px solid var(--color-border);border-radius:24px;padding:9px 20px;font-size:0.86rem;color:var(--color-sub);transition:border-color .2s,color .2s;}
a.chip:hover{border-color:var(--color-accent);color:var(--color-main);}

/* 棚見出し（部門・カテゴリ） */
.shelf-head{font-family:var(--font-serif);font-size:1.05rem;color:#fff;background:var(--color-sub);border-radius:5px;padding:8px 16px;margin:28px 0 16px;letter-spacing:0.06em;}

/* 商品カード（一覧） */
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:8px;}
.product-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--color-border);border-radius:6px;padding:18px 18px;transition:box-shadow .2s,border-color .2s;}
a.product-card:hover{box-shadow:0 6px 22px rgba(44,26,14,.1);border-color:var(--color-accent);}
.product-card__img{margin:-18px -18px 14px;height:160px;background:#fbf9f4;border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.product-card__img img{max-width:100%;max-height:100%;object-fit:contain;}
.product-card__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:8px;}
.product-card__name{font-family:var(--font-serif);font-size:1.02rem;font-weight:700;color:var(--color-main);}
.product-card__price{font-size:0.98rem;font-weight:700;color:var(--color-cta);}
.product-card__attrs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.product-card__desc{font-size:0.84rem;color:#555;flex:1;}
.product-card__ctx{font-size:0.82rem;color:var(--color-sub);margin-top:10px;border-top:1px dashed var(--color-border);padding-top:10px;}

/* バッジ（position 等） */
.badge{display:inline-block;font-size:0.7rem;font-weight:700;border-radius:4px;padding:2px 10px;letter-spacing:0.04em;}
.badge--必需{background:#eef3ee;color:#2e6b3e;border:1px solid #cfe0d2;}
.badge--推奨{background:#f4efe0;color:#8b6914;border:1px solid #e2d6b0;}
.badge--憧れ{background:#f7ece4;color:var(--color-cta);border:1px solid #e6c9b6;}

/* 属性チップ（kind 等） */
.attr{font-size:0.72rem;background:var(--color-light2);border:1px solid var(--color-border);border-radius:4px;padding:3px 10px;color:var(--color-sub);}

/* 詳細ページ */
.detail{background:#fff;border:1px solid var(--color-border);border-radius:6px;padding:26px 24px;margin-bottom:20px;}
.detail__img{width:100%;max-width:360px;margin:0 auto 20px;background:#fbf9f4;border:1px solid var(--color-border);border-radius:6px;display:flex;align-items:center;justify-content:center;padding:16px;min-height:220px;}
.detail__img img{max-width:100%;max-height:300px;object-fit:contain;}
.detail__name{font-family:var(--font-serif);font-size:1.5rem;font-weight:700;color:var(--color-main);margin-bottom:6px;}
.detail__price{font-size:1.3rem;font-weight:700;color:var(--color-cta);margin-bottom:14px;}
.detail__desc{font-size:0.92rem;color:#444;margin-bottom:16px;}

/* 顔（文脈）ボックス：主役 */
.face{background:var(--color-light2);border:1px solid var(--color-border);border-left:5px solid var(--color-cta);border-radius:6px;padding:18px 20px;margin:8px 0 18px;}
.face__head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.face__from{font-size:0.76rem;color:var(--color-gray);}
.face__comment{font-family:var(--font-serif);font-size:1.02rem;color:var(--color-main);line-height:1.8;}

/* 他部門での顔（控えめ列挙） */
.other-faces{margin:6px 0 18px;}
.other-faces__title{font-size:0.8rem;color:var(--color-gray);margin-bottom:8px;}
.other-faces__item{font-size:0.84rem;color:var(--color-sub);padding:6px 0;border-top:1px dashed var(--color-border);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;}
.other-faces__dept{color:var(--color-main);font-weight:500;}

/* セット構成 */
.set-components{list-style:none;margin:10px 0 0;}
.set-components li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--color-border);font-size:0.88rem;}
.set-components li:last-child{border-bottom:1px solid var(--color-border);}
.set-components__name{color:var(--color-main);}
.set-components__price{color:var(--color-sub);white-space:nowrap;}
.price-summary{margin-top:16px;font-size:0.9rem;}
.price-summary__row{display:flex;justify-content:space-between;padding:6px 0;}
.price-summary__row--total{border-top:2px solid var(--color-main);margin-top:6px;padding-top:12px;font-weight:700;font-size:1.05rem;color:var(--color-cta);}
.price-summary__struck{color:var(--color-gray);text-decoration:line-through;}

/* カートに入れる（数量＋ボタン） */
.add-to-cart{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap;}
.add-to-cart__label{font-size:0.82rem;color:var(--color-sub);}
.add-to-cart__qty{width:64px;padding:10px;border:1px solid var(--color-border);border-radius:3px;font-size:1rem;text-align:center;}
.add-to-cart .btn{width:auto;flex:1;min-width:160px;}

/* カートページ */
.cart-list{list-style:none;margin:0 0 20px;}
.cart-list li{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 0;border-top:1px solid var(--color-border);}
.cart-list li:last-child{border-bottom:1px solid var(--color-border);}
.cart-item__name{flex:1 1 200px;color:var(--color-main);font-weight:500;}
.cart-item__price{color:var(--color-sub);white-space:nowrap;}
.cart-item__qty{width:56px;padding:8px;border:1px solid var(--color-border);border-radius:3px;text-align:center;}
.cart-item__line{width:90px;text-align:right;font-weight:700;color:var(--color-cta);}
.cart-item__remove{font-size:0.78rem;color:var(--color-gray);background:none;border:none;cursor:pointer;text-decoration:underline;padding:0;}

.checkout-form{background:#fff;border:1px solid var(--color-border);border-radius:6px;padding:24px;margin-top:24px;}
.checkout-form h2{margin-bottom:16px;}
.checkout-form .field{margin-bottom:16px;}
.checkout-form label{display:block;font-size:0.82rem;color:var(--color-sub);margin-bottom:6px;}
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form textarea{width:100%;padding:12px 14px;border:1px solid var(--color-border);border-radius:4px;font-size:0.95rem;font-family:var(--font-sans);}
.checkout-form input[readonly]{background:var(--color-light2);color:var(--color-gray);}
.checkout-form .radio-row{display:flex;gap:20px;flex-wrap:wrap;}
.checkout-form .radio-row label{display:flex;align-items:center;gap:6px;font-size:0.9rem;color:var(--color-ink);}
.checkout-form__honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-error{display:none;background:#f7e8e6;color:#a3372f;border:1px solid #e0bdb8;border-radius:4px;padding:10px 14px;font-size:0.82rem;margin-bottom:18px;}
.form-success{background:#eef3ee;color:#2e6b3e;border:1px solid #cfe0d2;border-radius:4px;padding:16px 18px;font-size:0.9rem;}

/* ボタン */
.btn{display:inline-block;padding:15px 36px;border-radius:3px;font-size:0.92rem;font-weight:700;letter-spacing:0.06em;cursor:pointer;border:none;text-align:center;}
.btn--cta{background:var(--color-cta);color:#fff;}
.btn--cta:hover{background:#6a2510;}
.btn--block{display:block;width:100%;}
.btn--ghost{background:#fff;border:1px solid var(--color-border);color:var(--color-sub);}
.btn--ghost:hover{border-color:var(--color-accent);color:var(--color-main);}
.btn-note{font-size:0.76rem;color:var(--color-gray);margin-top:10px;text-align:center;}

/* ログイン */
.login-wrap{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:40px 20px;}
.login-card{width:100%;max-width:420px;background:#fff;border:1px solid var(--color-border);border-radius:8px;padding:40px 28px;text-align:center;box-shadow:0 8px 40px rgba(44,26,14,0.08);}
.login-card__label{font-size:0.65rem;letter-spacing:0.28em;color:var(--color-gray);margin-bottom:10px;}
.login-card__title{font-family:var(--font-serif);font-size:1.4rem;font-weight:700;color:var(--color-main);letter-spacing:0.08em;margin-bottom:14px;}
.login-card__desc{font-size:0.9rem;color:#444;margin-bottom:24px;text-align:left;}
.login-card label{display:block;text-align:left;font-size:0.82rem;color:var(--color-sub);margin-bottom:6px;}
.login-card input[type="email"]{width:100%;padding:12px 14px;border:1px solid var(--color-border);border-radius:4px;font-size:1rem;font-family:var(--font-sans);}
.login-card .btn{margin-top:16px;}
.login-error{display:none;background:#f7e8e6;color:#a3372f;border:1px solid #e0bdb8;border-radius:4px;padding:10px 14px;font-size:0.82rem;margin-bottom:18px;text-align:left;}
.login-notes{margin-top:24px;text-align:left;font-size:0.78rem;color:var(--color-gray);display:flex;flex-direction:column;gap:8px;}
.login-notes li{list-style:none;padding-left:1.2em;position:relative;}
.login-notes li::before{content:'・';position:absolute;left:0;}

/* 状態表示 */
.state{padding:40px 0;text-align:center;color:var(--color-gray);font-size:0.9rem;}

/* footer */
.footer{background:var(--color-main);color:rgba(255,255,255,0.55);text-align:center;font-size:0.74rem;padding:30px 20px;letter-spacing:0.06em;margin-top:48px;}
.footer a{color:rgba(255,255,255,0.78);text-decoration:underline;margin:0 8px;}

@media(max-width:760px){
  .entry-grid,.product-grid{grid-template-columns:1fr;}
}