/* =========================================================
   まちプリ｜デザインスタジオ — studio.html と統一したテーマ
   - paper / ink / mono / serif の道具立てに刷新
   - アイコン/絵文字ゼロ、エディトリアル＋アパレル/コスメ寄せ
   - ターゲット：若年層・女性。スマホ優先 6:4
   ========================================================= */

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

:root{
  /* paper / ink */
  --paper:#FAF7F1;
  --paper-2:#F2EDE3;
  --paper-3:#FBF9F4;
  --ink:#1A1714;
  --ink-mid:#5C544A;
  --ink-soft:#9A9085;
  --line:#E5DECF;
  --line-soft:#EFEAE0;
  /* accent (studio) */
  --yellow:#F5C518;
  --lime:#C9D541;
  --orange:#EE8A1E;
  --green:#7BA84E;
  --red:#C83E3E;
  /* design page だけ追加：ほんのりピンク (oklch指定でくすみ) */
  --blush:oklch(0.86 0.045 18);
  --blush-soft:oklch(0.94 0.022 18);
  --blush-ink:oklch(0.45 0.08 20);
  /* type */
  --serif:'Shippori Mincho',serif;
  --sans:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  /* metrics */
  --r-card:3px;
  --r-input:4px;
  --r-pill:100px;
  --shadow-sm:0 1px 0 rgba(26,23,20,.04), 0 6px 14px -6px rgba(26,23,20,.10);
  --shadow-md:0 1px 0 rgba(26,23,20,.04), 0 14px 30px -10px rgba(26,23,20,.18);
}

html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  min-height:100vh;
  font-size:14px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.005em;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

.hidden{display:none !important}

/* ===== Reusable atoms ===== */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mid);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--ink-mid)}
.h-serif{font-family:var(--serif);font-weight:700;letter-spacing:.005em;line-height:1.3}

/* ===========================================================
   HEADER (nav)
   =========================================================== */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(250,247,241,.94);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1300px;margin:0 auto;
  padding:0 24px;height:64px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{
  display:flex;align-items:center;gap:12px;
  font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:.01em;color:var(--ink);
}
.logo img{height:40px;width:auto;display:block}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-name{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--ink)}
.logo-sub{font-family:var(--mono);font-size:9px;color:var(--ink-soft);letter-spacing:.18em;margin-top:4px;font-weight:400}

.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mid);
  padding:8px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:transparent;
  transition:.2s color,.2s border-color,.2s background;
}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink);background:var(--paper-2)}

/* ===========================================================
   STEP BAR (desktop) / mobile progress
   =========================================================== */
.step-bar{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.mobile-step-bar{display:none}
.step-bar-inner{
  max-width:1300px;margin:0 auto;
  padding:0 24px;height:54px;
  display:flex;align-items:center;gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
}
.step-bar-inner::-webkit-scrollbar{display:none}
.step{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);
  cursor:default;
  transition:color .2s,background .2s;
  white-space:nowrap;
}
.step .step-num{
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink-soft);
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:0;
}
.step.active{color:var(--ink);background:var(--paper-2)}
.step.active .step-num{
  background:var(--ink);color:var(--paper);border-color:var(--ink);
}
.step.done{color:var(--ink);cursor:pointer}
.step.done .step-num{background:transparent;color:var(--ink);border-color:var(--ink)}
.step.done:hover{background:var(--paper-2)}
.step-arrow{color:var(--ink-soft);font-family:var(--mono);font-size:12px;padding:0 2px}

/* ===========================================================
   MAIN GRID
   =========================================================== */
main{
  max-width:1300px;margin:0 auto;
  padding:32px 28px 80px;
  display:grid;grid-template-columns:440px 1fr;gap:32px;
  align-items:start;
}

/* ===== Left panels ===== */
.panel-left{display:flex;flex-direction:column;gap:18px;min-width:0}
.step-panel{
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:32px 28px;
}
.step-panel.hidden{display:none}

.panel-title{
  font-family:var(--serif);font-weight:700;
  font-size:24px;line-height:1.35;letter-spacing:.005em;
  color:var(--ink);
  margin-bottom:6px;
}
.panel-title-no{
  display:block;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:10px;font-weight:500;
}
.panel-desc{
  font-size:13px;color:var(--ink-mid);line-height:1.85;
  margin-bottom:22px;
}
.panel-desc + .panel-desc{margin-top:-12px}
.form-char-note{
  font-size:11px;color:var(--ink-mid);
  background:var(--paper-2);
  border-left:2px solid var(--yellow);
  padding:8px 12px;
  margin:-10px 0 18px;
  font-family:var(--mono);letter-spacing:.04em;line-height:1.7;
}

/* ===========================================================
   STEP 0 ランディング
   =========================================================== */
.top-flow-guide{
  background:var(--paper);
  border:1px solid var(--line);
  padding:20px 22px;margin-bottom:24px;
  border-radius:var(--r-card);
}
.flow-guide-steps{
  display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
}
.fgs-step{
  display:flex;align-items:flex-start;gap:12px;
  flex:1;min-width:120px;padding:6px 0;
}
.fgs-num{
  width:28px;height:28px;flex-shrink:0;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:500;
  background:var(--ink);color:var(--paper);
  letter-spacing:0;
}
.fgs-text{display:flex;flex-direction:column;gap:2px;line-height:1.5}
.fgs-text strong{font-family:var(--serif);font-weight:700;font-size:14px;color:var(--ink);letter-spacing:.005em}
.fgs-text span{font-family:var(--mono);font-size:10px;color:var(--ink-soft);letter-spacing:.08em}
.fgs-arrow{
  color:var(--ink-soft);font-family:var(--mono);font-size:14px;
  align-self:center;flex-shrink:0;padding:0 8px;
}

.flow-guide-note{
  font-size:12px;color:var(--ink-mid);line-height:1.85;
  margin:14px 0 0;
  padding:10px 14px;
  background:var(--paper-2);
  border-left:2px solid var(--yellow);
}
.flow-guide-note mark{
  background:linear-gradient(transparent 60%,var(--yellow) 60%,var(--yellow) 92%,transparent 92%);
  color:inherit;padding:0 .12em;font-weight:700;
}

