/* =============================================================
   ネームタグのページ（nametag.html）
   ・ヒモ31色／書体7種／お名前糸46色を、選びながら見られるようにする
   ・資料写真のままでは番号が読めないので、色見本に組み直している
   ・メディアクエリは、必ず基本の指定より後ろに置くこと
   ============================================================= */

/* ---- 章立て ---- */
.page-nametag .nt-step{margin:0 0 clamp(14px,1.8vw,22px);}
.page-nametag .nt-step .no{
  font-family:var(--latin);font-size:1.5rem;font-style:italic;
  color:var(--accent);line-height:1;margin-right:.5em;
}
.page-nametag .nt-step h2{display:inline;}
.page-nametag .nt-lead{
  font-size:.875rem;line-height:2.1;letter-spacing:.04em;
  color:var(--ink-mid);margin:.9em 0 0;
}

/* ---- 色見本 ---- */
.page-nametag .nt-grp{margin:0 0 clamp(22px,2.6vw,32px);}
.page-nametag .nt-grp-h{
  font-size:.8125rem;letter-spacing:.14em;color:var(--ink-mid);
  margin:0 0 .9em;padding:0 0 .5em;border-bottom:1px solid var(--line-soft);
}
.page-nametag .nt-grid{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  margin:0;padding:0;list-style:none;
}
.page-nametag .nt-sw{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:2px;
  padding:4px;font:inherit;color:inherit;
}
.page-nametag .nt-sw .chip{
  display:block;width:100%;aspect-ratio:3/2;border-radius:2px;
  border:1px solid var(--line);
}
.page-nametag .nt-sw .lb{
  display:block;margin:.5em 0 0;font-size:.75rem;letter-spacing:.04em;
  line-height:1.6;color:var(--ink);
}
.page-nametag .nt-sw .lb b{
  font-family:var(--latin);font-weight:400;font-style:italic;
  font-size:.9375rem;color:var(--accent);margin-right:.35em;
}
.page-nametag .nt-sw:hover{border-color:var(--line);}
.page-nametag .nt-sw[aria-pressed="true"]{border-color:var(--accent);}
.page-nametag .nt-sw[aria-pressed="true"] .lb b{color:var(--accent-deep);}

/* お名前糸は数が多いので、ひとまわり小さく */
.page-nametag .nt-grid.sm{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;}
.page-nametag .nt-grid.sm .nt-sw .lb{font-size:.6875rem;}
.page-nametag .nt-grid.sm .nt-sw .lb b{font-size:.8125rem;margin-right:0;}

/* ---- 書体 ---- */
.page-nametag .nt-fonts{
  display:grid;gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  margin:0;padding:0;list-style:none;
}
.page-nametag .nt-font{
  display:block;width:100%;cursor:pointer;text-align:center;
  background:var(--paper-2);border:1px solid var(--line);border-radius:2px;
  padding:0 0 14px;font:inherit;color:inherit;
}
.page-nametag .nt-font img{
  display:block;width:100%;height:auto;border-bottom:1px solid var(--line-soft);
}
.page-nametag .nt-font .lb{
  display:block;margin:.85em 0 0;font-size:.8125rem;letter-spacing:.08em;color:var(--ink);
}
.page-nametag .nt-font .lb b{
  font-family:var(--latin);font-weight:400;font-style:italic;
  font-size:1.0625rem;color:var(--accent);margin-right:.45em;
}
.page-nametag .nt-font:hover{border-color:var(--ink-soft);}
.page-nametag .nt-font[aria-pressed="true"]{border-color:var(--accent);}

/* ---- 現物の写真（たたんでおく） ---- */
.page-nametag .nt-photo{margin:clamp(20px,2.6vw,30px) 0 0;border-top:1px solid var(--line-soft);}
.page-nametag .nt-photo summary{
  cursor:pointer;padding:.95em 0;font-size:.8125rem;letter-spacing:.1em;color:var(--ink-mid);
}
.page-nametag .nt-photo summary:hover{color:var(--accent);}
.page-nametag .nt-photo img{display:block;width:100%;max-width:620px;height:auto;margin:.4em 0 1.2em;}
.page-nametag .nt-photo p{font-size:.75rem;line-height:2;color:var(--ink-soft);margin:0 0 1.4em;}

/* ---- 選んだ内容 ---- */
.page-nametag .nt-pick{
  background:var(--paper-3);border:1px solid var(--line);border-radius:2px;
  padding:clamp(18px,2.4vw,26px);
}
.page-nametag .nt-pick dl{
  display:grid;grid-template-columns:7.5em 1fr;gap:.75em 1em;margin:0 0 1.4em;
  font-size:.875rem;line-height:1.9;letter-spacing:.04em;
}
.page-nametag .nt-pick dt{color:var(--ink-mid);}
.page-nametag .nt-pick dd{margin:0;color:var(--ink);}
.page-nametag .nt-pick dd .yet{color:var(--ink-soft);}
.page-nametag .nt-pick dd .dot{
  display:inline-block;width:1em;height:1em;border-radius:2px;
  border:1px solid var(--line);vertical-align:-.15em;margin-right:.5em;
}
.page-nametag .nt-pick .row{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;}
.page-nametag .nt-pick .clr{
  background:none;border:1px solid var(--line);color:var(--ink-mid);
  padding:12px 20px;font:inherit;font-size:.8125rem;letter-spacing:.08em;
  border-radius:2px;cursor:pointer;
}
.page-nametag .nt-pick .clr:hover{border-color:var(--ink-soft);color:var(--ink);}

