@import url("../fonts/noto-sans-jp.css");

:root {
  --accent: #d76670;
  --accent-deep: #bd4654;
  --accent-soft: #f6dddd;
  --beige: #fbf6e9;
  --ink: #161616;
  --muted-ink: #59514d;
  --photo-border: #ded8d3;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #dedede;
  color: var(--ink);
  font-family: "Noto Sans JP Variable", "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.screen-note {
  margin: 12px auto;
  color: #444;
  font-size: 14px;
  text-align: center;
}

.variant-panel {
  width: min(210mm, calc(100% - 24px));
  margin: 16px auto 0;
  padding: 18px;
  background: #fff;
  border: 1px solid #d5cec9;
  border-radius: 12px;
  box-shadow: 0 3px 14px rgb(0 0 0 / 10%);
}

.variant-panel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.variant-panel-heading h2,
.variant-panel-heading p {
  margin: 0;
}

.variant-panel-heading h2 {
  font-size: 20px;
}

.variant-panel-heading > p {
  color: #6c625d;
  font-size: 12px;
}

.variant-kicker {
  margin-bottom: 3px !important;
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
}

.variant-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.variant-controls label {
  display: grid;
  gap: 5px;
  color: #3d3734;
  font-size: 13px;
  font-weight: 700;
}

.variant-controls select {
  width: 100%;
  min-height: 44px;
  padding: 8px 34px 8px 10px;
  background: #fff;
  border: 1px solid #bbb1ab;
  border-radius: 7px;
  color: #161616;
  font: inherit;
}

.variant-controls select:disabled {
  background: #eeeae7;
  color: #847a74;
}

.preview-viewport {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.flyer-scale {
  width: max-content;
  margin: 0 auto;
}

.flyer-page {
  width: 210mm;
  height: 297mm;
  margin: 0 auto 24px;
  padding: 4mm 11mm 3mm;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 22px rgb(0 0 0 / 20%);
}

.flyer-page.is-pdf-capture {
  margin: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}

.flyer-header h1 {
  height: 20mm;
  margin: 0;
  font-size: 56pt;
  font-weight: 900;
  letter-spacing: .15mm;
  line-height: 20mm;
  text-align: center;
  white-space: nowrap;
}

.title-rule {
  width: 180mm;
  height: .65mm;
  margin: 1.2mm auto 0;
  background: var(--accent);
}

.missing-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180mm;
  height: 10mm;
  margin: 1.4mm auto 0;
  overflow: hidden;
  font-size: 12pt;
  font-weight: 750;
  letter-spacing: .02mm;
  line-height: 4.6mm;
  text-align: center;
}

.missing-meta-text {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.missing-date,
.missing-region,
.missing-tail {
  white-space: nowrap;
}

.flyer-page.is-meta-long .missing-meta {
  font-size: 10.7pt;
  line-height: 4.4mm;
}

.photo-frame {
  overflow: hidden;
  background: #f7f4ed;
  border: .3mm solid var(--photo-border);
  border-radius: 2.2mm;
}

.photo-art,
.photo-output {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.photo-frame[data-ratio="1:1"] .photo-art,
.photo-frame[data-ratio="1:1"] .photo-output {
  width: 66.6667%;
  background: #f7f5f3;
}

.photo-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  padding: 7mm;
  background: #f7f4ed;
  color: #1f5c5a;
}

.photo-placeholder::before {
  position: absolute;
  inset: 4mm;
  border: .35mm dashed rgb(31 92 90 / 30%);
  border-radius: 2mm;
  content: "";
}

.photo-placeholder-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #1f5c5a;
  text-align: center;
}

.photo-placeholder-icon {
  display: grid;
  place-items: center;
  width: 18mm;
  height: 18mm;
  margin-bottom: 3mm;
  border-radius: 50%;
  background: #e6efed;
}