.top-start-section{
  text-align:center;padding:36px 16px 24px;
  border-top:1px dashed var(--line);
  margin-top:8px;
}
.btn-top-start{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--ink);color:var(--paper);
  font-family:var(--serif);font-weight:700;font-size:18px;letter-spacing:.04em;
  padding:18px 44px;
  border-radius:var(--r-pill);
  transition:transform .2s,box-shadow .2s;
}
.btn-top-start:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(26,23,20,.3)}
.top-start-copy{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin:14px 0 8px;
}
.top-design-code-note{
  font-size:12px;color:var(--ink-mid);
  background:var(--paper-2);
  display:inline-block;padding:8px 16px;
  border:1px solid var(--line);
  margin-top:8px;
}
.top-design-code-note strong{color:var(--ink);font-weight:700}

.top-order-section{
  border-top:1px dashed var(--line);
  padding-top:24px;margin-top:24px;
}
.btn-top-order-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);
  padding:14px 18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  transition:.2s background,.2s border-color;
}
.btn-top-order-toggle::after{
  content:"+";font-size:16px;color:var(--ink-soft);font-family:var(--mono);
  transition:transform .2s;
}
.btn-top-order-toggle:hover{background:var(--paper-2);border-color:var(--ink)}
.top-order-form{
  margin-top:12px;padding:18px 18px 16px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);
}
.top-order-form.hidden{display:none}
.top-order-note{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--ink-soft);margin-bottom:12px;
}
.top-order-field{margin-bottom:10px}
.top-order-input{width:100%}
.btn-top-order{
  width:100%;
  background:var(--ink);color:var(--paper);
  padding:12px 20px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;letter-spacing:.04em;
  transition:.2s background,.2s transform;
}
.btn-top-order:hover{background:#000;transform:translateY(-1px)}

.top-inline-panel{
  margin-top:16px;padding:16px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);
}
.top-inline-panel.hidden{display:none}

/* ===========================================================
   STEP 1 / 2 印刷種別・印刷面カード
   =========================================================== */
.print-type-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin-top:8px;
}
.print-type-card,
.sides-card{
  cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  gap:24px;
  padding:24px 22px 22px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  text-align:left;
  min-height:160px;
  position:relative;
  transition:.25s border-color,.25s background,.25s transform;
}
.print-type-card:hover,
.sides-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.print-type-card.selected,
.sides-card.selected{
  border-color:var(--ink);
  background:var(--paper-2);
  box-shadow:inset 0 0 0 1px var(--ink);
}
.print-type-card.selected::after,
.sides-card.selected::after{
  content:"";
  position:absolute;top:14px;right:14px;
  width:8px;height:8px;border-radius:50%;
  background:var(--ink);
}
.print-type-icon{display:none}
.print-type-name{
  font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.2;color:var(--ink);
  letter-spacing:.005em;
}
.print-type-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mid);
  padding:0;background:transparent;border:none;
  font-weight:500;
}
.print-type-badge::before{
  content:"";width:18px;height:1px;background:var(--ink-mid);
}
.badge-mono,.badge-color{background:transparent;color:var(--ink-mid)}

/* ===========================================================
   コードヒント (緑/黄ボックス → モノトーン化)
   =========================================================== */
.code-step-hint{
  margin-top:24px;padding:14px 16px;
  background:var(--paper-2);
  border-left:2px solid var(--yellow);
  font-size:12px;color:var(--ink-mid);line-height:1.8;
}
.code-step-hint strong{color:var(--ink);font-weight:700}

/* ===========================================================
   STEP 3 コード入力
   =========================================================== */
.step3-code-restore{
  display:flex;flex-direction:column;gap:0;
  margin-bottom:24px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
}
.step3-code-block{
  padding:16px 18px;
  border-bottom:1px solid var(--line);
}
.step3-code-block:last-child{border-bottom:none}
.step3-code-label{
  font-family:var(--serif);font-weight:700;font-size:14px;color:var(--ink);
  letter-spacing:.005em;margin-bottom:4px;
}
.step3-code-hint-text{
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--ink-soft);line-height:1.7;margin-bottom:10px;
}
.step3-code-row{display:flex;gap:8px;align-items:stretch}
.step3-code-row .design-code-input,
.step3-code-row .repeat-code-input{
  flex:1;min-width:0;
  padding:10px 12px;
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:var(--r-input);
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--ink);
  outline:none;transition:.2s border-color;
}
.step3-code-row .design-code-input:focus,
.step3-code-row .repeat-code-input:focus{border-color:var(--ink);background:#fff}

/* ===========================================================
   CATEGORY TABS / TEMPLATES
   =========================================================== */
.category-tabs{
  display:flex;gap:6px;margin-bottom:18px;
  overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none;
}
.category-tabs::-webkit-scrollbar{display:none}
.cat-tab{
  flex-shrink:0;
  padding:7px 14px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-mid);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;
  white-space:nowrap;
  transition:.18s color,.18s border-color,.18s background;
}
.cat-tab:hover{color:var(--ink);border-color:var(--ink)}
.cat-tab.active{
  background:var(--ink);color:var(--paper);border-color:var(--ink);
}

