/* =========================================================
   口コミ（@コスメ型）共通CSS — 術式ページ(JIN内)とトップ(.sn-top)の両方で使う。
   トップのCSS変数が無い環境でも崩れないようフォールバック色を持つ。
   ======================================================= */
.sn-kc{
  --kc-ink:var(--ink,#171215);
  --kc-ink60:var(--ink-60,#6B6065);
  --kc-yellow:var(--yellow,#FFD426);
  --kc-pink:var(--pink,#FF3D74);
  --kc-pink-soft:var(--pink-soft,#FFE3EC);
  --kc-cyan:var(--cyan,#00C0D8);
  --kc-star:#F5A623;
  color:var(--kc-ink);
  margin:40px 0 0;
  line-height:1.8;
}
.sn-kc *{box-sizing:border-box}
.sn-kc-h{font-size:18px;font-weight:900;border-left:5px solid var(--kc-pink);padding-left:10px;margin:0 0 4px}
.sn-kc-sub{font-size:13px;color:var(--kc-ink60);margin:0 0 16px}
.sn-kc-top .sn-sec-sub{margin-bottom:16px}

/* ---------- バッジ（術式ページ上部・タイル） ---------- */
.sn-kc-badge{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--kc-ink);
  border:2px solid var(--kc-ink);background:#fff;padding:3px 10px;font-size:13px;margin:0 0 14px;
}
.sn-kc-badge-stars{color:var(--kc-star);letter-spacing:.04em;font-size:15px;line-height:1}
.sn-kc-badge-avg{font-weight:900;font-size:15px}
.sn-kc-badge-txt{color:var(--kc-ink60);font-size:12px}

/* ---------- 集計 ---------- */
.sn-kc-summary{
  display:grid;grid-template-columns:auto 1fr;gap:18px 26px;align-items:center;
  border:3px solid var(--kc-ink);background:#fff;padding:16px 18px;margin:0 0 18px;
  box-shadow:4px 4px 0 var(--kc-ink);
}
.sn-kc-summary-main{display:flex;flex-direction:column;align-items:center;min-width:110px}
.sn-kc-summary-avg{font-size:44px;font-weight:900;line-height:1}
.sn-kc-summary-stars{color:var(--kc-star);font-size:20px;letter-spacing:.05em;line-height:1.3}
.sn-kc-summary-count{font-size:12px;color:var(--kc-ink60)}
.sn-kc-dist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sn-kc-dist li{display:grid;grid-template-columns:2.4em 1fr 2em;gap:8px;align-items:center;font-size:12px}
.sn-kc-dist-label{color:var(--kc-star);font-weight:700}
.sn-kc-dist-bar{height:10px;border:2px solid var(--kc-ink);background:#fff;overflow:hidden}
.sn-kc-dist-bar i{display:block;height:100%;background:var(--kc-star)}
.sn-kc-dist-n{text-align:right;color:var(--kc-ink60)}
@media (max-width:520px){
  .sn-kc-summary{grid-template-columns:1fr;gap:12px}
}

/* ---------- カード ---------- */
.sn-kc-list{display:grid;gap:14px;margin:18px 0 0}
.sn-kc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:0 0 18px}
.sn-kc-card{
  border:3px solid var(--kc-ink);background:#fff;padding:14px 16px;
  box-shadow:4px 4px 0 var(--kc-ink);display:flex;flex-direction:column;gap:6px;
}
.sn-kc-card p{margin:0}
.sn-kc-card-tp{
  align-self:flex-start;text-decoration:none;color:var(--kc-ink);font-weight:900;font-size:12px;
  background:var(--kc-yellow);border:2px solid var(--kc-ink);padding:1px 8px;
}
.sn-kc-card-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.sn-kc-card-stars{color:var(--kc-star);font-size:16px;letter-spacing:.05em;white-space:nowrap}
.sn-kc-card-title{font-weight:900;font-size:15px;line-height:1.5}
.sn-kc-card-chips{font-size:11.5px;color:var(--kc-ink60)}
.sn-kc-card-body{font-size:14px;line-height:1.8;white-space:normal}
.sn-kc-card-foot{font-size:11.5px;color:var(--kc-ink60);margin-top:2px}
.sn-kc-card-more{font-size:12.5px;text-decoration:none;color:var(--kc-ink);border-bottom:2px solid var(--kc-ink);align-self:flex-start;margin-top:4px}
.sn-kc-card-more:hover{color:var(--kc-pink)}
.sn-kc-carousel{position:relative;margin:0 0 18px}
.sn-kc-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding:4px 2px 10px;scrollbar-width:none}
.sn-kc-track::-webkit-scrollbar{display:none}
.sn-kc-track > .sn-kc-card{flex:0 0 min(82%,300px);scroll-snap-align:center}
.sn-kc-carousel .sn-car-arrow{top:50%}
.sn-kc-empty{
  font-size:13px;color:var(--kc-ink60);border:2px dashed var(--kc-ink60);padding:10px 14px;display:inline-block;margin:0 0 14px;
}

/* ---------- フォーム ---------- */
.sn-kc-form-wrap{margin:0 0 8px}
.sn-kc-msg{font-size:13.5px;font-weight:700;padding:10px 14px;border:2px solid var(--kc-ink);margin:0 0 12px}
.sn-kc-msg-ok{background:#E6FAFC;border-color:var(--kc-cyan)}
.sn-kc-msg-ng{background:var(--kc-pink-soft);border-color:var(--kc-pink)}
.sn-kc-details{border:3px solid var(--kc-ink);background:#fff;box-shadow:4px 4px 0 var(--kc-ink);margin:0 0 8px}
.sn-kc-open{
  cursor:pointer;list-style:none;font-weight:900;font-size:15px;letter-spacing:.08em;
  background:var(--kc-pink);color:#fff;padding:12px 18px;user-select:none;
}
.sn-kc-open::-webkit-details-marker{display:none}
.sn-kc-open::before{content:"＋ ";}
.sn-kc-details[open] .sn-kc-open::before{content:"− ";}
.sn-kc-form{padding:16px 18px 18px;display:grid;gap:12px}
.sn-kc-form p{margin:0}
.sn-kc-row{display:grid;gap:5px}
.sn-kc-label{font-size:12.5px;font-weight:900}
.sn-kc-label b{font-weight:700;font-size:10.5px;background:var(--kc-pink);color:#fff;padding:0 6px;margin-left:6px;vertical-align:middle}
.sn-kc-form input[type=text],.sn-kc-form textarea,.sn-kc-form select{
  width:100%;border:2px solid var(--kc-ink);background:#fff;padding:9px 11px;font-size:14px;
  font-family:inherit;color:var(--kc-ink);border-radius:0;
}
.sn-kc-form textarea{resize:vertical;min-height:140px;line-height:1.7}
.sn-kc-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.sn-kc-chips label{font-size:12px;font-weight:700;display:grid;gap:4px}
.sn-kc-chips select{padding:7px 9px;font-size:13px}
.sn-kc-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* 星ピッカー（JS不要: 右→左に並べて :checked 以降を塗る） */
.sn-kc-starpick{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.sn-kc-starpick input{position:absolute;opacity:0;width:0;height:0}
.sn-kc-starpick label{cursor:pointer;font-size:34px;line-height:1;color:#D9D2C3;transition:color .1s;padding:0 2px}
.sn-kc-starpick label:hover,
.sn-kc-starpick label:hover ~ label,
.sn-kc-starpick input:checked ~ label{color:var(--kc-star)}
.sn-kc-starpick input:focus-visible + label{outline:2px solid var(--kc-cyan);outline-offset:2px}

.sn-kc-submit{padding-top:4px}
.sn-kc-submit button{
  font-weight:900;letter-spacing:.1em;font-size:15px;cursor:pointer;font-family:inherit;
  background:var(--kc-ink);color:#fff;border:3px solid var(--kc-ink);padding:11px 36px;
  box-shadow:3px 3px 0 var(--kc-pink);transition:transform .1s,box-shadow .1s;
}
.sn-kc-submit button:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--kc-pink)}
.sn-kc-note{font-size:11.5px;line-height:1.7;color:var(--kc-ink60);border-left:4px solid var(--kc-ink);padding-left:9px}
@media(max-width:600px){.sn-kc{margin-top:20px}}