@charset "UTF-8";
/* ==========================================================================
   TOKIARI — FASHION IMAGE CHART (SHIRT)
   静的サイト用スタイル。カタログ誌面（P.31）の配色・書体感を踏襲しています。
   ========================================================================== */

:root{
  --bg:        #cccacd;   /* 誌面の地色 */
  --bg-deep:   #c3c1c4;
  --ink:       #1c1c1e;   /* 線画・本文 */
  --ink-mute:  #5d5c60;
  --line:      #ffffff;   /* 軸の白線 */
  --accent:    #ffffff;
  --card:      rgba(255,255,255,.34);
  --shadow:    0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);

  --serif: "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;

  --header-h: 58px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
  display:flex;
  flex-direction:column;
  min-height:100svh;
}

/* ---------- header ---------- */
.site-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px calc(12px) 16px;
  padding-top:calc(12px + env(safe-area-inset-top));
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
  border-bottom:1px solid rgba(255,255,255,.5);
}
.site-header__title h1{
  margin:0;
  font-family:var(--serif);
  font-size:15px;
  font-weight:400;
  letter-spacing:.22em;
  line-height:1.2;
  white-space:nowrap;
}
.site-header__sub{
  margin:3px 0 0;
  font-family:var(--serif);
  font-size:10px;
  letter-spacing:.22em;
  color:var(--ink-mute);
}

/* ---------- tabs ---------- */
.tabs{ display:flex; gap:4px; flex:0 0 auto; }
.tab{
  appearance:none;
  border:1px solid rgba(28,28,30,.28);
  background:transparent;
  color:var(--ink);
  font-family:var(--serif);
  font-size:11px;
  letter-spacing:.16em;
  padding:7px 13px;
  border-radius:999px;
  cursor:pointer;
  transition:background .18s, color .18s, border-color .18s;
}
.tab:hover{ border-color:rgba(28,28,30,.55); }
.tab.is-active{ background:var(--ink); color:#f2f1f2; border-color:var(--ink); }
.tab:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ---------- views ---------- */
main{ flex:1 1 auto; min-height:0; display:flex; }
.view{ display:none; flex:1 1 auto; min-height:0; width:100%; }
.view.is-active{ display:flex; }

/* ---------- map ---------- */
.stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  touch-action:none;             /* 独自のピンチ／パンを使うため */
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  cursor:grab;
}
.stage.is-panning{ cursor:grabbing; }
#chart{ display:block; width:100%; height:100%; }