.thumb-color-row{
  display:flex;align-items:center;gap:14px;
  padding:12px 0 14px;
  border-bottom:1px solid var(--line);
  margin-bottom:14px;
  flex-wrap:wrap;
}
.thumb-color-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;flex-shrink:0;
}
.thumb-color-dots{display:flex;gap:8px;flex-wrap:wrap}
.thumb-color-dot{
  width:24px;height:24px;border-radius:50%;
  border:1px solid var(--line);
  cursor:pointer;outline:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-2);
  font-family:var(--mono);font-size:10px;color:var(--ink-mid);
  transition:transform .15s,border-color .15s,box-shadow .15s;
  position:relative;
}
.thumb-color-dot:hover{transform:scale(1.12)}
.thumb-color-dot.selected{
  border-color:var(--ink);
  box-shadow:0 0 0 2px var(--paper-3) inset;
}
.thumb-color-dot[data-tc=""]{
  background:var(--paper);
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.thumb-color-dot[data-tc=""]::before{
  content:"";position:absolute;inset:3px;border-radius:50%;
  background:
    conic-gradient(from 210deg,
      #E89B6B 0deg,
      #C8B968 72deg,
      #8FA76E 144deg,
      #6B8FA8 216deg,
      #B57FA8 288deg,
      #E89B6B 360deg);
  filter:saturate(.85);
  opacity:.95;
}
.thumb-color-dot[data-tc=""]::after{
  content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:8px;height:8px;border-radius:50%;
  background:var(--paper);
  box-shadow:0 0 0 1px var(--line);
}
.thumb-color-dot[data-tc=""]:hover::before{filter:saturate(1) hue-rotate(15deg);transition:filter .3s,transform .4s;transform:rotate(20deg)}
.thumb-color-dot[data-tc=""].selected{
  border-color:var(--ink);
  box-shadow:0 0 0 2px var(--paper-3) inset;
}
.thumb-color-random-icon{display:none !important}

/* curated palette dot — 縦半分割でbase/accent */
.thumb-palette-dot{
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--line);
  cursor:pointer;outline:none;padding:0;background:transparent;
  position:relative;overflow:hidden;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.thumb-palette-dot::before,
.thumb-palette-dot::after{
  content:"";position:absolute;top:0;bottom:0;width:50%;
}
.thumb-palette-dot::before{left:0;background:var(--pal-base)}
.thumb-palette-dot::after{right:0;background:var(--pal-accent)}
.thumb-palette-dot:hover{transform:scale(1.1)}
.thumb-palette-dot.selected{
  border-color:var(--ink);
  box-shadow:0 0 0 2px var(--paper-3) inset, 0 0 0 3px var(--ink);
}

/* template grid */
.templates-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  max-height:520px;overflow-y:auto;padding-right:4px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.templates-grid::-webkit-scrollbar{width:4px}
.templates-grid::-webkit-scrollbar-track{background:transparent}
.templates-grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}

.template-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;
  transition:.2s border-color,.2s transform,.25s box-shadow;
}
.template-card:hover{
  border-color:var(--ink);
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.template-card.selected{
  border-color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink), var(--shadow-sm);
}
.thumb-wrap{
  background:linear-gradient(180deg,#ECE3D0 0%,#F0E9D9 100%);
  overflow:hidden;line-height:0;
  padding:14px 14px 12px;
  position:relative;
}
.template-thumb{position:relative;z-index:1;box-shadow:0 1px 0 rgba(0,0,0,.04),0 8px 18px -8px rgba(26,23,20,.16)}
.template-thumb{display:block;width:100%;height:auto}
.template-label{
  padding:10px 12px;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;
  background:var(--paper);
}
.template-name{
  font-family:var(--serif);font-weight:700;font-size:13px;color:var(--ink);letter-spacing:.005em;
}
.template-desc{display:none}

/* ===========================================================
   FORM
   =========================================================== */
form{display:flex;flex-direction:column;gap:14px}
.form-row{margin:0}
.form-row.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;
  display:flex;align-items:center;gap:8px;
}
.form-group input,
.form-group textarea,
.form-group select{
  width:100%;
  padding:10px 12px;
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:var(--r-input);
  font-family:var(--sans);font-size:14px;color:var(--ink);
  outline:none;transition:.2s border-color,.2s background;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
  border-color:var(--ink);background:#fff;
}
.form-group textarea{resize:vertical;min-height:64px;line-height:1.7}
.form-group.input-overflow input,
.form-group.input-overflow textarea{
  border-color:var(--red);background:#FBF1F1;
}
.form-group.input-overflow::after{
  content:"テキストが長すぎます — 短くしてください";
  display:block;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  color:var(--red);font-weight:500;
  margin-top:2px;
}

/* badges 必須 / 任意 */
.badge-req,.badge-opt{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  padding:2px 6px;border-radius:2px;
  text-transform:uppercase;font-weight:500;
  line-height:1.4;
}
.badge-req{background:transparent;color:var(--red);border:1px solid currentColor}
.badge-opt{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}

/* ===========================================================
   STEP 5 STYLE
   =========================================================== */
.style-block{margin-bottom:30px}
.style-block:last-child{margin-bottom:0}
.style-title{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mid);font-weight:500;
  margin-bottom:14px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}

/* fonts */
.font-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.font-option input{display:none}
.font-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:16px 6px;min-height:80px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  cursor:pointer;text-align:center;
  transition:.2s border-color,.2s background;
}
.font-card:hover{border-color:var(--ink)}
.font-option input:checked + .font-card{
  border-color:var(--ink);
  background:var(--paper-2);
  box-shadow:inset 0 0 0 1px var(--ink);
}
.font-sample{font-size:18px;line-height:1;color:var(--ink);white-space:nowrap}
.font-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-soft);
  text-transform:uppercase;font-weight:500;
}
.noto-sans{font-family:'Noto Sans JP',sans-serif}
.noto-serif{font-family:'Noto Serif JP',serif}
.zenmaru{font-family:'Zen Maru Gothic',sans-serif}
.shippori{font-family:'Shippori Mincho',serif}
.klee{font-family:'Klee One',sans-serif}

/* ---------- COLOR PRESETS ---------- */
.color-presets{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px 12px;
  padding:6px 0 18px;
}
.color-dot{
  position:relative;
  width:100%;aspect-ratio:1/1;
  border-radius:50%;
  border:1px solid transparent;
  cursor:pointer;outline:none;
  transition:transform .18s ease,box-shadow .2s;
}
.color-dot:hover{transform:scale(1.06)}
.color-dot.selected{
  box-shadow:0 0 0 1.5px var(--paper-3) inset, 0 0 0 1.5px var(--ink);
}
.color-dot[data-color="#ffffff"]{border-color:var(--line)}
.color-dot[data-color="#ffffff"].selected{
  box-shadow:0 0 0 1.5px var(--paper-3) inset, 0 0 0 1.5px var(--ink);
}

/* custom color */
.color-custom-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 0 0;border-top:1px dashed var(--line);
}
.color-custom-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;
}
.color-custom-wrap{display:flex;align-items:center;gap:10px}
.color-custom-wrap input[type="color"]{
  width:40px;height:32px;
  border:1px solid var(--line);
  border-radius:var(--r-input);
  padding:2px;cursor:pointer;background:var(--paper);
}
#colorHex{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--ink-mid);
  background:var(--paper-2);
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:2px;
}

/* ---------- PALETTE PAIRS (タロットカード風縦長) ---------- */
.palette-note{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--ink-mid);line-height:1.7;margin-bottom:14px;
}
.palette-pairs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:10px;
}
.palette-pair{
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;
  gap:0;padding:0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  cursor:pointer;text-align:left;font:inherit;color:inherit;
  overflow:hidden;
  aspect-ratio:3/4;
  position:relative;
  transition:.2s border-color,.2s transform,.25s box-shadow;
}
.palette-pair:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.palette-pair.selected{
  border-color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink), var(--shadow-sm);
}
.palette-pair.selected::after{
  content:"";position:absolute;top:8px;right:8px;
  width:6px;height:6px;border-radius:50%;background:var(--ink);
}
.palette-pair .pair-swatches{
  display:flex;flex-direction:column;
  flex:1;min-height:0;
  gap:0;
}
.palette-pair .pair-swatch{
  flex:1;width:100%;height:auto;border:none;border-radius:0;
}
.palette-pair .pair-swatch:first-child{flex:2}
.palette-pair .pair-name{
  display:block;
  padding:8px 10px;
  font-family:var(--serif);font-size:11px;font-weight:700;color:var(--ink);
  border-top:1px solid var(--line);
  background:var(--paper);
  line-height:1.3;letter-spacing:.005em;
}

