/* ── 리셋 & 기본 ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font-body:    'Pretendard', -apple-system, sans-serif;
  --font-serif:   'Noto Serif KR', serif;

  /* 원외탕전원 (기본) - 딥그린 계열 */
  --c-primary:    #1a4a3a;
  --c-primary-h:  #0f3028;
  --c-accent:     #c8a96e;
  --c-accent-h:   #b5944e;
  --c-bg:         #f7f5f0;
  --c-surface:    #ffffff;
  --c-border:     #e2ddd5;
  --c-text:       #1e1e1e;
  --c-text-sub:   #6b6b6b;
  --c-text-hint:  #9e9e9e;

  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.12);
  --transition:   .18s ease;
}

/* 닥터이앤유 테마 - 딥네이비 계열 */
.platform-doctorenu {
  --c-primary:    #1a2f5a;
  --c-primary-h:  #0f1f40;
  --c-accent:     #4a90d9;
  --c-accent-h:   #2d74c4;
  --c-bg:         #f4f6fb;
}

body {
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── 헤더 ───────────────────────────────────────── */
.site-header {
  background: var(--c-primary);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: .6rem;
}

.logo-kr, .logo-en {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: .02em;
}

.logo-sub {
  font-size: .75rem;
  color: var(--c-accent);
  letter-spacing: .04em;
  font-weight: 400;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.nav-name {
  color: rgba(255,255,255,.7);
  font-size: .85rem;
}

.nav-link {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .9rem;
  transition: color var(--transition);
}
.nav-link:hover { color: var(--c-accent); }

.nav-btn {
  background: var(--c-accent);
  color: var(--c-primary);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  padding: .45rem 1.1rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.nav-btn:hover { background: var(--c-accent-h); }

/* ── 메인 ───────────────────────────────────────── */
.site-main {
  flex: 1;
  padding: 2rem 1rem;
}

/* ── 푸터 ───────────────────────────────────────── */
.site-footer {
  background: var(--c-primary);
  color: rgba(255,255,255,.55);
  padding: 2rem;
  text-align: center;
  font-size: .8rem;
  line-height: 1.8;
}

/* ── 플래시 메시지 ─────────────────────────────── */
.flash-wrap {
  max-width: 560px;
  margin: 0 auto 1.5rem;
}

.flash {
  padding: .8rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  margin-bottom: .5rem;
}

.flash-success { background: #eaf5ee; color: #1a6b35; border-left: 3px solid #2e9c54; }
.flash-error   { background: #fdecea; color: #8b1a1a; border-left: 3px solid #d63b3b; }
.flash-warning { background: #fef6e4; color: #7a4f00; border-left: 3px solid #e5a800; }

/* ── 인증 페이지 ───────────────────────────────── */
.auth-wrap {
  max-width: 480px;
  margin: 2rem auto;
}

.auth-wrap-wide { max-width: 680px; }

.auth-card {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2.5rem 2rem;
  border: 1px solid var(--c-border);
}

.auth-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--c-border);
}

.auth-header h1 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--c-primary);
  margin-bottom: .4rem;
}

.auth-header p {
  font-size: .875rem;
  color: var(--c-text-sub);
}

.auth-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: .875rem;
  color: var(--c-text-sub);
}

.auth-footer a {
  color: var(--c-primary);
  font-weight: 500;
  text-decoration: none;
}
.auth-footer a:hover { text-decoration: underline; }

/* ── 폼 ────────────────────────────────────────── */
.auth-form { display: flex; flex-direction: column; gap: 1.1rem; }

.form-section-title {
  font-size: .75rem;
  font-weight: 600;
  color: var(--c-text-hint);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-top: .5rem;
  border-top: 1px solid var(--c-border);
  margin-top: .3rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.form-group label {
  font-size: .825rem;
  font-weight: 500;
  color: var(--c-text);
}

.req { color: var(--c-accent); }

.form-group input,
.form-group select {
  padding: .7rem .9rem;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--c-text);
  background: var(--c-surface);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(26,74,58,.1);
}

.form-group input::placeholder { color: var(--c-text-hint); }

/* ── 버튼 ───────────────────────────────────────── */
.btn-primary {
  background: var(--c-primary);
  color: #fff;
  border: none;
  padding: .85rem 1.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  letter-spacing: .02em;
}
.btn-primary:hover {
  background: var(--c-primary-h);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-full { width: 100%; }

.btn-secondary {
  background: transparent;
  color: var(--c-primary);
  border: 1.5px solid var(--c-primary);
  padding: .75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  display: inline-block;
}
.btn-secondary:hover {
  background: var(--c-primary);
  color: #fff;
}

/* ── 안내박스 ───────────────────────────────────── */
.notice-box {
  background: #f0f4f2;
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .9rem 1.1rem;
  font-size: .85rem;
  color: var(--c-text-sub);
  line-height: 1.7;
}

.platform-doctorenu .notice-box { background: #f0f3f9; }

/* ── 상품 카드 ─────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.product-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  cursor: pointer;
}
.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: var(--c-bg);
}

.product-card-body { padding: 1.1rem; }

.product-card-type {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--c-accent);
  text-transform: uppercase;
  margin-bottom: .3rem;
}

.product-card-name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: .5rem;
}

.product-card-price {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-primary);
}

.product-card-price.locked {
  font-size: .85rem;
  color: var(--c-text-hint);
  font-weight: 400;
}

/* ── 관리자 테이블 ─────────────────────────────── */
.admin-table-wrap { overflow-x: auto; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.admin-table th {
  background: var(--c-primary);
  color: rgba(255,255,255,.9);
  padding: .75rem 1rem;
  text-align: left;
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .03em;
}

.admin-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}

.admin-table tr:hover td { background: var(--c-bg); }

/* 뱃지 */
.badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
}
.badge-pending  { background: #fef6e4; color: #7a4f00; }
.badge-approved { background: #eaf5ee; color: #1a6b35; }
.badge-rejected { background: #fdecea; color: #8b1a1a; }
.badge-general  { background: #f0f0f0; color: #555; }
.badge-academy  { background: #e8f0fe; color: #1a3a8a; }
.badge-fellow   { background: #fef0e0; color: #7a4000; }

/* ── 반응형 ─────────────────────────────────────── */
@media (max-width: 600px) {
  .header-inner { padding: 0 1rem; }
  .auth-card    { padding: 1.8rem 1.2rem; }
  .form-row     { grid-template-columns: 1fr; }
  .auth-wrap-wide { max-width: 100%; }
}

/* ── 스토어 공통 ─────────────────────────────── */
.store-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.store-hero {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 2rem;
}

.store-hero h1 {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--c-primary);
  margin-bottom: .4rem;
}

.store-hero p { color: var(--c-text-sub); }

.page-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--c-primary);
  margin-bottom: 1.5rem;
}

/* 로그인 안내 */
.login-notice {
  background: #eaf5ee;
  border: 1px solid #c3dfc9;
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  font-size: .9rem;
  color: #1a5a30;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.login-notice a { color: var(--c-primary); font-weight: 600; }
.login-notice-warning { background: #fef6e4; border-color: #f5d87a; color: #7a4f00; }

/* 상품 섹션 */
.product-section { margin-bottom: 3rem; }

.product-section-header {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.2rem;
  padding-bottom: .8rem;
  border-bottom: 2px solid var(--c-border);
}

.product-section-header h2 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--c-primary);
}

.section-badge {
  font-size: .7rem;
  font-weight: 600;
  padding: .2rem .7rem;
  border-radius: 20px;
  letter-spacing: .03em;
}
.section-badge-taxfree { background: #e8f0fe; color: #1a3a8a; }
.section-badge-taxable { background: #fef6e4; color: #7a4f00; }

/* 상품 카드 */
.product-card { text-decoration: none; color: inherit; }

.product-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--c-bg);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.product-card-img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

.product-card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--c-bg) 0%, #e8e4dc 100%);
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--c-primary);
  font-weight: 600;
}

.product-badge-grade {
  position: absolute;
  top: .6rem; right: .6rem;
  background: var(--c-primary);
  color: #fff;
  font-size: .65rem;
  font-weight: 600;
  padding: .2rem .5rem;
  border-radius: 4px;
  letter-spacing: .03em;
}

/* 상품 상세 */
.detail-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
}

.breadcrumb {
  display: flex;
  gap: .5rem;
  align-items: center;
  font-size: .82rem;
  color: var(--c-text-hint);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--c-text-sub); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-primary); }

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.detail-img-wrap { border-radius: var(--radius-lg); overflow: hidden; }
.detail-img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }

.detail-img-placeholder {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
  font-family: var(--font-serif);
  font-size: 3rem;
  color: var(--c-primary);
  border-radius: var(--radius-lg);
}

.detail-type {
  font-size: .75rem;
  color: var(--c-accent);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.detail-name {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--c-primary);
  margin-bottom: .8rem;
}

.detail-desc {
  color: var(--c-text-sub);
  font-size: .9rem;
  line-height: 1.7;
  margin-bottom: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--c-border);
}

/* 가격 테이블 */
.price-table-wrap { margin-bottom: 1.2rem; }
.price-table-title {
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-text-hint);
  letter-spacing: .06em;
  margin-bottom: .5rem;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.price-table th {
  background: var(--c-bg);
  padding: .5rem .8rem;
  text-align: left;
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-text-sub);
}
.price-table td {
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--c-border);
}
.price-val { font-weight: 600; color: var(--c-primary); }

.locked-notice {
  background: var(--c-bg);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  font-size: .9rem;
  color: var(--c-text-sub);
  border: 1px solid var(--c-border);
}

/* 수량 컨트롤 */
.qty-wrap { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.qty-wrap label { font-size: .9rem; font-weight: 500; }

.qty-control {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qty-control button {
  background: var(--c-bg);
  border: none;
  padding: .5rem .9rem;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--c-text);
  transition: background var(--transition);
}
.qty-control button:hover { background: var(--c-border); }
.qty-control input {
  border: none;
  border-left: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
  width: 56px;
  text-align: center;
  font-size: .95rem;
  padding: .5rem 0;
  outline: none;
}

/* 장바구니 */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  align-items: start;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  margin-bottom: .8rem;
}

