/* KIZASHI WORKS — カッティングマットの上で、サイトの幅を測って確かめる */
:root {
  --mat: #1F5A48;
  --mat-deep: #16453A;
  --mat-line: rgba(255, 255, 255, .075);
  --mat-line-strong: rgba(255, 255, 255, .16);
  --mark: #F3D34A;
  --paper: #F4F5F2;
  --ink: #121714;
  --ink-2: #505955;
  --ink-3: #85908A;
  --rule: #D6DBD7;
  --on-mat: #EDF3EF;
  --on-mat-2: rgba(237, 243, 239, .72);
  --sans: "Murecho", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.85 var(--sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.mat, .stage, .viewer {
  background-color: var(--mat);
  background-image:
    linear-gradient(var(--mat-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-line-strong) 1px, transparent 1px),
    linear-gradient(var(--mat-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mat-line) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -1px -1px;
}

/* ヘッダー */
.masthead {
  position: absolute; inset: 0 0 auto; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px clamp(20px, 4vw, 56px); color: var(--on-mat);
}
.wordmark {
  display: inline-flex; gap: .7em; color: inherit; text-decoration: none;
  font: 600 13px/1 var(--mono); font-variation-settings: "wdth" 82; letter-spacing: .16em;
}
.wordmark span { color: var(--on-mat-2); }
.masthead__meta { margin: 0; font: 400 12px/1 var(--mono); color: var(--on-mat-2); letter-spacing: .06em; }
.masthead :focus-visible { outline-color: var(--mark); }

/* ヒーロー：マットの上で幅を変えられる実物 */
.stage {
  position: relative; min-height: min(100svh, 980px);
  display: grid; grid-template-columns: minmax(300px, 30fr) minmax(0, 70fr); align-items: center;
  gap: clamp(28px, 4vw, 64px); padding: 88px clamp(20px, 4vw, 56px) 56px; color: var(--on-mat);
}
.stage :focus-visible { outline-color: var(--mark); }
.stage__copy { container-type: inline-size; min-width: 0; }
.eyebrow { margin: 0 0 18px; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; color: var(--on-mat-2); }
.hero-title { margin: 0; font-weight: 700; font-size: clamp(32px, 10.4cqi, 70px); line-height: 1.24; letter-spacing: -.01em; font-feature-settings: "palt"; }
.hero-title span { display: block; white-space: nowrap; }
.lead { margin: 26px 0 30px; max-width: 34em; font-size: 15px; line-height: 2; color: var(--on-mat-2); }
.to-works {
  display: inline-flex; align-items: center; gap: 10px; color: var(--on-mat); text-decoration: none;
  font: 500 13px/1 var(--mono); letter-spacing: .04em; padding-bottom: 6px; border-bottom: 1px solid var(--mark);
}
.to-works::after { content: "↓"; color: var(--mark); }

.demo { margin: 0; min-width: 0; }
.demo__desk { position: relative; height: clamp(360px, 64svh, 700px); }

/* 実物を入れる枠（幅は CSS px、表示は縮小） */
.frame {
  position: absolute; top: 0; left: 0; border-radius: var(--radius); background: #fff; overflow: visible;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -40px rgba(0, 0, 0, .6);
}
.frame iframe {
  position: absolute; top: 0; left: 0; border: 0; border-radius: var(--radius); background: #fff; transform-origin: 0 0;
}
.frame__clip { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius); }
.frame__handle {
  position: absolute; top: 50%; right: -26px; width: 16px; height: 84px; margin-top: -42px; padding: 0;
  border: 0; border-radius: 8px; background: var(--mark); cursor: ew-resize; touch-action: none;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5);
}
.frame__handle::before {
  content: ""; position: absolute; inset: 26px 5px;
  background: repeating-linear-gradient(0deg, rgba(18, 23, 20, .55) 0 2px, transparent 2px 6px);
}
.frame.is-dragging iframe { pointer-events: none; }
.frame__label {
  position: absolute; left: 0; bottom: -26px; font: 400 11px/1 var(--mono); color: var(--on-mat-2); letter-spacing: .04em; white-space: nowrap;
}

/* 定規と数値。数字の欄は最大の字幅に合わせた固定幅にして、数字が伸縮しても定規の位置が動かないようにする */
.ruler {
  --readout-size: clamp(28px, 3.2vw, 46px);
  display: grid; grid-template-columns: calc(var(--readout-size) * 3.6 + 26px) minmax(0, 1fr); align-items: end; gap: 22px; margin-top: 22px;
}
.readout { display: inline-flex; align-items: baseline; gap: 6px; color: var(--mark); font-family: var(--mono); line-height: 1; white-space: nowrap; }
.readout b {
  font-weight: 500; font-size: var(--readout-size, clamp(28px, 3.2vw, 46px)); letter-spacing: -.02em; min-width: 4ch; text-align: right;
  font-variation-settings: "wdth" var(--wdth, 100); transition: font-variation-settings .12s linear;
}
.readout span { font-size: 12px; color: var(--on-mat-2); }
.scale { position: relative; height: 38px; }
.scale__tick { position: absolute; bottom: 0; width: 1px; height: 8px; background: var(--on-mat-2); }
.scale__tick--major { height: 16px; background: var(--on-mat); }
.scale__tick--mark { height: 22px; background: var(--mark); }
.scale__label { position: absolute; bottom: 24px; transform: translateX(-50%); font: 400 10.5px/1 var(--mono); color: var(--on-mat-2); white-space: nowrap; }
.scale__cursor { position: absolute; bottom: 0; width: 2px; height: 30px; margin-left: -1px; background: var(--mark); }

/* 一覧 */
.works { max-width: 1480px; margin: 0 auto; padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 56px) 96px; }
.works__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px 40px; align-items: end; margin-bottom: 44px; }
.works__title { margin: 0; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; font-weight: 700; }
.works__note { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--ink-2); }
.chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; border-top: 1px solid var(--rule); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.chip b { font: 500 11px/1 var(--mono); color: var(--ink-3); }
.chip:hover { border-color: var(--ink-3); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip[aria-pressed="true"] b { color: var(--mark); }

.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 64px 32px; }
.card { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
picture { display: contents; }
.card__media, .card__screen, .card__title { display: block; }
.empty { grid-column: 1 / -1; padding: 40px 0; color: var(--ink-2); }
.viewer[open] { animation: viewer-in .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes viewer-in { from { opacity: 0; transform: scale(.985); } }
.card__media { position: relative; margin-bottom: 30px; }
.card__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: #E2E6E2; box-shadow: 0 0 0 1px var(--rule); }
.card__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card__scroll { position: absolute; inset: 0 0 auto; opacity: 0; transition: opacity .25s ease; }
.card__scroll img { height: auto; object-fit: initial; transform: translateY(0); transition: transform var(--pan-time, 6s) linear; }
.card:hover .card__scroll, .card:focus-visible .card__scroll { opacity: 1; }
.card:hover .card__scroll img, .card:focus-visible .card__scroll img { transform: translateY(var(--pan, 0)); }
.card__phone {
  position: absolute; right: 16px; bottom: -24px; width: 21%; aspect-ratio: 390 / 844; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 12px; background: var(--ink); box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .45);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.card__phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.card:hover .card__phone { transform: translateY(-8px); }
.card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 6px; font: 400 11.5px/1.5 var(--mono); color: var(--ink-3); }
.card__title { margin: 0 0 10px; font-size: 17px; line-height: 1.55; font-weight: 600; }
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tag { padding: 2px 9px; border: 1px solid var(--rule); border-radius: 999px; font-size: 11.5px; color: var(--ink-2); }
.tag--hidden { border-color: var(--ink); color: var(--ink); }

.footer { max-width: 1480px; margin: 0 auto; padding: 28px clamp(20px, 4vw, 56px) 56px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--ink-3); }
.footer p { margin: 0; }
.footer__copy { margin-top: 6px !important; font-family: var(--mono); font-size: 11.5px; }

