/* 酒蔵のページ。共通の部品は guide.css。ここでは差し色の藍と、銘柄・商品・盃のレア度など酒蔵だけのもの */
:root { --gd-accent: #1f3a5f; --gd-accent-deep: #14263f; --gd-accent-soft: #eaeff5; }
.sk, .gd-card {
  --ai: #1f3a5f;
  --ai-deep: #14263f;
  --sumi: #1f2530;
  --kin: #b08d57;
  --shu: #b8342a;
  --washi: #f7f6f2;
  --paper: #fbfaf5;
  --line: #e7e5df;
  --muted: #868d98;
}
.sk-brands { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 0; }
.sk-brand-tag { padding: 0 8px; font-size: 12px; font-weight: 500; line-height: 1.75; color: var(--ai); background: #eaeff5; border-radius: 4px; }
.sk-none { margin: 0; font-size: 12px; color: var(--muted); }
.sk-items a, .sk-rakuten, .sk-rice, .sk-line-meta a { color: inherit; text-decoration: none; }

/* 盃のレア度 */
.sk-cups { display: inline-flex; gap: 3px; vertical-align: middle; }
.sk-cup { width: 14px; height: 9px; border-radius: 0 0 8px 8px; border: 1.5px solid var(--kin); border-top-width: 2px; }
.sk-cup.on { background: radial-gradient(ellipse at 50% 0, #fff6d8 0 35%, var(--kin) 36%); }
.sk-rarity { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.sk-rarity b { font-weight: 700; color: var(--sumi); margin-left: 4px; }

/* 銘柄: 酒ラベル(縦書きの銘柄名) */
.sk-labels { display: grid; gap: 20px; }
.sk-brand { display: grid; grid-template-columns: 84px minmax(0, 1fr); overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.sk-brand-name { position: relative; display: flex; justify-content: center; padding: 20px 0 40px; background: var(--paper); border-right: 1px solid var(--line); color: var(--sumi); }
.sk-brand-name h3 { margin: 0; writing-mode: vertical-rl; font-family: var(--gd-mincho); font-size: 26px; font-weight: 800; letter-spacing: .18em; line-height: 1.1; }
.sk-brand-name .sk-auto { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); writing-mode: horizontal-tb; font-size: 10px; padding: 1px 5px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 4px; white-space: nowrap; cursor: help; }
.sk-brand-body { padding: 16px 20px 18px; }
.sk-brand-rarity { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; font-size: 14px; }
.sk-brand-rarity .sk-cup { width: 18px; height: 11px; }
.sk-brand-rarity strong { font-family: var(--gd-mincho); font-size: 17px; }
.sk-brand-rarity small { color: var(--muted); font-size: 12px; }
.sk-specs { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 6px 12px; margin: 0 0 12px; font-size: 14px; }
.sk-specs dt { color: var(--muted); }
.sk-specs dd { margin: 0; }
.sk-type { display: inline-block; margin: 0 6px 6px 0; padding: 1px 9px; font-size: 12px; color: #6b5430; background: #f8f3e7; border-radius: 4px; }
.sk-items { display: grid; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.sk-items a { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 2px 10px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.sk-items a:hover { border-color: var(--ai); }
.sk-items img { grid-row: 1 / 3; width: 60px; height: 60px; object-fit: contain; background: #fff; }
.sk-items .n { font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sk-items .p { font-size: 13px; font-weight: 800; color: #bf0000; }
.sk-rakuten { display: inline-block; padding: 7px 16px; font-size: 13px; font-weight: 700; color: #bf0000 !important; border: 1px solid #bf0000; background: #fff; border-radius: 999px; }
.sk-note { margin-top: 18px; padding: 14px 18px; font-size: 12px; line-height: 1.8; color: var(--muted); background: var(--gd-soft); border-radius: 8px; }
.sk-note b { color: var(--sumi); }

/* 酒米 */
.sk-rice-line { margin: 4px 0 0; font-size: 11px; color: #5b6b3a; letter-spacing: .05em; }
.sk-rice { display: inline-block; margin: 0 6px 6px 0; padding: 1px 9px 1px 22px; font-size: 12px; color: #4d5e2c !important; border-radius: 4px; background: #f1f4e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cellipse cx='7' cy='7' rx='3.2' ry='5.5' fill='%23e9e2c8' stroke='%239a8b5a'/%3E%3C/svg%3E") no-repeat 5px center; }
.sk-rice:hover { background-color: #e8edd6; }

/* 銘柄と商品: 銘柄ごとの暖簾+商品の行(開くと詳細) */
.gd-heading h2 small { margin-left: 10px; font-size: 14px; color: var(--muted); letter-spacing: .05em; }
.sk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.sk-chip { padding: 5px 14px; font: inherit; font-size: 13px; color: var(--sumi); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.sk-chip small { margin-left: 5px; color: var(--muted); font-size: 11px; }
.sk-chip:hover { border-color: var(--ai); }
.sk-chip.is-on { color: #fff; background: var(--ai); border-color: var(--ai); }
.sk-chip.is-on small { color: rgba(255,255,255,.75); }
.sk-chip--shu { color: var(--shu); border-color: rgba(184,52,42,.4); }
.sk-chip--shu.is-on { background: var(--shu); border-color: var(--shu); }
.sk-chips-empty { padding: 24px; text-align: center; color: var(--muted); }

.sk-lines { display: grid; gap: 18px; }
.sk-line[hidden] { display: none; }
.sk-line { display: grid; grid-template-columns: 76px minmax(0, 1fr); overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.sk-line-name { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0; background: var(--paper); border-right: 1px solid var(--line); color: var(--sumi); }
.sk-line-name h3 { margin: 0; writing-mode: vertical-rl; font-family: var(--gd-mincho); font-size: 24px; font-weight: 800; letter-spacing: .16em; line-height: 1.1; }
.sk-line-count { font-size: 11px; color: var(--muted); }
.sk-line-body { min-width: 0; padding: 6px 0 4px; }
.sk-line-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 16px 4px; font-size: 12px; color: var(--muted); }
.sk-line-meta .sk-cup { width: 14px; height: 9px; }
.sk-line-meta a { color: #bf0000 !important; }

.sk-rows { margin: 0; padding: 0; list-style: none; }
.sk-row + .sk-row { border-top: 1px solid var(--line); }
.sk-row summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 84px; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; list-style: none; }
.sk-row summary::-webkit-details-marker { display: none; }
.sk-row summary:hover { background: var(--paper); }
.sk-row details[open] > summary { background: var(--paper); }
/* 商品の瓶のサムネイル */
.sk-row-thumb { display: flex; justify-content: center; width: 34px; height: 64px; }
.sk-row-thumb img { width: 34px; height: 64px; object-fit: contain; }
.sk-bottle { width: 18px; height: 56px; margin-top: 4px; }
.sk-bottle path { fill: var(--sumi); }
.sk-bottle rect { fill: #f4efe3; }
.sk-bottle--kin path { fill: var(--kin); }
.sk-bottle--sora path { fill: #3f7fa8; }
.sk-bottle--ai path { fill: var(--ai); }
.sk-bottle--cha path { fill: #7a5232; }
.sk-bottle--snow path { fill: #e7e2d6; stroke: #b9b1a0; stroke-width: 1; }
.sk-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sk-row-name { font-family: var(--gd-mincho); font-size: 16px; font-weight: 700; line-height: 1.4; }
.sk-row-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.sk-row-tags .sk-type, .sk-row-tags .sk-limited { margin: 0; font-size: 11px; padding: 0 7px; }
.sk-limited { display: inline-block; margin: 0 6px 6px 0; padding: 1px 9px; font-size: 12px; color: #fff; background: var(--shu); border-radius: 4px; }
.sk-row-price { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.sk-row-price b { font-size: 17px; letter-spacing: .02em; }
.sk-row-price b small { margin-left: 1px; font-size: 11px; font-weight: 400; }
.sk-row-price span { font-size: 11px; color: var(--muted); }
.sk-row-noprice { font-size: 11px; color: var(--muted); }
.sk-row-rarity { display: flex; justify-content: flex-end; }
.sk-row-rarity .sk-cup { width: 13px; height: 8px; }
.sk-row-detail { padding: 4px 16px 16px 62px; }
.sk-row-desc { margin: 0 0 10px; font-size: 14px; line-height: 1.8; }
.sk-row-detail .sk-specs { margin-bottom: 12px; font-size: 13px; grid-template-columns: 5.5em minmax(0, 1fr); }
.sk-price { display: inline-block; margin-right: 14px; }
.sk-reasons { display: block; color: var(--muted); font-size: 11px; }
.sk-row-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sk-row-links .gd-btn { padding: 6px 14px; font-size: 12px; letter-spacing: .05em; }
.gd-btn--rakuten, .gd-btn--rakuten:hover { background: #fff; color: #bf0000; border: 1px solid #bf0000; }
.gd-btn--rakuten:hover { background: #fdf0f0; }

@media (max-width: 600px) {
  .sk-brand { grid-template-columns: 64px minmax(0, 1fr); }
  .sk-brand-name h3 { font-size: 22px; }
  .sk-brand-body { padding: 14px 14px 16px; }
  .sk-line { grid-template-columns: 1fr; }
  .sk-line-name { flex-direction: row; justify-content: space-between; padding: 8px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sk-line-name h3 { writing-mode: horizontal-tb; font-size: 20px; letter-spacing: .08em; }
  .sk-row summary { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
  .sk-row-thumb, .sk-row-thumb img { width: 28px; height: 54px; }
  .sk-row-rarity { grid-column: 2 / 4; justify-content: flex-start; margin-top: -4px; }
  .sk-row-name { font-size: 15px; }
  .sk-row-detail { padding: 4px 12px 14px; }
}