/* ---------- font size sliders ---------- */
.slider-group{margin-bottom:14px}
.slider-label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:6px;font-weight:500;
}
.slider-val{
  font-family:var(--mono);font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;text-transform:none;
}
input[type="range"]{
  width:100%;
  -webkit-appearance:none;appearance:none;
  height:2px;background:var(--line);border-radius:2px;cursor:pointer;
  outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--ink);cursor:pointer;
  border:2px solid var(--paper-3);
  box-shadow:0 0 0 1px var(--ink);
}
input[type="range"]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:var(--ink);cursor:pointer;
  border:2px solid var(--paper-3);box-shadow:0 0 0 1px var(--ink);
}
.fz-reset-btn{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-mid);
  border:1px solid var(--line);
  padding:6px 12px;border-radius:var(--r-pill);
  background:transparent;cursor:pointer;
  margin-top:6px;
  transition:.2s color,.2s border-color;
}
.fz-reset-btn:hover{color:var(--ink);border-color:var(--ink)}

/* ===========================================================
   ORDER SUMMARY / CODE BOX
   =========================================================== */
.order-summary{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:18px 20px;margin-bottom:22px;
  display:flex;flex-direction:column;gap:0;
}
.summary-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:10px 0;border-bottom:1px dashed var(--line);
  font-size:13px;
}
.summary-row:last-child{border-bottom:none}
.summary-row span:first-child{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;
}
.summary-row span:last-child{
  font-family:var(--serif);font-weight:700;color:var(--ink);font-size:14px;
}

.design-code-box{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:20px 22px;margin-bottom:18px;
}
.design-code-display-row{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-input);
  padding:10px 14px;
}
.design-code-value{
  flex:1;
  font-family:var(--mono);font-size:14px;font-weight:500;
  color:var(--ink);letter-spacing:.08em;word-break:break-all;
}
.design-code-copy-btn{
  flex-shrink:0;
  padding:6px 14px;
  background:var(--ink);color:var(--paper);
  border-radius:var(--r-pill);
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;
  transition:.2s background;
}
.design-code-copy-btn:hover{background:#000}
.design-code-hint{
  font-size:12px;color:var(--ink-mid);line-height:1.85;margin:14px 0 6px;
}
.design-code-note{
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  color:var(--ink-soft);line-height:1.7;
}

/* ===========================================================
   STORES link / order box
   =========================================================== */
.stores-link-box{
  margin-top:20px;padding:28px 22px 26px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-card);text-align:center;
  position:relative;overflow:hidden;
}
.stores-link-box::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--blush) 0%,var(--yellow) 50%,var(--lime) 100%);
}
.stores-link-box::after{
  content:"NEXT  ／  STORES";
  display:block;font-family:var(--mono);
  font-size:10px;letter-spacing:.22em;color:var(--ink-soft);
  margin-bottom:14px;font-weight:500;
}
.btn-stores-link{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--paper);
  padding:16px 32px;border-radius:var(--r-pill);
  font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.04em;
  transition:transform .2s,box-shadow .2s;
}
.btn-stores-link::after{
  content:"";width:18px;height:1px;background:var(--paper);transition:width .25s;
}
.btn-stores-link:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(26,23,20,.3)}
.btn-stores-link:hover::after{width:28px}

.stores-order-box{
  background:var(--paper);
  border:1px solid var(--line);
  border-left:2px solid var(--orange);
  border-radius:var(--r-card);
  padding:20px 22px;margin:22px 0 18px;
}
.stores-order-title{
  font-family:var(--serif);font-weight:700;font-size:15px;color:var(--ink);
  margin-bottom:6px;
  display:flex;align-items:center;gap:10px;
}
.required-badge{
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red);background:transparent;
  padding:2px 6px;border:1px solid currentColor;border-radius:2px;font-weight:500;
}
.stores-order-hint{
  font-size:12px;color:var(--ink-mid);line-height:1.85;margin-bottom:10px;
}
.stores-order-link{
  color:var(--ink);border-bottom:1px solid var(--line);
  font-weight:700;
}
.stores-order-link:hover{border-color:var(--ink)}
.stores-order-input{
  width:100%;padding:11px 14px;
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:var(--r-input);
  font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--ink);
  outline:none;transition:.2s border-color;
  box-sizing:border-box;
}
.stores-order-input:focus{border-color:var(--ink);background:#fff}
.stores-order-error{
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  color:var(--red);margin-top:6px;
}

.step7-notice{
  margin-bottom:18px;padding:14px 18px;
  background:var(--paper-2);
  border-left:2px solid var(--orange);
  font-size:12px;color:var(--ink-mid);line-height:1.85;
}
.step7-notice p+p{margin-top:6px}
.step7-notice strong{color:var(--ink);font-weight:700}

/* ===========================================================
   BUTTONS / NAV
   =========================================================== */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ink);color:var(--paper);
  padding:12px 26px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;letter-spacing:.04em;
  transition:.2s background,.2s transform,.2s box-shadow;
}
.btn-primary:hover{background:#000;transform:translateY(-1px);box-shadow:0 8px 22px -8px rgba(26,23,20,.3)}
.btn-primary:active{transform:translateY(0)}
.btn-large{width:100%;padding:16px 28px;font-size:14px}

.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;color:var(--ink);
  border:1px solid var(--line);
  padding:11px 24px;border-radius:var(--r-pill);
  font-size:13px;font-weight:500;letter-spacing:.02em;
  transition:.2s color,.2s border-color,.2s background;
}
.btn-secondary:hover:not(:disabled){border-color:var(--ink);background:var(--paper-2)}
.btn-secondary:disabled{opacity:.35;cursor:not-allowed}

.nav-buttons{
  display:flex;justify-content:space-between;gap:14px;
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:16px 20px;
}
#prevBtn::before{content:"〈";margin-right:6px;font-family:var(--mono);color:var(--ink-mid)}
#nextBtn::after{content:"〉";margin-left:8px;font-family:var(--mono)}