/* ---- 画面の下に出す帯（.cartbar の仲間） ---- */
.nt-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(61,52,45,.97);color:#f2ebe0;
  padding:13px var(--gut);display:none;gap:14px 20px;
  align-items:center;justify-content:center;flex-wrap:wrap;
}
.nt-bar.on{display:flex;}
.nt-bar .t{font-size:.8125rem;letter-spacing:.1em;}
.nt-bar .t b{font-family:var(--latin);font-size:1.1875rem;font-style:italic;color:#f0c9c3;padding:0 .25em;}
.nt-bar .btn{background:#f7f3ea;color:#3d342d;border-color:#f7f3ea;padding:12px 24px;}
.nt-bar .btn:hover{background:#fff;border-color:#fff;color:#3d342d;}
body.has-ntbar{padding-bottom:82px;}

/* ---- スマホ ---- */
@media(max-width:900px){
  .page-nametag .nt-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));}
  .page-nametag .nt-grid.sm{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));}
  .page-nametag .nt-fonts{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}
  .page-nametag .nt-pick dl{grid-template-columns:6.5em 1fr;}
}
@media(max-width:420px){
  .page-nametag .nt-grid{grid-template-columns:repeat(3,1fr);}
  .page-nametag .nt-grid.sm{grid-template-columns:repeat(4,1fr);}
  .page-nametag .nt-fonts{grid-template-columns:1fr;}
}

/* 2026-11-08 わんこ着せ替え：お名前の入力と、3Dの首もとに重ねるタグ */
.nt-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:14px 0 6px;}
.nt-name span{font-size:.8125rem;letter-spacing:.08em;}
.nt-name input{flex:1 1 180px;max-width:280px;font:inherit;font-size:1rem;padding:9px 12px;border:1px solid var(--line,#d9cfc2);background:#fff;}
/* 2026-11-08 実物のネームタグに合わせた（田中様のご指示）：首の縫い目から下がる、細長い平たい綿のテープ（色＝選んだヒモ）。
   お名前は糸の色で、テープの長い向きに縦に入る。金具や台紙はなく、影もつけない。2026-11-09 二回り大きく（約1.5倍） */
.kz-tag3d{position:relative;width:0;height:0;pointer-events:none;--cord:#ddded2;--thread:#6b5a52;transition:opacity .2s;}
.kz-tag3d[hidden]{display:none;}
/* 2026-11-09 1枚の帯ではなく、二つ折りのループにした（田中様のご指示）。上の端を首の縫い目に縫い込み、下は折り山。
   裏側（.bk）を少し右下にずらして見せ、下の丸い折り山で輪になっているのが分かるようにする。影・グラデーションは使わない */
.kz-tag3d .lbl{position:absolute;left:0;top:-4px;transform:translateX(-50%) rotate(-4deg) scale(calc(var(--tag-s,1) * .75));transform-origin:50% 0;
  display:block;width:26px;}
/* 2026-11-09 少し大きかったので、全体を 0.82 倍に（田中様のご指示） */
.kz-tag3d .bk{position:absolute;left:5px;right:-6px;top:0;bottom:-11px;background:var(--cord);
  border:1px solid rgba(70,60,52,.3);border-top:0;border-radius:0 0 12px 12px;overflow:hidden;}
.kz-tag3d .bk::after{content:"";position:absolute;inset:0;background:rgba(70,60,52,.2);}
.kz-tag3d .bk::before{content:"";position:absolute;left:2px;right:3px;bottom:3px;height:9px;border-radius:0 0 10px 10px;
  background:rgba(70,60,52,.38);z-index:1;}
.kz-tag3d .fr{position:relative;display:flex;justify-content:center;align-items:flex-start;
  width:26px;height:70px;overflow:hidden;padding:11px 0 10px;box-sizing:border-box;background:var(--cord);border:1px solid rgba(70,60,52,.22);border-top:0;border-radius:0 0 4px 4px;}
.kz-tag3d .st{position:absolute;left:1px;right:-5px;top:4px;border-top:1px dashed rgba(70,60,52,.5);}
.kz-tag3d .nm{position:relative;display:block;writing-mode:vertical-rl;color:var(--thread);font-size:15px;line-height:1;letter-spacing:.06em;font-weight:700;white-space:nowrap;}

/* 2026-11-08 お名前の見本は薄いグレー。付けるのに空のときの案内 */
.nt-name input::placeholder{color:#b9b2aa;opacity:1;}
.nt-name-err{margin:4px 0 0;font-size:.8125rem;color:var(--accent);font-weight:700;}
.nt-name-err[hidden]{display:none;}