/* 購入の画面の見た目。色・字・余白は tokens.css の変数（--c-*、--t-*、--s-*、--r-*、--tap、--col-max）を使う。
   375px の幅で崩れないこと。赤・点滅・強い色は使わない（CLAUDE.md 事業条件）。class は shop- を頭に付ける */
.shop { box-sizing: border-box; max-width: var(--col-max); margin: 0 auto; padding: var(--s-4) var(--s-3) var(--s-6); color: var(--c-ink); background: var(--c-bg); font-family: var(--font); font-size: var(--t-body); line-height: 1.7; }
.shop *, .shop *::before, .shop *::after { box-sizing: inherit; }
.shop-title { margin: 0 0 var(--s-4); font-size: var(--t-title); font-weight: 600; line-height: 1.3; }
.shop-lead { margin: 0 0 var(--s-4); font-size: var(--t-lead); }
.shop-note { margin: var(--s-2) 0 0; color: var(--c-ink-2); font-size: var(--t-sm); }
.shop-owned { margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-m); background: var(--c-surface-2); font-size: var(--t-lead); }
.shop-status { min-height: 1.7em; margin: var(--s-3) 0 0; color: var(--c-ink-2); font-size: var(--t-sm); }
.shop-minor, .shop-seller { margin: var(--s-3) 0 0; }

/* 商品の札。1 年と買い切りは同じ大きさ・同じ強さ。押せる */
.shop-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.shop-cards-1 { grid-template-columns: 1fr; }
.shop-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); min-width: 0; min-height: var(--tap); margin: 0; padding: var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-l); background: var(--c-surface); color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.shop-card:hover { border-color: var(--c-ink-2); }
.shop-card:focus-visible { outline: 2px solid var(--c-acc); outline-offset: 2px; }
.shop-card-name { font-size: var(--t-lead); font-weight: 600; }
.shop-card-price { font-size: var(--t-lead); white-space: nowrap; }
.shop-card-sub { color: var(--c-ink-2); font-size: var(--t-sm); line-height: 1.5; }

/* 確認の画面の表。額がいちばん大きい字 */
.shop-dl { display: grid; grid-template-columns: 5.5em 1fr; gap: var(--s-2) var(--s-3); margin: 0; padding: var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-m); background: var(--c-surface); }
.shop-dl dt { margin: 0; color: var(--c-ink-2); font-size: var(--t-sm); line-height: 1.7; }
.shop-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.shop-amount { font-size: var(--t-title); font-weight: 600; white-space: nowrap; }

/* 道（規約・PP・特商法） */
.shop-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin: var(--s-3) 0 0; font-size: var(--t-sm); }
.shop a { color: var(--c-acc); text-decoration: underline; text-underline-offset: 0.2em; }

/* 釦。主は 1 つ。副は輪郭だけ。字だけの釦（購入を復元）は下に置く */
.shop-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-4) 0 0; }
.shop-acts-col { flex-direction: column; align-items: stretch; }
.shop-btn { min-height: var(--tap); margin: 0; padding: var(--s-2) var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-m); background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: var(--t-body); line-height: 1.4; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.shop-btn:disabled { opacity: 0.6; cursor: default; }
.shop-btn:focus-visible { outline: 2px solid var(--c-acc); outline-offset: 2px; }
.shop-btn-primary { border-color: var(--c-acc); background: var(--c-acc); color: var(--c-acc-ink); font-weight: 600; }
.shop-btn-ghost { background: transparent; }
.shop-btn-text { padding-left: 0; padding-right: 0; border-color: transparent; background: transparent; color: var(--c-acc); text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 339px) { .shop-cards { grid-template-columns: 1fr; } }
.shop-sec{margin:var(--s-4) 0 var(--s-2);font-size:var(--t-sm);font-weight:700;color:var(--c-ink-2)}
/* 1 列の行（D-062。2 列の札をやめた）。名前と説明は左、額は右で折り返さない */
.shop-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;margin:0 calc(-1 * var(--s-3)) var(--s-3);padding:var(--s-2) var(--s-3);background:var(--c-bg)}
.shop-head .shop-title{margin:0}
.shop-x{width:var(--tap);height:var(--tap);border:0;background:transparent;color:var(--c-ink-2);font-size:1.6rem;line-height:1;cursor:pointer}
.shop-list{list-style:none;margin:0;padding:0;border:1px solid var(--c-line);border-radius:var(--r-l);background:var(--c-surface);overflow:hidden}
.shop-list>li+li{border-top:1px solid var(--c-line)}
.shop-row{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:3.75rem;margin:0;padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);border:0;background:transparent;color:var(--c-ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.shop-row:active{background:var(--c-surface-2)}
.shop-row:focus-visible{outline:2px solid var(--c-acc);outline-offset:-2px}
.shop-row-main{flex:1;min-width:0;display:grid;gap:2px}
.shop-row-name{font-size:var(--t-lead);font-weight:600;line-height:1.35}
.shop-row-sub{color:var(--c-ink-2);font-size:var(--t-sm);line-height:1.45}
.shop-row-price{flex:none;white-space:nowrap;font-size:var(--t-lead);font-weight:600;font-variant-numeric:tabular-nums}
.shop-row-price small{margin-left:1px;color:var(--c-ink-2);font-size:var(--t-sm);font-weight:400}
.shop-row-go{flex:none;color:var(--c-ink-3);font-size:1.3rem}
.shop-more{margin-top:var(--s-3);border:1px solid var(--c-line);border-radius:var(--r-l);background:var(--c-surface);overflow:hidden}
.shop-more>summary{list-style:none}
.shop-more>summary::-webkit-details-marker{display:none}
.shop-more[open]>summary .shop-row-go{transform:rotate(90deg)}
.shop-more>.shop-list{border:0;border-top:1px solid var(--c-line);border-radius:0}
/* 確認の画面の表は 1 列（見出しの下に中身。TENRYU・LUMINA の形、D-062） */
.shop-dl{grid-template-columns:1fr;gap:0}
.shop-dl dt{margin-top:var(--s-3)}
.shop-dl dt:first-child{margin-top:0}
.shop-title-c{flex:1;text-align:center}

/* 分野を選ぶ札（D-108）。押した札は塗る。使っている分野は押したまま固定 */
.shop-chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-2)}
.shop-chip{min-height:2.75rem;padding:0 var(--s-4);border:1px solid var(--c-line-strong);border-radius:999px;background:var(--c-surface);color:var(--c-ink);font:inherit;font-size:var(--t-body);cursor:pointer;-webkit-tap-highlight-color:transparent}
.shop-chip[aria-pressed="true"]{background:var(--c-acc);border-color:var(--c-acc);color:var(--c-on-acc,#fff)}
.shop-chip:disabled{cursor:default;opacity:.75}
.shop-chip:focus-visible{outline:2px solid var(--c-acc);outline-offset:2px}
.shop-row-off{cursor:default;color:var(--c-ink-2)}