/* ビューア */
.viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: var(--on-mat); overflow: hidden; }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.viewer::backdrop { background: rgba(8, 18, 14, .6); }
.viewer :focus-visible { outline-color: var(--mark); }
.viewer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px clamp(14px, 2.4vw, 28px); background: rgba(22, 69, 58, .92); border-bottom: 1px solid var(--mat-line-strong); }
.viewer__heading { min-width: 0; margin-right: auto; }
.viewer__kind { margin: 0; font: 400 11px/1.5 var(--mono); color: var(--on-mat-2); letter-spacing: .04em; }
.viewer__title { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs, .presets { display: flex; flex-wrap: wrap; gap: 6px; }
.tab, .preset, .seg button, .icon-btn, .text-btn {
  height: 32px; padding: 0 12px; border: 1px solid var(--mat-line-strong); border-radius: 8px; background: transparent;
  color: var(--on-mat-2); font-size: 12.5px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap;
}
.tab:hover, .preset:hover, .icon-btn:hover, .text-btn:hover, .seg button:hover { color: var(--on-mat); border-color: var(--on-mat-2); }
.tab[aria-selected="true"], .preset[aria-pressed="true"], .seg button[aria-pressed="true"] { background: var(--on-mat); border-color: var(--on-mat); color: var(--mat-deep); }
.preset b { margin-right: 6px; font: 500 12px/1 var(--mono); }
.seg { display: inline-flex; gap: 4px; }
.viewer__actions { display: flex; gap: 6px; }
.text-btn--close { border-color: var(--on-mat-2); color: var(--on-mat); }
.viewer__stage { position: relative; min-height: 0; overflow: hidden; }
.viewer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 12px clamp(14px, 2.4vw, 28px) 16px; border-top: 1px solid var(--mat-line-strong); background: rgba(22, 69, 58, .92); }
.readout--viewer b { font-size: 26px; }
.about { margin-left: auto; font-size: 13px; color: var(--on-mat-2); max-width: 520px; }
.about summary { cursor: pointer; font: 500 12px/32px var(--mono); list-style: none; }
.about summary::after { content: " +"; color: var(--mark); }
.about[open] summary::after { content: " −"; }
.about__body { position: absolute; right: clamp(14px, 2.4vw, 28px); bottom: 70px; width: min(520px, calc(100vw - 28px)); max-height: 60vh; overflow: auto; padding: 18px 20px; border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); white-space: pre-line; line-height: 1.9; }
.about__body h3 { margin: 0 0 8px; font-size: 14px; }
.about__body p { margin: 0 0 10px; }

