/* ===== Theme tokens ===== */
.tb-awning{
  --gap:24px; --radius:16px; --border:#e5e7eb; --ink:#111; --muted:#6b7280; --bg:#fafafa;
  --acc:#ff9a00;            
  --acc-ink:#fff;
  --accent: #ff9a00;          
  --accent-ink: #fff;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}
.tb-awning{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg)}
.tb-awning *{box-sizing:border-box}

/* ===== Header ===== */
.tb-awning__header{
  display:flex; justify-content:space-between; align-items:center;
  padding: 18px 16px;
}
.tb-awning__header h1{
  margin:0; font-weight:700;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: .02em; display:flex; align-items:center; gap:.55rem;
}
.tb-awning__header h1::before{
  content:""; width:10px; height:10px; border-radius:9999px; background:var(--acc);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent);
}

/* ===== Layout ===== */
.tb-awning__main{max-width:1120px;margin:0 auto;padding:20px 16px;display:grid;grid-template-columns:1fr;gap:var(--gap)}
@media(min-width:1024px){.tb-awning__main{grid-template-columns:1.6fr 1fr}}

.tb-preview{display:flex;flex-direction:column;}
.tb-selected{
  display:flex;gap: 8px 12px;flex-wrap:wrap;font-size:13px;color:#444;
}
.tb-selected strong{font-weight:600;color:#111}
.tb-selected span{
  background: #fff; border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  font-size: 15px;
}

/* ===== Cards ===== */
.tb-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:10px;
  box-shadow: var(--shadow); transition: box-shadow .18s ease;
}
.tb-card:hover{ box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.tb-card--muted{opacity:.7}
.tb-card h2{
  font-size: 18px; margin: 0 0 20px; padding-left: 15px; position: relative;
  font-weight:600;
}
.tb-card h2::before{
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 1.2em; border-radius: 3px; background: var(--accent);
}

/* ===== Buttons ===== */
.tb-btn{
  border: 1px solid var(--border);
  background: #fff;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  color:var(--ink);
}
.tb-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.tb-btn:active{ transform: translateY(0); box-shadow: 0 2px 8px rgba(0,0,0,.08) inset; }
.tb-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

.tb-btn--active{ 
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.tb-btn--active:hover{ filter:brightness(.95) }
.tb-btn--ghost{ background:#fff; color:var(--ink) }
.tb-btn--ghost:hover{ background:#f4f7fb }
.tb-btn--icon{ display:inline-flex; align-items:center; gap:.5rem }
.tb-btn--print{ background:linear-gradient(180deg, color-mix(in srgb, var(--acc) 92%, #000 0%), var(--acc)); color:var(--acc-ink); border-color:var(--acc) }
.tb-btn--print::before{ content:"🖨️" }

/* Headerの印刷ボタン（見た目アップ） */
.tb-awning__header .tb-btn{
  background: #f8fafc;
}
.tb-awning__header .tb-btn:hover{
  background: var(--accent); color: var(--accent-ink);
}
.tb-awning__header .tb-btn::before{
  content: "🖨"; margin-right: .5em;
}

/* 2列ボタン・色パレット */
.tb-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tb-grid-2 .tb-btn{ width: 100%; }

.tb-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:520px){.tb-colors{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ===== Color chips ===== */
.tb-color{display:flex;flex-direction:column;align-items:center;gap:8px}
.tb-chip{
  width:112px;height:56px;border-radius:14px;border:1px solid var(--border);outline:none;cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  
  /* ストライプ品質向上 - アンチエイリアシング最適化 */
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
  
  /* チップ内のストライプを縦方向に統一 */
  --chip-stripe-angle: 90deg;
}
.tb-chip:hover{
  transform: scale(1.04) translateZ(0);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.tb-chip.is-active{
  box-shadow: 0 0 0 2px var(--accent) inset, 0 8px 18px rgba(0,0,0,.12);
  transform: scale(1.03) translateZ(0);
}
.tb-color__name{font-size:12px;color:#111;text-align: center;}

/* ===== Preview canvas ===== */
.tb-canvas{
  position: relative;
  --tile-size: 320px;
  
  /* 画像テクスチャ用 */
  background-image: var(--fabric-image, none);
  background-size: var(--tile-size) var(--tile-size);
  background-repeat: repeat;
  background-position: center;
  
  /* 単色・グラデーション用 */
  background: var(--fabric, transparent);
  
  /* 画像がある場合は背景色より優先 */
  background-blend-mode: normal;
  
  /* ストライプ描画品質向上 - 最高品質設定 */
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: background;
}
.tb-canvas__base{width:100%; height:100%; pointer-events:none; position: relative; z-index: 3;}

.tb-canvas__overlay{
  position:absolute;left:6%;top:9%;width:78%;height:38%;
  border-radius:4px;box-shadow:0 6px 12px rgba(0,0,0,.25);
  transition: background-color .2s ease, background .2s ease, opacity .2s ease;
}
.tb-note{text-align: right; font-size:12px; margin-bottom: 5px; margin-top: 2px;}

/* ===== Awning fabric layers (マスク対応) ===== */
.fabric{
  position:absolute; 
  inset:0; 
  width:100%; 
  height:100%;
  background: var(--fabric); 
  opacity: 0.95;
  transition: background-color .2s ease, background .2s ease, opacity .2s ease;
  pointer-events: none;
  
  /* レンダリング最適化 - ストライプのギザギザを軽減 */
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: background, clip-path;
}

/* マスクはCSS変数で切替（JSが --mask-top / --mask-valance を設定） */
.fabric--top{
  -webkit-mask: var(--mask-top) center/cover no-repeat;
          mask: var(--mask-top) center/cover no-repeat;
  /* マスクが設定されていない場合は非表示にする */
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
}

.fabric--valance{
  -webkit-mask: var(--mask-valance) center/cover no-repeat;
          mask: var(--mask-valance) center/cover no-repeat;
  /* マスクが設定されていない場合は非表示にする */
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
}

/* アニメーション効果 */
.tb-tint-pulse {
  animation: tintPulse 0.3s ease-out;
}

@keyframes tintPulse {
  0% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.001); }
  100% { opacity: 1; transform: scale(1); }
}

/* ===== Print ===== */
@media print{
  header{display: none !important;}
  footer{display: none !important;}
  .tb-awning__header .tb-btn, .tb-panel, .tb-note { display:none !important }
  .tb-awning__main{ grid-template-columns:1fr !important }
  .tb-canvas{ border:none }
  .tb-selected{margin-top: 20px;}
  .tb-awning__header{padding-left: 0;}
  .tb-awning__header h1{gap: 0;}
  .tb-awning__header h1::before {display: none;}
  .tb-awning__header h1 br{display: none !important;}
}

.pc-hidden{display: none;}
@media (max-width: 767px){
  .pc-hidden{display: block;}
  .tb-awning__header{padding: 18px 0 0px;}
  .tb-note{text-align: left; font-size: 10px; margin-bottom: 10px;}
  .tb-card h2{margin-bottom: 15px;}
  .tb-card{padding: 20px 15px; margin-bottom: 20px;}
  .tb-chip{width: 135px; height: 65px;}
}