/* ===========================================================
   RIGHT: PREVIEW PANEL
   =========================================================== */
.panel-right{
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:32px 28px 28px;
  position:sticky;top:84px;
}
.preview-header{
  display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.preview-header .panel-title{
  font-size:18px;margin:0;
  flex:1;min-width:0;
}
.preview-badge{
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mid);
  background:var(--paper-2);
  border:1px solid var(--line);
  padding:4px 10px;border-radius:var(--r-pill);
  font-weight:500;
}
.preview-badge::before{content:"●";color:var(--green);font-size:8px;margin-right:6px;vertical-align:1px}
.preview-badge-tap{display:none}

.preview-stage{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-bottom:18px;
}
.card-shadow-wrap{
  border-radius:0;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 22px 50px -10px rgba(26,23,20,.18),0 6px 16px rgba(26,23,20,.08);
  display:inline-block;max-width:100%;background:#fff;
}
#previewCanvas{display:block;width:100%;max-width:560px;height:auto}

.card-size-note{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--ink-soft);
}
.preview-info{display:flex;flex-direction:column;gap:8px}
.info-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.info-chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mid);
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:5px 12px;font-weight:500;
}
.chip-desc{
  font-family:var(--mono);font-size:10px;color:var(--ink-soft);letter-spacing:.04em;
}
.resolution-note,
.accent-note{
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  color:var(--ink-soft);line-height:1.7;margin-top:6px;
}
.accent-note.hidden{display:none}

/* preview side toggle */
.preview-side-toggle{
  display:flex;gap:0;margin:0 0 12px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:3px;background:var(--paper);
  width:fit-content;
}
.preview-side-btn{
  padding:6px 14px;border-radius:var(--r-pill);
  background:transparent;color:var(--ink-mid);
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;cursor:pointer;transition:.2s background,.2s color;
}
.preview-side-btn.active{background:var(--ink);color:var(--paper)}
.preview-side-btn:hover:not(.active){color:var(--ink)}

/* preview notice */
.preview-notice{display:none}
.preview-notice.show{display:inline-flex}
.preview-notice-inline.show{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--red);
  background:var(--paper-2);
  border:1px solid var(--red);
  padding:4px 10px;border-radius:var(--r-pill);
  font-weight:500;
}
.preview-notice-mobile{display:none}

/* preview crop button */
.preview-crop-btn{
  position:absolute;top:50%;left:0;transform:translateY(-50%);
  background:var(--ink);color:var(--paper);
  padding:8px 4px;border-radius:2px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;
  cursor:pointer;z-index:6;
  writing-mode:vertical-rl;
  transition:.2s background;
}
.preview-crop-btn:hover{background:#000}
.preview-crop-btn.hidden{display:none !important}

/* ===========================================================
   LOGO UPLOAD
   =========================================================== */
.logo-section{
  margin-top:24px;padding-top:24px;
  border-top:1px solid var(--line);
}
.logo-section-title{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mid);font-weight:500;
  margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.optional-badge{
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);
  border:1px solid var(--line);
  padding:2px 6px;border-radius:2px;font-weight:500;
}
.logo-upload-area{
  border:1px dashed var(--line);
  border-radius:var(--r-card);
  padding:24px;text-align:center;
  background:var(--paper);
  transition:.2s border-color;
}
.logo-upload-area:hover{border-color:var(--ink)}
.btn-upload{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;
  border:1px solid var(--ink);
  border-radius:var(--r-pill);
  padding:10px 20px;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--ink);
  cursor:pointer;transition:.2s background,.2s color;
}
.btn-upload:hover{background:var(--ink);color:var(--paper)}
.upload-icon{font-family:var(--mono);font-weight:300;font-size:14px;line-height:1}
.upload-hint{
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  color:var(--ink-soft);margin-top:10px;line-height:1.7;
}
.grayscale-note{color:var(--orange);font-weight:500;margin-top:6px}

.logo-controls{margin-top:14px}
.logo-preview-row{
  display:flex;align-items:center;gap:14px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:12px 14px;margin-bottom:14px;
}
.logo-thumb{
  width:52px;height:52px;object-fit:contain;
  background:#fff;border:1px solid var(--line);
  flex-shrink:0;
}
.logo-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.logo-filename{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.logo-action-btns{display:flex;gap:6px;flex-wrap:wrap}
.btn-sm{
  padding:5px 12px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;
  border:1px solid var(--line);
  background:var(--paper);color:var(--ink);
  cursor:pointer;transition:.2s border-color,.2s background,.2s color;
}
.btn-sm-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-sm-primary:hover{background:#000}
.btn-sm-secondary:hover{border-color:var(--ink)}
.btn-sm-danger{color:var(--red);border-color:var(--red)}
.btn-sm-danger:hover{background:var(--red);color:var(--paper)}

.logo-drag-hint{
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  color:var(--ink-mid);
  background:var(--paper-2);
  border-left:2px solid var(--yellow);
  padding:8px 12px;line-height:1.7;
  margin-bottom:14px;
}

/* ===========================================================
   SIDE INDICATOR (両面)
   =========================================================== */
.side-indicator{
  position:sticky;top:64px;z-index:90;
  text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;
  padding:10px 16px;
  border-bottom:1px solid var(--line);
  background:var(--paper-2);color:var(--ink);
}
.side-indicator.side-front{background:var(--paper-2);color:var(--ink);border-bottom-color:var(--ink)}
.side-indicator.side-back{
  background:var(--blush-soft);color:var(--blush-ink);
  border-bottom:1px solid var(--blush);
}

/* ===========================================================
   MODAL
   =========================================================== */
.modal-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(26,23,20,.55);
  backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.modal-overlay.hidden{display:none}
.modal{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:36px 32px;max-width:480px;width:100%;
  max-height:90vh;overflow-y:auto;
  position:relative;
  box-shadow:var(--shadow-md);
}
.modal-close-btn{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);
  background:var(--paper);color:var(--ink-mid);
  font-family:var(--mono);font-size:14px;font-weight:300;
  display:flex;align-items:center;justify-content:center;line-height:1;
  cursor:pointer;transition:.2s background,.2s color;
}
.modal-close-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.modal-title{
  font-family:var(--serif);font-size:22px;font-weight:700;
  color:var(--ink);margin-bottom:24px;letter-spacing:.005em;
}

.modal-success{text-align:center;padding:48px 32px}
.success-icon{
  width:56px;height:56px;border-radius:50%;
  border:1px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
  font-family:var(--serif);font-size:24px;color:var(--ink);font-weight:300;
}
.modal-success h2{
  font-family:var(--serif);font-size:24px;font-weight:700;color:var(--ink);
  margin-bottom:14px;
}
.modal-success p{font-size:13px;color:var(--ink-mid);line-height:1.85;margin-bottom:8px}
.order-id-text{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--ink-soft);margin:18px 0 24px;
}
.order-id-text strong{color:var(--ink);font-weight:500}