.cart-item-name { font-weight: 500; margin-bottom: .2rem; }
.cart-item-price { font-size: .85rem; color: var(--c-text-sub); }

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.qty-inline {
  display: flex;
  align-items: center;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qty-inline button {
  background: var(--c-bg);
  border: none;
  padding: .35rem .7rem;
  cursor: pointer;
  font-size: 1rem;
}
.cart-qty-input {
  border: none;
  border-left: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
  width: 46px;
  text-align: center;
  font-size: .875rem;
  padding: .35rem 0;
}

.cart-item-subtotal { font-weight: 600; color: var(--c-primary); min-width: 80px; text-align: right; }

.cart-remove-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--c-text-hint);
  cursor: pointer;
  padding: .2rem .4rem;
}
.cart-remove-btn:hover { color: #d63b3b; }

.cart-summary {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  position: sticky;
  top: 80px;
}
.summary-title { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
.summary-row { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: .5rem; color: var(--c-text-sub); }
.summary-total { display: flex; justify-content: space-between; font-size: 1.05rem; font-weight: 600; color: var(--c-primary); padding-top: .8rem; border-top: 1px solid var(--c-border); margin-top: .5rem; }

.empty-cart { text-align: center; padding: 4rem 0; color: var(--c-text-hint); }
.empty-cart p { margin-bottom: 1rem; }

/* 마이페이지 */
.mypage-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; align-items: start; }
.mypage-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 1.3rem; }
.mypage-card-title { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: var(--c-primary); }
.mypage-info-row { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--c-border); font-size: .875rem; }
.mypage-info-row:last-child { border-bottom: none; }
.mypage-info-row span { color: var(--c-text-sub); }
.mypage-orders { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 1.3rem;grid-column: 1 / -1;}

@media (max-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .product-card-body { padding: .8rem; }
  .product-card-name { font-size: .95rem; }
  .product-card-img { height: 140px; }
  .detail-layout  { grid-template-columns: 1fr; }
  .cart-layout    { grid-template-columns: 1fr; }
  .mypage-layout  { grid-template-columns: 1fr; }
}

/* ── 결제 페이지 ──────────────────────── */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  align-items: start;
}
.checkout-section { background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-md);padding:1.2rem; }
.checkout-section-title { font-size:.9rem;font-weight:600;color:var(--c-primary);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem; }

