/* =============================================================
   わんこ着せ替え（kisekae.html）の「雰囲気から選ぶ」だけの見た目
   ・前の style-lab.css（.lab-taste など）の上に、ここで足りない分だけ重ねる
   ・色は、柄の色そのもの（無地の色の見本）と、サイトの4色だけ
   ============================================================= */

/* 雰囲気：21種を縦に長く並べず、小さめの札にする（選んだあとの欄が下に隠れないように） */
.page-kisekae .kt-tastes{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px;}
.page-kisekae .kt-tastes .lab-taste{min-height:46px;padding:5px 8px;gap:8px;font-size:.8125rem;letter-spacing:.04em;}
.page-kisekae .kt-tastes .lab-taste .mini{width:32px;height:32px;}
.page-kisekae .kt-tastes .lab-taste small{font-size:.625rem;}

.kt-more-btn{display:inline-block;margin:10px 0 0;background:transparent;border:0;border-bottom:1px solid var(--ink-soft);
  font:inherit;font-size:.75rem;letter-spacing:.06em;color:var(--ink-mid);padding:6px 0;cursor:pointer;}
.kt-more-btn[hidden]{display:none;}
@media(min-width:901px){
  /* 選んでいる雰囲気は、しまっていても見せる */
  .kt-tastes:not(.is-open) .kt-more:not([aria-checked="true"]){display:none;}
}

/* 選んだあとの欄 */
.kt-tune{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}
.kt-tune[hidden]{display:none;}
.kt-tune .lab-desc{margin:0 0 14px;}
.kt-h{margin:18px 0 8px;}
.kt-h b{font-weight:500;}
.kt-h small{font-size:.6875rem;color:var(--ink-soft);margin-left:8px;letter-spacing:.04em;}

/* この雰囲気の柄：小さく並べて、直接選ぶ。多い雰囲気（花・小花 73柄など）は欄の中だけ動かす */
.kt-pats{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;
  max-height:212px;overflow-y:auto;padding:2px;scrollbar-width:thin;scrollbar-color:var(--accent) var(--paper-3);}
.kt-pat{display:block;padding:0;border:1px solid var(--line);background:var(--paper);cursor:pointer;font:inherit;text-align:left;min-width:0;}
.kt-pat .im{display:block;width:100%;aspect-ratio:1;background-size:cover;background-position:center;background-color:var(--paper-3);}
.kt-pat .lb{display:block;font-size:.5625rem;line-height:1.5;color:var(--ink-mid);padding:3px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kt-pat[aria-checked="true"]{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-1px;}
.kt-pat[aria-checked="true"] .lb{color:var(--accent-deep);}

/* 柄を置く場所：4つ。7か所を小さな四角（柄＝えんじ・無地＝淡い）で見せる */
.kt-lays{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.kt-lay{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--paper);
  font:inherit;font-size:.75rem;letter-spacing:.04em;color:var(--ink);padding:9px 10px;cursor:pointer;text-align:left;min-width:0;}
.kt-lay .dots{display:grid;grid-template-columns:repeat(7,6px);gap:2px;flex:none;}
.kt-lay .dots i{display:block;width:6px;height:12px;}
.kt-lay .dots i.p{background:var(--accent);}
.kt-lay .dots i.s{background:var(--line);}
.kt-lay[aria-checked="true"]{border-color:var(--accent);background:var(--blush);color:var(--accent-deep);}

/* 無地の色 */
.kt-solids{display:flex;flex-wrap:wrap;gap:8px;}
.kt-solid{width:38px;height:38px;padding:3px;border:1px solid var(--line);background:var(--paper);cursor:pointer;}
.kt-solid i{display:block;width:100%;height:100%;border:1px solid rgba(0,0,0,.08);}
.kt-solid[aria-checked="true"]{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-1px;}
.kt-solid[disabled]{opacity:.35;cursor:not-allowed;}
.kt-note{font-size:.6875rem;line-height:1.8;color:var(--ink-soft);margin:6px 0 0;}
.kt-like{border-color:var(--accent);color:var(--accent-deep);}

.kt-pat:focus-visible,.kt-lay:focus-visible,.kt-solid:focus-visible{outline:2px solid var(--ink);outline-offset:1px;}
@media(hover:hover){
  .kt-pat:hover,.kt-lay:hover,.kt-solid:not([disabled]):hover{border-color:var(--ink-soft);}
}

/* ---- スマホ：横に流して、画面の縦を使い切らない ---- */
@media(max-width:900px){
  .page-kisekae .kt-tastes{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-template-columns:none;
    grid-auto-columns:minmax(138px,max-content);overflow-x:auto;padding-bottom:6px;scrollbar-width:none;}
  .page-kisekae .kt-tastes::-webkit-scrollbar{display:none;}
  .kt-more-btn{display:none!important;}
  .kt-pats{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:64px;
    max-height:none;overflow-x:auto;overflow-y:hidden;padding-bottom:6px;}
  .kt-lays{grid-template-columns:1fr 1fr;}
  .kt-lay{font-size:.6875rem;padding:8px;gap:8px;}
}