/* SVG 内の要素 */
/* vector-effect により、拡大しても軸線の太さは一定（地図の道路と同じ考え方） */
.axis-line{ stroke:var(--line); stroke-width:.8; vector-effect:non-scaling-stroke; }
.axis-rule{ stroke:var(--line); stroke-width:.8; vector-effect:non-scaling-stroke; }
.lbl{
  font-family:var(--serif);
  fill:var(--ink);
  letter-spacing:.9px;
}
.lbl--major{ font-size:6.2px; letter-spacing:1.1px; }
.lbl--band { font-size:5.2px; letter-spacing:.85px; fill:#4a494c; }
.lbl--jp   { font-size:4.4px; letter-spacing:.5px; fill:#4a494c; font-family:var(--serif); }
.lbl--name { font-size:5.8px; letter-spacing:1px; }

.shirt path{ fill:var(--ink); }
.shirt path.shirt__mask{ fill:var(--bg); }   /* 軸線をヌく図形（誌面と同じ処理） */
.shirt__hit{ fill:transparent; }
.shirt__ring{
  fill:none; stroke:rgba(28,28,30,.0); stroke-width:1; vector-effect:non-scaling-stroke; rx:3;
  transition:stroke .18s;
}
.shirt{ cursor:pointer; }
.shirt:hover .shirt__ring,
.shirt:focus-visible .shirt__ring{ stroke:rgba(28,28,30,.5); }
.shirt:focus{ outline:none; }
.shirt:focus-visible .shirt__hit{ fill:rgba(255,255,255,.28); }
.shirt:active .shirt__hit{ fill:rgba(255,255,255,.34); }

/* ---------- zoom controls ---------- */
.zoom{
  position:absolute;
  right:calc(12px + env(safe-area-inset-right));
  bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:6px;
}
.zoom__btn{
  width:40px; height:40px;
  display:grid; place-items:center;
  border:1px solid rgba(28,28,30,.18);
  border-radius:50%;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--ink);
  font-size:17px; line-height:1;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:background .15s, transform .1s;
}
.zoom__btn:hover{ background:rgba(255,255,255,.85); }
.zoom__btn:active{ transform:scale(.94); }
.zoom__btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* ---------- hint ---------- */
.hint{
  position:absolute;
  left:calc(12px + env(safe-area-inset-left));
  bottom:calc(12px + env(safe-area-inset-bottom));
  max-width:min(calc(100% - 84px), 330px);
  padding:9px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-size:10.5px; line-height:1.65;
  color:#3a393c;
  text-align:left;
  box-shadow:var(--shadow);
  transition:opacity .5s;
  pointer-events:none;
}
.hint.is-hidden{ opacity:0; }

/* ---------- list ---------- */
.view--list{ overflow-y:auto; -webkit-overflow-scrolling:touch; flex-direction:column; }
.list-note{
  margin:0 auto;
  padding:16px calc(16px + env(safe-area-inset-left)) 0 calc(16px + env(safe-area-inset-right));
  max-width:1080px;
  width:100%;
  font-size:11px; line-height:1.7; color:#4a494c;
}
.cards{
  list-style:none;
  margin:0 auto;
  padding:12px calc(16px + env(safe-area-inset-right)) 28px calc(16px + env(safe-area-inset-left));
  width:100%;
  max-width:1080px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:12px;
}
.cards > li{ display:flex; }
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  text-decoration:none;
  color:inherit;
  background:var(--card);
  border:1px solid rgba(255,255,255,.55);
  border-radius:10px;
  padding:14px 12px 12px;
  transition:transform .16s, background .16s, box-shadow .16s;
}
.card:hover{ background:rgba(255,255,255,.6); transform:translateY(-2px); box-shadow:var(--shadow); }
.card:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.card__fig{ height:112px; display:grid; place-items:center; margin-bottom:10px; }
.card__fig svg{ height:100%; width:auto; max-width:100%; color:var(--ink); }
.card__fig svg path{ fill:currentColor; }
.card__name{
  font-family:var(--serif);
  font-size:12px; letter-spacing:.14em;
  text-align:center;
  margin:0 0 8px;
}
.card__tags{
  display:flex; justify-content:center; align-items:flex-start; gap:5px; flex-wrap:wrap;
  margin:0 0 10px;
  min-height:20px;
}
.tag{
  font-family:var(--serif);
  font-size:9px; letter-spacing:.1em;
  padding:3px 7px;
  border:1px solid rgba(28,28,30,.25);
  border-radius:999px;
  color:#4a494c;
  white-space:nowrap;
}
.meter{ margin-top:auto; padding-top:2px; }
.meter__scale{
  position:relative;
  height:1px;
  background:rgba(255,255,255,.9);
  margin:0 2px 6px;
}
.meter__dot{
  position:absolute; top:50%;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:var(--ink);
}
.meter__ends{
  display:flex; justify-content:space-between;
  font-family:var(--serif);
  font-size:8px; letter-spacing:.08em;
  color:#5d5c60;
}
.card__go{
  margin-top:10px;
  text-align:center;
  font-size:10px; letter-spacing:.08em;
  color:#3a393c;
}
.card__go::after{ content:" →"; }

/* ---------- footer ---------- */
.site-footer{
  flex:0 0 auto;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.5);
  font-size:10.5px; line-height:1.6;
  color:#4a494c;
  text-align:center;
}
.site-footer p{ margin:0; }
.site-footer a{ color:#3a393c; }

@media (max-width:400px){
  .site-header__title h1{ font-size:13px; letter-spacing:.16em; }
  .cards{ grid-template-columns:repeat(auto-fill, minmax(132px,1fr)); }
  .card__fig{ height:96px; }
}
@media (min-width:900px){
  :root{ --header-h:64px; }
  .site-header{ padding:16px 28px; }
  .site-header__title h1{ font-size:17px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}