.modal-confirm-box{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:36px 28px 24px;max-width:420px;width:100%;text-align:center;
  box-shadow:var(--shadow-md);
}
.modal-confirm-wide{max-width:540px;text-align:left;padding:32px 28px 24px}
.modal-confirm-wide .modal-confirm-title{text-align:center;margin-bottom:20px}
.modal-confirm-icon{display:none}
.modal-confirm-title{
  font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink);
  margin-bottom:14px;
}
.modal-confirm-body{
  font-size:13px;color:var(--ink-mid);line-height:1.95;margin-bottom:24px;
}
.modal-confirm-danger{
  display:inline-block;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--red);font-weight:500;
  border:1px solid var(--red);
  padding:3px 8px;margin:4px 0;
}
.modal-confirm-checklist{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.modal-confirm-item{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:8px;
  background:#f8f9fa;border:1px solid var(--line);
}
.modal-confirm-item-danger{background:#fef7f7;border-color:#e8c4c4}
.modal-confirm-item-danger strong{color:var(--red)}
.modal-confirm-num{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.modal-confirm-item-danger .modal-confirm-num{background:var(--red)}
.modal-confirm-item strong{display:block;font-size:13px;color:var(--ink);margin-bottom:4px}
.modal-confirm-item p{font-size:12px;color:var(--ink-mid);line-height:1.7;margin:0}
.modal-confirm-email{
  font-family:var(--mono);font-size:11px;letter-spacing:.03em;
  background:#eef2ff;padding:1px 6px;border-radius:3px;color:var(--ink);
}
.modal-confirm-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.modal-confirm-actions .btn-secondary,
.modal-confirm-actions .btn-primary{flex:1;min-width:130px}
.success-email-notice{
  background:#f0f7ff;border:1px solid #c5ddf5;border-radius:8px;
  padding:16px 20px;margin:18px 0 20px;text-align:center;
}
.success-email-sent{font-size:14px;font-weight:600;color:#2c7be5;margin:0 0 6px}
.success-email-detail{font-size:12px;color:var(--ink-mid);line-height:1.7;margin:0}

/* mismatch */
.mismatch-box{max-width:480px}
.mismatch-grid{
  display:grid;grid-template-columns:auto 1fr 1fr;
  border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;
  margin:16px 0;font-size:13px;
}
.mismatch-grid > div{
  padding:10px 14px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.mismatch-grid > div:nth-child(3n){border-right:none}
.mismatch-grid > div:nth-last-child(-n+3){border-bottom:none}
.mg-h{
  background:var(--paper-2);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;
}
.mg-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--ink);font-weight:500;justify-content:flex-start !important;
}
.mismatch-hint{font-size:13px;color:var(--ink-mid);margin-bottom:18px;line-height:1.85}

/* order items panel */
.order-items-panel{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:18px 20px;margin-bottom:16px;
}
.order-items-title{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mid);font-weight:500;
  margin-bottom:14px;
}
.order-item-radio{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 14px;
  border:1px solid var(--line);
  background:var(--paper-3);
  border-radius:var(--r-card);
  margin-bottom:8px;cursor:pointer;
  transition:.18s border-color,.18s background;
}
.order-item-radio:hover{border-color:var(--ink)}
.order-item-radio.selected{border-color:var(--ink);background:var(--paper-2)}
.order-item-radio input[type=radio]{margin-top:3px;flex-shrink:0;accent-color:var(--ink)}
.order-item-num{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;
  color:var(--ink-mid);
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:2px;padding:2px 8px;flex-shrink:0;align-self:center;
}
.order-item-detail{font-size:13px;color:var(--ink);line-height:1.7;flex:1}
.order-item-detail strong{color:var(--ink);font-weight:700}
.order-item-badge{
  display:inline-block;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;padding:2px 7px;border-radius:2px;margin-right:5px;
  border:1px solid var(--line);
}
.badge-mono-item{color:var(--ink-mid)}
.badge-color-item{color:var(--orange);border-color:var(--orange)}
.badge-single{color:var(--ink-mid)}
.badge-double{color:var(--blush-ink);border-color:var(--blush)}
.badge-submitted{color:var(--green);border-color:var(--green)}
.badge-pending{color:var(--orange);border-color:var(--orange)}
.order-item-radio.submitted{opacity:.5;background:var(--paper-2);cursor:default}
.order-item-radio.submitted:hover{border-color:var(--line)}
.order-items-fetching{font-family:var(--mono);font-size:11px;color:var(--ink-soft);padding:8px 0}

/* ===========================================================
   CROP MODAL
   =========================================================== */
.modal-crop{max-width:640px;padding:32px 28px}
.crop-hint{font-size:13px;color:var(--ink-mid);line-height:1.8;margin-bottom:14px}
.crop-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.crop-stage{
  background:var(--ink);border-radius:var(--r-card);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;min-height:200px;max-height:400px;
}
#cropCanvas{display:block;max-width:100%;cursor:crosshair}
.crop-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* ===========================================================
   FAB (mobile preview button) — sticky preview に置き換えるため通常は非表示
   =========================================================== */
.fab-preview{display:none}

/* ===========================================================
   CUSTOM PDF BANNER
   =========================================================== */
.custom-pdf-banner{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:20px;padding:14px 18px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  font-size:12px;color:var(--ink-mid);line-height:1.7;
}
.custom-pdf-banner-icon{display:none}
.custom-pdf-banner-text{flex:1;min-width:120px}
.custom-pdf-banner-link{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--ink);font-weight:700;
  border-bottom:1px solid var(--ink);
  white-space:nowrap;
}

/* ===========================================================
   PREVIEW FULLSCREEN
   =========================================================== */
.preview-fullscreen{
  position:fixed;inset:0;z-index:2000;
  background:rgba(26,23,20,.92);
  display:flex;align-items:center;justify-content:center;
  padding:16px;cursor:pointer;
}
.preview-fullscreen.hidden{display:none}
.preview-fullscreen canvas{
  max-width:100%;max-height:80vh;border-radius:0;
  box-shadow:0 18px 60px rgba(0,0,0,.5);pointer-events:none;background:#fff;
}
.preview-fullscreen-note{
  position:absolute;top:16px;left:16px;right:16px;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:rgba(250,247,241,.85);
  background:rgba(0,0,0,.35);
  padding:6px 10px;
}
.preview-fullscreen-hint{
  position:absolute;bottom:24px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(250,247,241,.6);
}
.preview-fullscreen-rotate{
  position:absolute;bottom:48px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:rgba(250,247,241,.5);display:none;
}
@media(orientation:portrait){
  .preview-fullscreen-rotate{display:block}
}

/* ===========================================================
   RESPONSIVE: TABLET
   =========================================================== */
@media (max-width: 1024px){
  main{grid-template-columns:380px 1fr;gap:24px;padding:24px 20px 60px}
  .panel-right{padding:24px 22px}
}

/* ===========================================================
   RESPONSIVE: MOBILE (≤768px) — スマホ優先
   ============================================================ */
@media (max-width: 768px),(max-width:1024px) and (orientation:portrait){
  .br-pc{display:none}
  body{font-size:15px;overflow-x:hidden}

  /* HEADER */
  .header-inner{padding:0 14px;height:54px}
  .logo{font-size:14px;gap:8px}
  .logo img{height:32px}
  .logo-name{font-size:14px}
  .logo-sub{display:none}
  .btn-ghost{padding:6px 12px;font-size:10px}

  /* STEP BAR — モバイルプログレス */
  .step-bar{
    position:sticky;top:54px;z-index:90;
    background:var(--paper);
  }
  .step-bar-inner{display:none}
  .mobile-step-bar{
    display:flex;flex-direction:column;gap:6px;
    padding:10px 14px;
  }
  .mobile-step-top{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
  }
  .mobile-step-label{
    font-family:var(--serif);font-size:14px;font-weight:700;
    color:var(--ink);letter-spacing:.005em;
    flex:1;min-width:0;
  }
  .mobile-step-back-btn{
    font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink);
    background:transparent;
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    padding:5px 12px;cursor:pointer;font-weight:500;flex-shrink:0;
  }
  .mobile-step-history{
    display:flex;flex-wrap:wrap;gap:6px;padding-top:6px;
  }
  .mobile-step-history.hidden{display:none}
  .mobile-step-history .history-item{
    font-family:var(--mono);font-size:10px;letter-spacing:.08em;
    color:var(--ink);
    border:1px solid var(--line);
    background:transparent;
    border-radius:var(--r-pill);
    padding:4px 10px;cursor:pointer;font-weight:500;
  }
  .mobile-step-track{
    width:100%;height:2px;background:var(--line);overflow:hidden;
  }
  .mobile-step-fill{
    height:100%;background:var(--ink);
    transition:width .35s ease;
  }

  /* MAIN: prevent overlap & fixed-preview on top */
  main{
    display:block;padding:0;
  }
  .panel-left{
    /* preview is fixed above with max-height ~308 → reserve 320 */
    padding:328px 14px 24px;gap:14px;
  }
  body.step-zero .panel-left{padding-top:14px}
  .step-panel{padding:22px 18px}
  .panel-title{font-size:21px}

  /* PRINT TYPE / SIDES */
  .print-type-grid{gap:10px}
  .print-type-card,.sides-card{padding:18px 16px 16px;min-height:130px;gap:14px}
  .print-type-name{font-size:18px}

  /* CATEGORY: シンプルな横スクロール。右側に広めのフェードと大きめのシェブロンで「続きがある」を明示 */
  .category-tabs-wrap{
    position:relative;
    margin-bottom:14px;
  }
  .category-tabs-wrap::after{
    content:"››";
    position:absolute;right:4px;top:50%;transform:translateY(-50%);
    font-family:var(--mono);font-size:18px;font-weight:300;color:var(--ink);
    letter-spacing:-2px;pointer-events:none;
    line-height:1;
  }
  .category-tabs{
    margin-bottom:0;flex-wrap:nowrap;
    padding:0 32px 4px 0;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 60px),rgba(0,0,0,.15) 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 60px),rgba(0,0,0,.15) 100%);
  }

  /* TEMPLATES grid: 2 行横スクロール（意図的なデザインを復元） */
  .templates-grid{
    display:grid;
    max-height:none;
    grid-template-columns:none;
    grid-template-rows:repeat(2,auto);
    grid-auto-flow:column;
    grid-auto-columns:46vw;
    gap:8px;
    overflow-x:auto;overflow-y:hidden;
    padding:0 0 6px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .templates-grid::-webkit-scrollbar{height:3px}
  .template-card{scroll-snap-align:start;min-width:0}
  .template-label{padding:8px 10px}
  .template-name{font-size:12px}
  .thumb-color-dot{width:22px;height:22px}
  .thumb-palette-dot{width:24px;height:24px}
  .thumb-color-dots{gap:6px}

  /* iOS auto-zoom 防止 */
  input,textarea,select{font-size:16px !important}

  /* FORM */
  .form-row.two-col{grid-template-columns:1fr;gap:8px}

  /* FONT options */
  .font-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .font-card{padding:12px 4px;gap:6px;min-height:70px}
  .font-sample{font-size:15px}
  .font-label{font-size:9.5px}

  /* COLOR presets — モバイルでも5列 */
  .color-presets{grid-template-columns:repeat(5,1fr);gap:14px 10px}

  /* PALETTE */
  .palette-pairs{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
  .palette-pair .pair-name{padding:6px 8px;font-size:10px}

  /* NAV BUTTONS */
  .nav-buttons{padding:14px 16px}

  /* RIGHT PREVIEW — 固定上部 */
  .panel-right{
    position:fixed;top:108px;left:0;right:0;
    z-index:80;
    padding:10px 14px 12px;
    border:none;border-radius:0;border-bottom:1px solid var(--line);
    background:var(--paper-3);
    margin:0;max-height:308px;overflow:hidden;
  }
  .panel-right.preview-hidden{display:none}
  /* preview header — モバイル用ミニマル化 */
  .preview-header{
    display:flex;
    margin-bottom:8px;padding-bottom:6px;
    border-bottom:none;
    gap:8px;
  }
  .preview-header .panel-title{display:none}
  .preview-badge{font-size:9px;padding:3px 8px}

  /* スマホ：「リアルタイム更新」も最小化 */
  .preview-stage{gap:6px;margin-bottom:6px}
  .card-shadow-wrap{
    box-shadow:0 8px 22px -10px rgba(26,23,20,.22),0 2px 6px rgba(26,23,20,.08);
  }
  #previewCanvas{max-width:min(72vw,300px);width:100%}
  .card-size-note{display:none}

  /* preview info — 最小限 */
  .preview-info{gap:4px}
  .info-row{gap:4px}
  .info-chip{font-size:9.5px;padding:3px 9px;letter-spacing:.06em}
  .chip-desc{font-size:10px}
  .resolution-note{display:none}

  /* preview side toggle */
  .preview-side-toggle{margin:0 0 6px}
  .preview-side-btn{padding:5px 10px;font-size:9px}

  /* preview notice：モバイル下端に被せ表示 */
  .preview-notice-inline{display:none !important}
  .preview-notice-mobile.show{
    display:block;position:absolute;left:0;right:0;bottom:0;
    background:var(--paper-2);
    border-top:1px solid var(--red);
    color:var(--red);
    font-family:var(--mono);font-size:10px;letter-spacing:.04em;
    text-align:center;padding:5px 12px;font-weight:500;z-index:4;
  }

  .preview-tap-hint{
    display:inline-block;position:absolute;top:50%;right:0;
    transform:translateY(-50%);
    background:var(--ink);color:var(--paper);
    font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
    padding:8px 4px;border-radius:2px;
    pointer-events:none;z-index:5;
    writing-mode:vertical-rl;
    box-shadow:0 1px 4px rgba(0,0,0,.18);
  }

  /* MODALS */
  .modal{padding:28px 22px}
  .modal-title{font-size:18px;margin-bottom:18px}
  .modal-overlay{padding:14px}

  /* design code / repeat code rows stack */
  .design-code-display-row{flex-direction:column;align-items:stretch;gap:8px;padding:12px}
  .design-code-copy-btn{width:100%}

  /* STORES order box */
  .stores-order-box{padding:16px}

  /* style blocks margin */
  .style-block{margin-bottom:24px}

  /* STEP 0 buttons mobile */
  .btn-top-start{font-size:16px;padding:16px 32px;width:100%;max-width:340px}
  .top-start-section{padding:24px 12px 16px}
  .top-flow-guide .flow-guide-steps{flex-direction:column;gap:8px}
  .top-flow-guide .fgs-arrow{align-self:center;transform:rotate(90deg);padding:0}

  /* Mobile FAB hide */
  .fab-preview{display:none !important}
}

/* small phones */
@media (max-width: 400px){
  .step{padding:4px 8px;font-size:10px}
  .print-type-grid{grid-template-columns:1fr}
  .form-row.two-col{grid-template-columns:1fr}
  .step-panel{padding:18px 14px}
  .palette-pairs{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
  .color-presets{grid-template-columns:repeat(5,1fr);gap:10px}
}

/* ===========================================================
   PORTRAIT PHONES ONLY
   =========================================================== */
@media (max-width:1024px) and (orientation:portrait){
  .preview-header{display:none}
  #previewCanvas{max-width:min(72vw,400px)}
  .panel-right{max-height:360px}
  .panel-left{padding-top:400px}
}

/* ===========================================================
   LANDSCAPE PHONES
   =========================================================== */
@media (orientation:landscape) and (max-height:500px){
  body{overflow-x:hidden}
  .step-bar{position:sticky;top:54px;z-index:90;background:var(--paper)}
  main{display:block;max-width:none;padding:16px}
  .panel-left{padding-right:calc(45vw + 12px);gap:12px;padding-left:0;padding-top:14px}
  body.step-zero .panel-left{padding-right:0}
  .panel-right{
    position:fixed;top:108px;right:0;bottom:0;left:auto;
    width:45vw;max-width:420px;
    z-index:80;overflow-y:auto;
    padding:14px 16px;margin:0;
    border-radius:0;border:none;border-left:1px solid var(--line);
    background:var(--paper-3);max-height:none;
  }
  .panel-right.preview-hidden{display:none}
  .preview-header{display:flex;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .preview-header .panel-title{display:block;font-size:14px}
  .preview-stage{gap:8px;margin-bottom:8px}
  #previewCanvas{max-width:100%}
  .templates-grid{
    grid-template-columns:none;grid-template-rows:repeat(2,auto);
    grid-auto-flow:column;grid-auto-columns:28vw;
    max-height:none;overflow-x:auto;overflow-y:hidden;
    gap:8px;padding-bottom:6px;
    scroll-snap-type:x proximity;
  }
  .templates-grid::-webkit-scrollbar{height:3px}
  .template-card{scroll-snap-align:start}
  .preview-tap-hint{display:none}
  .preview-badge-tap{
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
    background:var(--ink);color:var(--paper);
    padding:4px 10px;border-radius:var(--r-pill);font-weight:500;
  }
  .preview-notice-inline.show{display:inline-flex !important}
  .preview-notice-mobile{display:none !important}
  .resolution-note{display:block}
}

/* ===========================================================
   FLOW GUIDE (Step 6/7) — collapsed/expanded
   =========================================================== */
.flow-guide{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;
  margin-bottom:18px;
}
.flow-guide-toggle{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:14px 18px;
  background:transparent;border:none;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);font-weight:500;text-align:left;
}
.flow-guide-toggle > span:first-child{display:none} /* 📋 アイコン非表示 */
.flow-guide-toggle:hover{background:var(--paper-2)}
.flow-guide-chevron{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-soft);transition:transform .3s}
.flow-guide.collapsed .flow-guide-chevron{transform:rotate(180deg)}
.flow-guide-body{
  padding:0 18px 18px;
  max-height:480px;opacity:1;
  transition:max-height .35s ease,opacity .3s ease,padding .3s ease;
  overflow:hidden;
}
.flow-guide.collapsed .flow-guide-body{max-height:0;opacity:0;padding-bottom:0}
.flow-guide-close{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--ink-soft);
  background:none;border:none;cursor:pointer;
  text-decoration:underline;padding:0;margin-top:10px;
}
.flow-guide-close:hover{color:var(--ink)}
.flow-guide.hidden{display:none}

/* preview tap-hint default off */
.preview-tap-hint{display:none}

/* color override note (white outline) for #ffffff dot */
.color-dot[data-color="#ffffff"]{
  background:#fff !important;
  outline:1px solid var(--line);
  outline-offset:-2px;
}