/* 결제완료 */
.done-card { background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:2.5rem 2rem;text-align:center;margin-top:2rem; }
.done-icon { width:64px;height:64px;background:var(--c-primary);color:#fff;border-radius:50%;font-size:2rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem; }
.done-card h1 { font-family:var(--font-serif);font-size:1.6rem;color:var(--c-primary);margin-bottom:.4rem; }
.done-card p { color:var(--c-text-sub);margin-bottom:1.5rem; }
.done-info { background:var(--c-bg);border-radius:var(--radius-sm);padding:1rem;text-align:left; }
.done-info-row { display:flex;justify-content:space-between;padding:.45rem 0;border-bottom:1px solid var(--c-border);font-size:.875rem; }
.done-info-row:last-child { border-bottom:none; }
.done-info-row span { color:var(--c-text-sub); }

@media(max-width:768px){.checkout-layout{grid-template-columns:1fr;}}

/* ── 카트 섹션 분리 ─────────────────────── */
.cart-section {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cart-section-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1rem;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}
.cart-section-title { font-weight: 600; font-size: .95rem; color: var(--c-primary); }
.cart-item { padding: .8rem 1rem; border-bottom: 1px solid var(--c-border); display:flex;justify-content:space-between;align-items:center; }
.cart-item:last-of-type { border-bottom: none; }
.cart-section-total {
  display: flex;
  justify-content: space-between;
  padding: .7rem 1rem;
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  font-size: .9rem;
}
.cart-section-total strong { color: var(--c-primary); }

/* 결제 요약 섹션 */
.summary-section { padding: .5rem 0; }
.summary-section-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--c-text-hint);
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.summary-sub-total {
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-primary);
  padding-top: .4rem;
  border-top: 1px dashed var(--c-border);
  margin-top: .3rem;
}
.cart-divider {
  height: 1px;
  background: var(--c-border);
  margin: 1rem 0;
}
.cart-receipt-note {
  font-size: .72rem;
  color: var(--c-text-hint);
  text-align: center;
  margin-top: .3rem;
}

/* ── 블로그 ─────────────────────────────────── */
.blog-header { text-align:center; padding:2rem 0 1.5rem; border-bottom:1px solid var(--c-border); margin-bottom:1.5rem; }
.blog-cats { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.blog-cat-btn { padding:.35rem .9rem; border-radius:20px; font-size:.82rem; font-weight:500; color:var(--c-text-sub); text-decoration:none; border:1px solid var(--c-border); background:#fff; transition:all .2s; }
.blog-cat-btn:hover, .blog-cat-btn.active { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
.blog-card { text-decoration:none; color:inherit; border:1px solid var(--c-border); border-radius:var(--radius-md); overflow:hidden; background:#fff; transition:box-shadow .2s,transform .2s; }
.blog-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.blog-card-img { width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--c-bg); }
.blog-card-img-placeholder { display:flex; align-items:center; justify-content:center; font-size:.85rem; color:var(--c-text-hint); }
.blog-card-body { padding:1.1rem; }
.blog-card-cat { font-size:.7rem; font-weight:600; letter-spacing:.06em; color:var(--c-accent); text-transform:uppercase; margin-bottom:.4rem; }
.blog-card-title { font-family:var(--font-serif); font-size:1rem; font-weight:600; line-height:1.4; margin-bottom:.5rem; color:var(--c-text); }
.blog-card-summary { font-size:.83rem; color:var(--c-text-sub); line-height:1.6; margin-bottom:.6rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.blog-card-meta { font-size:.75rem; color:var(--c-text-hint); font-family:var(--font-sans); }
.blog-pagination { display:flex; justify-content:center; align-items:center; gap:1rem; margin-top:2rem; }
.blog-post-header { padding:2rem 0 1.5rem; border-bottom:1px solid var(--c-border); margin-bottom:2rem; }
.blog-post-title { font-family:var(--font-serif); font-size:clamp(1.5rem,3vw,2.2rem); font-weight:700; line-height:1.3; margin:.5rem 0; color:var(--c-text); }
.blog-post-meta { font-size:.82rem; color:var(--c-text-hint); font-family:var(--font-sans); margin-top:.5rem; }
.blog-tags { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.8rem; }
.blog-tag { font-size:.72rem; background:var(--c-bg); color:var(--c-text-sub); padding:.2rem .6rem; border-radius:20px; border:1px solid var(--c-border); }
.blog-post-content { font-size:1rem; line-height:1.9; color:var(--c-text); }
.blog-post-content h2 { font-family:var(--font-serif); font-size:1.4rem; margin:2rem 0 .8rem; color:var(--c-primary); }
.blog-post-content h3 { font-size:1.1rem; margin:1.5rem 0 .6rem; color:var(--c-primary); }
.blog-post-content p { margin-bottom:1em; }
.blog-post-content strong { color:var(--c-primary); }
.blog-related { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--c-border); }
.blog-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.blog-related-card { text-decoration:none; color:inherit; border:1px solid var(--c-border); padding:1rem; background:#fff; border-radius:var(--radius-sm); transition:box-shadow .2s; }
.blog-related-card:hover { box-shadow:var(--shadow-sm); }
.blog-related-title { font-size:.9rem; font-weight:600; color:var(--c-text); margin:.3rem 0 .5rem; line-height:1.4; }
@media(max-width:600px) { .blog-related-grid { grid-template-columns:1fr; } }