/* うちの猫（/mycat/）。色と大きさはサイト全体の値（style.css の :root）を使う。本文16px、補足14px以上 */
.mc-edit { margin-top: 24px; }
.mc-out + .mc-edit { margin-top: 32px; }
/* 登録の前は畳む1行を出さない（入力欄だけを見せる） */
.mc-edit:not([data-reg]) > .mc-line { display: none; }
.mc-line { display: flex; align-items: center; min-height: 48px; padding: 10px 16px; border-radius: 14px; background: var(--sunk); font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.mc-line::-webkit-details-marker { display: none; }
.mc-edit[open] > .mc-line { border-radius: 14px 14px 0 0; }
.mc-form { display: grid; gap: 20px; padding: 20px; border-radius: 20px; background: var(--sunk); }
.mc-edit[data-reg][open] > .mc-form { border-radius: 0 0 20px 20px; }
.mc-f { display: grid; gap: 6px; }
.mc-l { font-size: 15px; font-weight: 700; }
.mc-h { font-size: 14px; color: var(--ink-2); }
.mc-in { width: 100%; height: 48px; padding: 0 14px; border: 1px solid #8f8a82; border-radius: 12px; background: var(--bg); font: inherit; font-size: 16px; color: var(--ink); }
select.mc-in { width: auto; min-width: 120px; justify-self: start; }
.mc-pick { position: relative; }
.mc-cur { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.mc-cur-n { flex: 1; font-weight: 600; }
.mc-chg { flex: none; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font: inherit; font-size: 14px; color: var(--ink); }
.mc-res { margin-top: 6px; padding: 4px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); list-style: none; }
.mc-opt { display: block; min-height: 44px; padding: 10px 12px; border-radius: 8px; font-size: 15px; cursor: pointer; }
.mc-opt[aria-selected='true'] { background: var(--sunk); box-shadow: inset 0 0 0 1.5px var(--accent-strong); }
@media (hover: hover) and (pointer: fine) { .mc-opt:hover { background: var(--sunk); } }
.mc-none { padding: 10px 12px; font-size: 14px; color: var(--ink-2); }
.mc-out { margin-top: 32px; }
.mc-wait { padding: 20px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.mc-sample { margin-bottom: 12px; font-size: 14px; color: var(--ink-2); }
.mc-sum { padding: 24px 20px; border-radius: 20px; background: var(--accent-bg); }
.mc-k { font-size: 15px; font-weight: 700; color: var(--accent-ink); }
.mc-big { margin-top: 4px; font-size: clamp(32px, 9vw, 44px); font-weight: 700; line-height: 1.2; }
.mc-dl { display: grid; gap: 10px; margin-top: 16px; }
.mc-dl div { display: grid; grid-template-columns: 4.5em 1fr; gap: 8px; }
.mc-dl dt { font-size: 14px; color: var(--ink-2); padding-top: 2px; }
.mc-dl dd { font-weight: 700; }
.mc-sub { display: block; font-size: 14px; font-weight: 400; color: var(--ink-2); }
.mc-note, .mc-since { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.mc-since { color: var(--accent-ink); font-weight: 600; }
.mc-share { margin-top: 16px; }
.mc-shops, .mc-alts, .mc-arts { margin-top: 12px; list-style: none; display: grid; gap: 8px; }
.mc-shop, .mc-alt { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .mc-shop:hover, .mc-alt:hover { background: var(--sunk); } }
.mc-shop-n, .mc-alt-n { font-weight: 700; }
.mc-shop-s, .mc-shop-u, .mc-alt-v { font-size: 14px; color: var(--ink-2); }
.mc-shop-u.low { color: var(--accent-ink); font-weight: 600; }
.mc-shop-go { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--accent-ink); }
.mc-h3 { margin-top: 20px; font-size: 15px; }
.mc-strip { display: block; width: 100%; height: auto; max-height: 40px; margin-top: 6px; }
.mc-dot { fill: var(--ink-3); opacity: .8; }
.mc-me { fill: var(--accent); stroke: var(--ink); stroke-width: 2; }
.mc-ends { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-2); }
.mc-arts a { display: flex; align-items: center; min-height: 44px; font-weight: 600; }
.mc-tag { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: var(--sunk); font-size: 14px; font-weight: 600; color: var(--ink-2); vertical-align: 2px; }