.photo-placeholder-icon svg {
  display: block;
  width: 11mm;
  height: 11mm;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.photo-placeholder-content strong {
  font-size: 13pt;
  font-weight: 780;
  letter-spacing: .06mm;
  line-height: 1.35;
}

.photo-placeholder-help {
  margin-top: 1.5mm;
  color: #607574;
  font-size: 8pt;
  font-weight: 600;
  letter-spacing: .02mm;
  line-height: 1.45;
}

.photo-secondary .photo-placeholder {
  padding: 4mm;
}

.photo-secondary .photo-placeholder::before {
  inset: 2.5mm;
  border-radius: 1.5mm;
}

.photo-secondary .photo-placeholder-icon {
  width: 10mm;
  height: 10mm;
  margin-bottom: 1.4mm;
}

.photo-secondary .photo-placeholder-icon svg {
  width: 6.5mm;
  height: 6.5mm;
}

.photo-secondary .photo-placeholder-content strong {
  font-size: 9.5pt;
}

.photo-secondary .photo-placeholder-help {
  max-width: 52mm;
  margin-top: .8mm;
  font-size: 6.4pt;
}

.photo-output[hidden] {
  display: none;
}

.photo-frame.has-photo .photo-placeholder {
  display: none;
}

.photo-output canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.photo-main {
  width: 180mm;
  height: 120mm;
  margin: 2mm auto 0;
}

.identity-grid {
  display: grid;
  grid-template-columns: 72mm 105mm;
  gap: 3mm;
  width: 180mm;
  height: 48mm;
  margin: 3mm auto 0;
}

.photo-secondary {
  width: 72mm;
  height: 48mm;
}

.flyer-page.is-one-photo .identity-grid {
  grid-template-columns: 1fr;
}

.flyer-page.is-one-photo .photo-secondary {
  display: none;
}

.flyer-page.is-one-photo .features ul {
  padding-left: 52mm;
}

.features {
  height: 48mm;
  overflow: hidden;
  background: #fff;
  border: .55mm solid var(--accent);
  border-radius: 2.2mm;
}

.features h2 {
  height: 10mm;
  margin: 0;
  background: var(--accent);
  color: #fff;
  font-size: 17pt;
  font-weight: 850;
  letter-spacing: .25mm;
  line-height: 10mm;
  text-align: center;
}

.features ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2mm;
  height: 37mm;
  margin: 0;
  padding: 2.1mm 3mm 2.1mm 12mm;
  list-style: none;
}

.features li {
  position: relative;
  font-size: 11.5pt;
  font-weight: 720;
  letter-spacing: .08mm;
  line-height: 6.5mm;
  white-space: nowrap;
}

.features li::before {
  position: absolute;
  top: 50%;
  left: -6.5mm;
  width: 3.1mm;
  height: 3.1mm;
  border-radius: 50%;
  background: var(--accent);
  content: "";
  transform: translateY(-50%);
}

.basic-info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180mm;
  height: 9.5mm;
  margin: 2.2mm auto 0;
  background: var(--beige);
  border: .4mm solid #dfbf7f;
  border-radius: 1.5mm;
}

.basic-info p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9mm;
  width: 100%;
  margin: 0;
  font-size: 12pt;
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;
}

.basic-info b {
  font-weight: inherit;
}

.request-box {
  display: grid;
  grid-template-columns: 14mm 1fr;
  align-items: center;
  width: 180mm;
  height: 22mm;
  margin: 2.2mm auto 0;
  padding: 1.4mm 3mm;
  background: #fff;
  border: .45mm solid var(--accent);
  border-radius: 1.8mm;
}

.request-icon {
  display: grid;
  place-items: center;
  width: 11mm;
  height: 11mm;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 19pt;
  font-weight: 900;
  line-height: 1;
}

.request-copy p {
  margin: 0;
  font-size: 9.5pt;
  font-weight: 650;
  letter-spacing: .01mm;
  line-height: 5.45mm;
  white-space: nowrap;
}

.contact {
  position: relative;
  width: 180mm;
  height: 37mm;
  margin: 3.5mm auto 0;
  background: #fff;
  border: .7mm solid var(--accent-deep);
  border-radius: 2.2mm;
}

.contact h2 {
  position: absolute;
  top: -3.8mm;
  left: 10mm;
  height: 8mm;
  margin: 0;
  padding: 0 7mm;
  background: var(--accent-deep);
  color: #fff;
  font-size: 16pt;
  font-weight: 850;
  letter-spacing: .35mm;
  line-height: 8mm;
  white-space: nowrap;
}