@media (max-width: 960px) {
  .stage { grid-template-columns: minmax(0, 1fr); min-height: auto; padding-top: 84px; }
  .demo__desk { height: clamp(300px, 58svh, 560px); }
  .works__head { grid-template-columns: minmax(0, 1fr); }
  .viewer__bar { gap: 8px 10px; }
  .seg button { padding: 0 10px; }
}
@media (max-width: 600px) {
  .frame__handle { right: -20px; width: 14px; }
  .ruler { grid-template-columns: minmax(0, 1fr); }
  .viewer__actions .text-btn[data-open] { display: none; }
  .about { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card__scroll img, .card__phone, .readout b { transition: none !important; }
}

/* 定規そのものも、ドラッグ・クリック・矢印キーで幅を変えられる */
.scale { cursor: ew-resize; touch-action: none; border-radius: 4px; }
.scale:focus-visible { outline: 2px solid var(--mark); outline-offset: 6px; }
.frame.is-compact .frame__handle { display: none; }

/* 狭い画面のビューア：並べる表示と右端のつまみは使わず、よく使う幅のボタンで切り替える */
@media (max-width: 719px) {
  .viewer__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .viewer__heading { margin-right: 0; }
  .viewer__actions { grid-column: 2; grid-row: 1; }
  .tabs { grid-column: 1 / -1; }
  .seg, .viewer .frame__handle, .viewer__actions .icon-btn { display: none; }
  .presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .presets::-webkit-scrollbar { display: none; }
  .viewer__foot { gap: 10px 16px; }
}