/* ===========================================================
   Shearty Nut's Record - Price Sheet
   画面表示: ダーク（サイトと同一トーン）＋スタジオ写真ヘッダー
   印刷時  : 白地・写真なしに自動切り替え
   組み込み時は :root 〜 @media print までをサイトのCSSへ、
   <section class="snr-price"> 以下をテンプレートへ移植。
   ヘッダー写真は --snr-hero（images/studio-hero.jpg）
   =========================================================== */

:root{
  --snr-bg:        #0B0A0D;
  --snr-text:      #F4F3F7;
  --snr-text-sub:  #B4B2A9;
  --snr-text-body: #D3D1C7;
  --snr-text-mute: #888780;
  --snr-accent:    #AFA9EC;
  --snr-glow-a:    #3C2E7A;
  --snr-glow-b:    #1B2E6B;
  --snr-rule:      rgba(244,243,247,0.50);
  --snr-hairline:  rgba(244,243,247,0.18);

  --snr-hero: url("../images/studio-hero.jpg");

  --snr-font-sans: var(--font-jp);
  --snr-font-mono: var(--font-mono);
}

/* ---------- 本体 ---------- */
.snr-price{
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
  width:100%;
  max-width:720px;
  aspect-ratio:1 / 1.414;          /* A4縦 */
  background:var(--snr-bg);
  color:var(--snr-text);
  font-family:var(--snr-font-sans);
  font-weight:400;
  line-height:normal;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
}

/* ---------- ヘッダー写真 ---------- */
.snr-hero{
  position:relative;
  flex:none;
  height:37%;
  background-color:var(--snr-glow-a);
  background-image:var(--snr-hero), linear-gradient(120deg, var(--snr-bg), var(--snr-glow-a));
  background-size:cover;
  background-position:52% 44%;
  display:flex;
  align-items:flex-end;
  padding:clamp(28px, 5.4%, 56px);
  box-sizing:border-box;
}
/* 写真の下端をページ地色へ溶かす */
.snr-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(11,10,13,0) 52%, var(--snr-bg) 100%);
  pointer-events:none;
}
.snr-hero > *{ position:relative; z-index:1; }

/* ---------- 中身 ---------- */
.snr-inner{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:0 clamp(28px, 5.4%, 56px) clamp(28px, 5.4%, 56px);
  box-sizing:border-box;
}

/* ---------- 見出し ---------- */
.snr-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-family:var(--snr-font-mono);
  font-size:clamp(9px, 1.35vw, 11px);
  letter-spacing:.22em;
  color:var(--snr-accent);
}
.snr-eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--snr-accent);
  flex:none;
}
.snr-title{
  margin:12px 0 0;
  font-size:clamp(20px, 3.5vw, 30px);
  font-weight:500;
  letter-spacing:-.01em;
}

/* ---------- ブロック共通 ---------- */
.snr-block{ margin-top:clamp(18px, 3.2%, 32px); }
.snr-block--lead{ border-top:1px solid var(--snr-rule); padding-top:16px; }
.snr-block--sub { border-top:.5px solid var(--snr-hairline); padding-top:16px; }

.snr-label{
  font-family:var(--snr-font-mono);
  font-size:clamp(9px, 1.3vw, 11px);
  letter-spacing:.2em;
  color:var(--snr-text-sub);
}
.snr-price-main{
  margin:8px 0 0;
  font-size:clamp(28px, 5.2vw, 46px);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.1;
}
.snr-price-sub{
  margin:8px 0 0;
  font-size:clamp(18px, 3.2vw, 28px);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.1;
}
.snr-unit{
  font-size:.45em;
  color:var(--snr-text-sub);
  font-weight:400;
}
.snr-note{
  margin:8px 0 0;
  font-size:clamp(11px, 1.7vw, 14px);
  line-height:1.8;
  color:var(--snr-text-sub);
}

/* ---------- 工程リスト ---------- */
.snr-list{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:grid;
  gap:9px;
  font-size:clamp(11px, 1.7vw, 14px);
  color:var(--snr-text-body);
}

/* ---------- 下部 ---------- */
.snr-foot{ margin-top:auto; padding-top:20px; }
.snr-callout{
  border-left:2px solid var(--snr-accent);
  padding:2px 0 2px 12px;
  font-size:clamp(11px, 1.7vw, 14px);
  line-height:1.75;
  color:var(--snr-text-body);
}
.snr-meta{
  margin:16px 0 0;
  font-family:var(--snr-font-mono);
  font-size:clamp(9px, 1.25vw, 11px);
  letter-spacing:.12em;
  color:var(--snr-text-mute);
}

/* Site integration: keep the approved sheet and surrounding site layout separate. */
.snr-page {
  padding:calc(var(--header-h) + var(--space-lg)) var(--container-pad) var(--space-xl);
}
@media screen and (max-width:600px) {
  .snr-price { aspect-ratio:auto; overflow:visible; }
  .snr-hero { height:clamp(180px, 55vw, 300px); }
  .snr-foot { margin-top:32px; }
}

/* ---------- 印刷：白地・写真なし ---------- */
@media print{
  @page{ size:A4 portrait; margin:0; }
  body.snr-price-page{ margin:0; padding:0; background:#fff; display:block; }
  .snr-price-page > :not(main){ display:none !important; }
  .snr-price-page main, .snr-page{ margin:0; padding:0; }
  .snr-price{
    width:210mm; height:297mm; max-width:none; aspect-ratio:auto;
    background:#fff;
    color:#16151A;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .snr-hero{
    height:auto;
    background:none;
    display:block;
    padding:22mm 20mm 0;
  }
  .snr-hero::after{ display:none; }
  .snr-inner{ padding:0 20mm 22mm; }
  .snr-eyebrow{ color:#534AB7; }
  .snr-eyebrow::before{ background:#7F77DD; }
  .snr-block--lead{ border-top-color:#16151A; border-top-width:2px; }
  .snr-block--sub { border-top-color:#D3D1C7; }
  .snr-label,
  .snr-note,
  .snr-unit{ color:#5F5E5A; }
  .snr-list,
  .snr-callout{ color:#444441; }
  .snr-callout{ border-left-color:#7F77DD; }
  .snr-meta{ color:#888780; }
}