.contact-body {
  display: grid;
  grid-template-columns: 1fr 58mm;
  height: 100%;
  padding: 5mm 4mm 2mm;
}

.phone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  gap: 3.5mm;
  min-width: 0;
  padding: 0 2mm;
  border-right: .35mm dashed #df9ca2;
  white-space: nowrap;
}

.phone-label {
  font-size: 16pt;
  font-weight: 850;
}

.phone-numbers {
  display: grid;
  align-content: center;
  justify-items: center;
  width: 100%;
  min-width: 0;
}

.phone-numbers strong {
  font-size: 31pt;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: .05mm;
  line-height: 1;
}

.phone-numbers strong[hidden] {
  display: none;
}

.contact.has-two-phones .phone-numbers {
  gap: 1.2mm;
}

.contact.has-two-phones .phone-numbers strong {
  font-size: 22.5pt;
  line-height: 1.05;
}

.line-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5mm;
  padding-left: 2mm;
}

.contact.is-phone-only .contact-body {
  grid-template-columns: 1fr;
}

.contact.is-phone-only .phone {
  border-right: 0;
}

.contact.is-phone-only .line-contact {
  display: none;
}

.contact.is-phone-only .phone-numbers strong {
  font-size: 34pt;
}

.contact.is-phone-only.has-two-phones .phone-numbers strong {
  font-size: 27pt;
}

.line-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1mm;
  text-align: center;
}

.line-copy strong {
  font-size: 14pt;
  font-weight: 850;
}

.line-copy span {
  width: 24mm;
  font-size: 8.5pt;
  font-weight: 650;
  line-height: 1.3;
}

.line-qr-preview {
  display: block;
  width: 25mm;
  height: 25mm;
  object-fit: contain;
  background: #fff;
  border: .25mm solid #bbb;
}

.line-qr-preview[hidden] {
  display: none;
}

footer {
  height: 5mm;
  margin-top: 1.8mm;
  color: var(--muted-ink);
  font-size: 7.5pt;
  font-weight: 500;
  line-height: 5mm;
  text-align: center;
}

@page {
  size: A4 portrait;
  margin: 0;
}

@media print {
  html,
  body {
    width: 210mm;
    height: auto;
    min-height: 0;
    background: #fff;
  }

  .screen-note,
  .variant-panel {
    display: none;
  }

  .preview-viewport {
    overflow: visible;
  }

  .flyer-scale {
    width: 210mm !important;
    height: 297mm !important;
    margin: 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .flyer-page {
    margin: 0;
    transform: none !important;
    box-shadow: none;
  }

  /*
   * iOS の Safari / Chrome は @page の余白 0 を完全には反映しない。
   * 紙面は 96% で均等縮小し、外側の印刷対象も縮小後の実寸だけに
   * 固定する。transform 前の A4 高さを残すと空白の 2 ページ目が
   * 生成されるため、body から preview-viewport まで同じ高さで切る。
   */
  body.is-ios-print {
    width: 210mm !important;
    height: 285.12mm !important;
    min-height: 0 !important;
    max-height: 285.12mm !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  body.is-ios-print .app-shell,
  body.is-ios-print .preview-area,
  body.is-ios-print .preview-viewport,
  body.is-ios-print .flyer-scale {
    position: relative;
    width: 210mm !important;
    height: 285.12mm !important;
    min-height: 0 !important;
    max-height: 285.12mm !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.is-ios-print .flyer-page {
    position: absolute;
    top: 0;
    left: 4.2mm;
    transform: scale(.96) !important;
    transform-origin: top left;
  }
}

@media screen and (max-width: 720px) {
  .variant-panel-heading {
    display: block;
  }

  .variant-panel-heading > p {
    margin-top: 5px;
  }

  .variant-controls {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 440px) {
  .variant-controls {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 840px) {
  body {
    overflow-x: hidden;
  }

  .preview-viewport {
    overflow: hidden;
  }

  .flyer-scale {
    margin-right: auto;
    margin-left: auto;
  }

  .flyer-page {
    margin: 0;
    transform-origin: top left;
  }
}