/* JAPAN BONSAI EDIT — study.css
   合わせのスタディ(記事・紙面) / Tree and Pot Match(トップ・暗部) / 実商品の列 */

/* ---------- スタディ:舞台 ---------- */
.pairing-study { margin: 0; }
.study-stage { position: relative; margin: 42px 0 calc(13% + 10px); }
.study-stage img { width: 100%; height: auto; display: block; }
.study-pot { position: absolute; left: var(--cx, 60%); top: var(--rim, 95%); width: var(--w, 55%); transform: translate(-50%, -20.4%); pointer-events: none; }
.study-pot svg { width: 100%; height: auto; display: block; }
.study-plate { margin: 6px 0 0; display: flex; justify-content: space-between; gap: 18px; color: var(--ink-dim, #6d6f68); font-size: 8px; letter-spacing: .16em; }

/* ---------- スタディ:実商品の合成図 ---------- */
.pair-figure { margin: 42px 0 0; background: #050706; }
.pair-figure img { width: 100%; height: auto; display: block; }
.pair-figure figcaption { display: flex; justify-content: space-between; gap: 18px; padding: 10px 2px 0; color: #6d6f68; font-size: 8px; letter-spacing: .16em; }
.study-options button small { display: block; margin-top: 5px; font-family: var(--sans, sans-serif); font-size: 9px; letter-spacing: .1em; color: #8a8c83; }
.study-verdict .good-link { margin-top: 22px; }
.good-photo { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 0 20px; }

/* ---------- スタディ:操作 ---------- */
.study-controls { margin: 26px 0 0; display: grid; gap: 20px; }
.study-controls > div { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: baseline; padding: 14px 0 16px; border-top: 1px solid rgba(23,26,23,.22); }
.study-controls > div > span { color: #6d6f68; font-size: 8px; letter-spacing: .2em; }
.study-options { display: flex; gap: 20px; flex-wrap: wrap; }
.study-options button { padding: 0 0 7px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: #6d6f68; font: 15px var(--serif, serif); cursor: pointer; }
.study-options button:hover { color: #171a17; }
.study-options button.active { color: #171a17; border-color: #171a17; }
.study-options button .chip { display: inline-block; width: 11px; height: 11px; margin-right: 8px; border-radius: 50%; vertical-align: baseline; border: 1px solid rgba(23,26,23,.35); }

/* ---------- スタディ:判定 ---------- */
.study-verdict { margin: 30px 0 0; padding: 28px 0 6px; border-top: 1px solid rgba(23,26,23,.22); }
.verdict-head { display: grid; grid-template-columns: 74px 1fr; gap: 22px; align-items: start; }
.verdict-grade { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid rgba(23,26,23,.4); border-radius: 50%; font: 400 30px/1 var(--serif, serif); color: #171a17; }
.verdict-grade[data-grade="×"], .verdict-grade[data-grade="△"] { color: #6d6f68; border-style: dashed; }
.verdict-combo { margin: 0 0 8px; color: #6d6f68; font-size: 9px; letter-spacing: .18em; }
.verdict-combo small { margin-left: 14px; font-size: 8px; letter-spacing: .14em; color: #8a8c83; }
.study-verdict h3 { margin: 0; font: 400 26px/1.25 var(--serif, serif); letter-spacing: -.01em; color: #171a17; }
.study-verdict ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.study-verdict li { display: grid; grid-template-columns: 58px 1fr; gap: 16px; color: #3a3d38; font: 14px/1.75 var(--serif, serif); }
.study-verdict li span { padding-top: 3px; color: #8a8c83; font-family: var(--sans, sans-serif); font-size: 8px; letter-spacing: .18em; }

/* ---------- 実商品の列(章構成・静かな一列) ---------- */
.goods-note { margin: 0 0 6px; color: #6d6f68; font-size: 9px; letter-spacing: .14em; }
.goods { margin: 34px 0 0; border-top: 1px solid rgba(23,26,23,.3); }
.good { padding: 40px 0 44px; border-bottom: 1px solid rgba(23,26,23,.18); display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; }
.good-main .tier-label { margin: 0 0 14px; color: #6d6f68; font-size: 8px; letter-spacing: .22em; text-transform: uppercase; }
.good-main h3 { margin: 0 0 4px; font: 400 27px/1.3 var(--serif, serif); letter-spacing: -.015em; }
.good-main .good-en { margin: 0 0 18px; color: #8a8c83; font-size: 11px; letter-spacing: .04em; }
.good-main .good-why { margin: 0; color: #3a3d38; font: 15px/1.85 var(--serif, serif); }
.good-main .good-why strong { font-weight: 600; }
.good-chips { margin: 18px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.good-chips span { padding: 6px 12px; border: 1px solid rgba(23,26,23,.28); color: #4a4d46; font-size: 9px; letter-spacing: .12em; }
.good-spec { align-self: start; }
.good-spec dl { margin: 0; border-top: 1px solid rgba(23,26,23,.22); }
.good-spec dl div { display: grid; grid-template-columns: 86px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(23,26,23,.12); font-size: 12px; }
.good-spec dt { color: #8a8c83; font-size: 8px; letter-spacing: .16em; padding-top: 3px; }
.good-spec dd { margin: 0; color: #2e312c; }
.good-price { margin: 16px 0 0; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.good-price strong { font: 400 26px var(--serif, serif); letter-spacing: -.01em; }
.good-price small { color: #8a8c83; font-size: 9px; letter-spacing: .1em; }
.good-link { display: inline-block; margin-top: 14px; padding-bottom: 6px; border-bottom: 1px solid rgba(23,26,23,.5); color: #171a17; font-size: 9px; letter-spacing: .18em; }
.good-alt { margin: 14px 0 0; color: #6d6f68; font: 13px/1.8 var(--serif, serif); }
.good-alt a { border-bottom: 1px solid rgba(23,26,23,.3); }

/* ---------- 釉薬の方向(釉面タイル) ---------- */
.glaze-directions { margin: 44px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 60px 44px; }
.glaze-directions article { display: flex; flex-direction: column; }
.dir-tile { position: relative; margin: 0; overflow: hidden; background: #171a17; }
.dir-tile img { width: 100%; height: auto; display: block; transition: transform 2.6s cubic-bezier(.2, .65, .2, 1); }
.glaze-directions article:hover .dir-tile img { transform: scale(1.045); }
.dir-tile figcaption { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 18px 14px; background: linear-gradient(transparent, rgba(5, 7, 6, .58)); color: #e9e9e2; font-size: 8px; letter-spacing: .22em; }
.dir-tile .dir-name { font: 400 16px var(--serif, serif); letter-spacing: .08em; }
.dir-season { border: 1px solid rgba(233, 233, 226, .55); padding: 5px 11px; font: 11px var(--serif, serif); letter-spacing: .14em; white-space: nowrap; }
.glaze-directions h3 { margin: 22px 0 10px; font: 400 24px/1.3 var(--serif, serif); letter-spacing: -.01em; }
.glaze-directions article > p { margin: 0; color: #3a3d38; font: 14px/1.85 var(--serif, serif); }
@media (max-width: 760px) { .glaze-directions { grid-template-columns: 1fr; gap: 46px; } }

/* ---------- 飾りの一式(役割 × 二つの道) ---------- */
.ensemble-lead { margin: 26px 0 0; color: #3a3d38; font: 15px/1.9 var(--serif, serif); }
.ensemble-rules { margin: 30px 0 0; padding: 22px 0 6px; border-top: 1px solid rgba(23,26,23,.3); display: grid; grid-template-columns: 118px 1fr; gap: 18px; }
.ensemble-rules > span { color: #6d6f68; font-size: 8px; letter-spacing: .2em; padding-top: 4px; }
.ensemble-rules ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: #3a3d38; font: 13.5px/1.8 var(--serif, serif); }
.roles { margin: 36px 0 0; border-top: 1px solid rgba(23,26,23,.3); }
.role { padding: 38px 0 42px; border-bottom: 1px solid rgba(23,26,23,.18); display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; }
.role-head .role-no { margin: 0 0 12px; color: #6d6f68; font-size: 8px; letter-spacing: .22em; }
.role-head h3 { margin: 0 0 14px; font: 400 26px/1.3 var(--serif, serif); letter-spacing: -.015em; }
.role-head p { margin: 0; color: #3a3d38; font: 14px/1.85 var(--serif, serif); }
.role-picks { display: grid; gap: 0; align-self: start; }
.pick { padding: 20px 0; border-top: 1px solid rgba(23,26,23,.22); display: grid; grid-template-columns: 172px 1fr auto; gap: 22px; align-items: center; color: inherit; }
.pick figure { margin: 0; overflow: hidden; background: #e3e1d9; }
.pick figure img { width: 100%; height: auto; display: block; transition: transform 2.2s cubic-bezier(.2, .65, .2, 1), opacity .6s ease; }
a.pick:hover figure img { transform: scale(1.05); }
a.pick:hover .pick-main b { border-color: rgba(23,26,23,.55); }
.pick-tier { display: block; margin: 0 0 8px; color: #8a8c83; font-size: 8px; letter-spacing: .2em; }
.pick-main { min-width: 0; }
.pick-main b { display: inline; font: 400 16px/1.6 var(--serif, serif); font-weight: 500; color: #171a17; border-bottom: 1px solid transparent; transition: border-color .4s; }
a.pick .pick-main b { border-bottom-color: rgba(23,26,23,.28); }
.pick-main small { display: block; margin-top: 7px; color: #6d6f68; font-size: 11px; line-height: 1.65; letter-spacing: .02em; }
.pick-price { font: 400 18px var(--serif, serif); color: #171a17; white-space: nowrap; align-self: start; padding-top: 22px; }
.pick:nth-child(2) { transition-delay: .1s; }
.pick:nth-child(3) { transition-delay: .2s; }
.ensemble-note { margin: 10px 0 0; color: #8a8c83; font-size: 9px; letter-spacing: .1em; }
@media (max-width: 760px) {
  .role { grid-template-columns: 1fr; gap: 22px; padding: 30px 0 34px; }
  .pick { grid-template-columns: 112px 1fr; gap: 16px; }
  .pick-price { grid-column: 2; justify-self: start; margin-top: 2px; padding-top: 0; }
  .ensemble-rules { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- 寸法の解剖(写真+実測線) ---------- */
.anatomy { margin: 42px 0 0; background: #050706; }
.anatomy-stage { position: relative; }
.anatomy-stage img { width: 100%; height: auto; display: block; }
.anatomy-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.anatomy-stage svg line, .anatomy-stage svg path { stroke: #e9e9e2; stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .9; }
.anatomy-stage svg .lead { stroke-dasharray: 4 5; opacity: .55; }
.ana-label { position: absolute; transform: translate(-50%, -50%); padding: 5px 9px; background: rgba(5, 7, 6, .55); color: #e9e9e2; font-size: 9px; letter-spacing: .18em; white-space: nowrap; }
.anatomy figcaption { display: flex; justify-content: space-between; gap: 18px; padding: 10px 2px 0; color: #6d6f68; font-size: 8px; letter-spacing: .16em; }
@media (max-width: 560px) { .ana-label { font-size: 8px; padding: 4px 7px; letter-spacing: .12em; } }

/* ---------- 気候: USDAゾーンの帯 ---------- */
.zone-scale { margin: 36px 0 0; }
.zone-cells { display: grid; grid-template-columns: repeat(8, 1fr); border: 1px solid rgba(23,26,23,.4); }
.zone-cells span { padding: 16px 0 14px; text-align: center; font: 400 16px var(--serif, serif); color: #8a8c83; border-left: 1px solid rgba(23,26,23,.16); }
.zone-cells span:first-child { border-left: 0; }
.zone-cells span.in { background: #171a17; color: #e9e9e2; }
.zone-notes { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; color: #6d6f68; font-size: 10px; letter-spacing: .08em; line-height: 1.7; }
.zone-notes span:last-child { text-align: right; }
.zone-title { margin: 0 0 12px; color: #6d6f68; font-size: 8px; letter-spacing: .2em; }

/* ---------- ためらう前に: 一字印 ---------- */
#anxiety .faq > div { display: grid; grid-template-columns: 80px 1fr; gap: 26px; align-items: start; }
.anx-seal { width: 62px; height: 62px; margin-top: 6px; border: 1px solid rgba(23,26,23,.5); display: grid; place-items: center; font: 400 26px var(--serif, serif); color: #171a17; }
@media (max-width: 560px) { #anxiety .faq > div { grid-template-columns: 58px 1fr; gap: 16px; } .anx-seal { width: 46px; height: 46px; font-size: 20px; } }

/* ---------- トップ: 三つの道のサムネ ---------- */
.objects .object-path { grid-template-columns: .25fr 190px 1.05fr .95fr .15fr; }
.path-thumb { display: block; overflow: hidden; background: #171a17; }
.path-thumb img { width: 100%; height: 120px; object-fit: cover; display: block; opacity: .92; transition: transform 2.2s cubic-bezier(.2, .65, .2, 1); }
.object-path:hover .path-thumb img { transform: scale(1.06); }
@media (max-width: 900px) { .objects .object-path { grid-template-columns: 130px 1fr .12fr; } .objects .object-path .path-no { display: none; } .path-thumb img { height: 86px; } }

/* ---------- トップ: 記事一覧のサムネ ---------- */
.notes .note-list a { grid-template-columns: .18fr 170px 1.45fr .5fr .15fr; }
.note-thumb { width: 100%; height: 96px; object-fit: cover; display: block; background: #171a17; transition: transform 2.2s cubic-bezier(.2, .65, .2, 1); }
.note-list a { overflow: hidden; }
.note-list a:hover .note-thumb { transform: scale(1.06); }
.note-thumb-wrap { overflow: hidden; }
@media (max-width: 900px) { .notes .note-list a { grid-template-columns: 120px 1fr .15fr; } .notes .note-list a > span:first-child { display: none; } .note-thumb { height: 76px; } }

/* ---------- 緩やかな出現 ---------- */
.rv { opacity: 0; transform: translateY(24px); transition: opacity 1.25s ease, transform 1.25s cubic-bezier(.2, .65, .2, 1); }
.rv.rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ---------- 樹の在処(生体) ---------- */
.living-note { margin: 44px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(23,26,23,.3); display: grid; grid-template-columns: 64px 1fr; gap: 18px; }
.living-note > span { color: #6d6f68; font-size: 8px; letter-spacing: .2em; padding-top: 5px; }
.living-note p { margin: 0; color: #3a3d38; font: 14px/1.85 var(--serif, serif); }

/* ---------- トップ:Match(暗部) ---------- */
.match-visual { position: relative; overflow: hidden; background: #0c0f0d; border-right: 1px solid var(--line, rgba(215,218,208,.17)); display: flex; align-items: flex-end; min-height: 640px; }
@media (max-width: 900px) { .match-visual { min-height: 440px; border-right: 0; border-bottom: 1px solid var(--line, rgba(215,218,208,.17)); } }
.match-pair { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% bottom; }
.match-pair[hidden] { display: none; }
.match-stage { position: relative; width: 100%; margin: 0 0 17%; }
.match-stage img { width: 100%; height: auto; display: block; opacity: .96; }
.match-stage .study-pot { pointer-events: none; }
.match-plate { position: absolute; left: 25px; top: 24px; color: #6e736d; font-size: 8px; letter-spacing: .2em; }
.match-plate b { display: block; font-weight: 400; margin-top: 7px; color: #9a9e97; }
.match-footnote { position: absolute; right: 25px; bottom: 18px; color: #565b56; font-size: 7px; letter-spacing: .18em; }
.tier-options button small { display: block; margin-top: 4px; font-size: 8px; letter-spacing: .14em; color: #565b56; font-family: var(--sans, sans-serif); }
.match-reason { margin: 26px 0 0; }
.match-reason ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.match-reason li { display: grid; grid-template-columns: 54px 1fr; gap: 14px; color: #9a9e97; font: 13px/1.7 var(--serif, serif); }
.match-reason li span { padding-top: 2px; color: #565b56; font-family: var(--sans, sans-serif); font-size: 7px; letter-spacing: .18em; }
.match-link { display: inline-block; margin-top: 28px; padding-bottom: 8px; border-bottom: 1px solid #7b8079; color: #d7d8d1; font-size: 9px; letter-spacing: .2em; }
.match-link[hidden] { display: none; }

/* ---------- モバイル ---------- */
@media (max-width: 760px) {
  .good { grid-template-columns: 1fr; gap: 26px; padding: 32px 0 36px; }
  .verdict-head { grid-template-columns: 54px 1fr; gap: 16px; }
  .verdict-grade { width: 46px; height: 46px; font-size: 22px; }
  .study-verdict h3 { font-size: 21px; }
  .study-controls > div { grid-template-columns: 1fr; gap: 10px; }
  .study-verdict li { grid-template-columns: 50px 1fr; }
  .living-note { grid-template-columns: 1fr; gap: 8px; }
}

/* picks without product images (rights pending) */
.pick.no-img { grid-template-columns: 1fr auto; }

/* buying guide: the shelf, by home */
.shelf { margin: 36px 0 0; border-top: 1px solid rgba(23,26,23,.3); }
.shelf-row { padding: 38px 0 42px; border-bottom: 1px solid rgba(23,26,23,.18); display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; }
.shelf-row .zone-chip { display: inline-block; margin: 14px 0 0; padding: 5px 10px; border: 1px solid rgba(23,26,23,.28); color: #4a4d46; font-size: 9px; letter-spacing: .12em; }
@media (max-width: 900px) { .shelf-row { grid-template-columns: 1fr; gap: 22px; padding: 30px 0 34px; } }

/* affiliate links (Amazon) — quiet, labeled */
.good-spec .amazon-link { display: inline-block; margin-top: 10px; padding-bottom: 4px; border-bottom: 1px solid rgba(23,26,23,.3); color: #4a4d46; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.good-alt .amazon-link { color: inherit; }
.amazon-also { margin: 6px 0 0; padding-top: 12px; border-top: 1px dashed rgba(23,26,23,.2); color: #6d6f68; font-size: 11px; line-height: 1.7; }
.amazon-also a { color: #2e312c; border-bottom: 1px solid rgba(23,26,23,.28); }