/* ===========================================================
   名刺データ作成ツール
   ツールUIはモノトーンで統一（アクセントカラーは使わない）
   =========================================================== */
:root {
  --nc-ink: #1A1A1A;
  --nc-sub: #6E6E6E;
  --nc-muted: #757575;
  --nc-border: #E3E3E3;
  --nc-bg: #FFFFFF;
  --nc-panel: #FFFFFF;
  --nc-btn: #454545;          /* ボタン：ダークグレー */
  --nc-btn-hover: #2E2E2E;
  --nc-radius: 10px;
  --nc-font: 'Albert Sans', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; padding-top: 65px;
  font-family: var(--nc-font);
  font-size: 14px;
  line-height: 1.7;
  color: var(--nc-ink);
  background: var(--nc-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}
h1, h2, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }
button { font: inherit; }

/* ---------- header ---------- */
.tool-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 12px 20px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--nc-border);
}
.tool-header__actions { display: flex; gap: 8px; }

/* ---------- buttons ---------- */
.btn {
  border: 1px solid var(--nc-border); background: #fff; color: var(--nc-ink);
  border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: .15s ease; white-space: nowrap;
}
.btn:hover { border-color: var(--nc-btn); background: #FAFAFA; }
.btn--primary { background: var(--nc-btn); border-color: var(--nc-btn); color: #fff; }
.btn--primary:hover { background: var(--nc-btn-hover); border-color: var(--nc-btn-hover); }
.btn--sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--nc-btn); outline-offset: 2px; }

/* ---------- layout（左：プレビュー / 右：入力） ---------- */
/* .tool の高さをヘッダー分を除いた画面いっぱいに固定し、はみ出す分は
   .panel だけが内部スクロールする（プレビューは完全に動かない） */
.tool {
  display: grid;
  grid-template-columns: minmax(460px, 640px) minmax(340px, 430px);
  justify-content: center;
  align-items: start;
  gap: 20px; padding: 20px; max-width: 1500px; margin: 0 auto;
  height: calc(100vh - 65px); overflow: hidden;
}
@media (max-width: 1040px) {
  .tool { grid-template-columns: 1fr; height: auto; overflow: visible; }
}

/* JP/EN タブは常に固定表示。その下の入力欄だけを内部スクロールさせ、
   スクロール領域の開始Y位置をプレビューのグレー背景（.preview__stage）の
   上端に揃える（.preview は padding-top:2px、.preview__stage は
   margin-top:16px でグレー背景が始まるため、こちらも同じ値で合わせる） */
.panel {
  display: flex; flex-direction: column; min-width: 0;
  height: 100%; padding-top: 2px; overflow: hidden;
}
@media (max-width: 1040px) { .panel { height: auto; overflow: visible; } }
.panel__scroll {
  display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto;
  margin-top: 16px; min-height: 0; overflow-y: auto;
}
@media (max-width: 1040px) { .panel__scroll { overflow-y: visible; } }
.block {
  background: var(--nc-panel);
  border-radius: var(--nc-radius); padding: 16px;
}
.block__title {
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--nc-border);
}
.hint { font-size: 11.5px; color: var(--nc-sub); line-height: 1.6; margin-top: 8px; }
.fi__body .hint { margin-top: 0; }   /* .fi__body は既に gap で間隔を持つため、二重に余白をつけない */

/* ---------- lang tabs（表面/裏面と同じ見た目） ---------- */
/* .block の左右padding(16px)と同じ分だけ内側に入れ、下線の幅を入力欄に揃える */
.lang-bar { flex: none; margin: 0 16px; border-bottom: 1px solid var(--nc-border); }

/* ---------- field rows ---------- */
.fields { display: flex; flex-direction: column; gap: 22px; }
.fi { transition: .15s; }
.fi.is-off { opacity: .65; }
.fi.is-off .fi__body { display: none; }
.fi__head { display: flex; align-items: center; gap: 10px; }
.fi__label { flex: 1; font-size: 12px; font-weight: 500; color: var(--nc-ink); min-width: 0; }
.fi.is-off .fi__label { color: var(--nc-muted); }
.fi__body { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }

/* 電話番号の上・メールアドレスの下の区切り線、アイコン表示チェックボックスの行 */
.fi--border-top { border-top: 1px solid var(--nc-border); padding-top: 20px; }
.fi-icons-row { border-bottom: 1px solid var(--nc-border); padding-bottom: 20px; }
.fi-icons-row .check { margin-top: 0; }

/* 用紙サイズ：記載内容の項目とは別物なので、上に区切り線を入れて離す */
.size-field { border-top: 1px solid var(--nc-border); margin-top: 22px; padding-top: 20px; }

/* トグルスイッチ */
.sw { position: relative; width: 33px; height: 19px; flex: none; }
.sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sw span { position: absolute; inset: 0; background: #ADADAD; border-radius: 999px; transition: .18s; pointer-events: none; }
.sw span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  background: #fff; border-radius: 50%; transition: .18s;
}
.sw input:checked + span { background: var(--nc-btn); }
.sw input:checked + span::after { transform: translateX(14px); }
.sw input:focus-visible + span { outline: 2px solid var(--nc-btn); outline-offset: 2px; }

/* ---------- inputs ---------- */
.field { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--nc-sub); min-width: 0; }
.field > span { font-weight: 500; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; font: inherit; font-size: 13px; color: var(--nc-ink);
  border: 1px solid var(--nc-border); border-radius: 7px; padding: 7px 9px;
  background: #fff; transition: .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--nc-btn); box-shadow: 0 0 0 3px rgba(69,69,69,.12);
}
.fi__body input {
  border-radius: 12px; padding: 13px 16px; font-size: 14px; border-color: #EAEAEA;
}
/* 用紙サイズのプルダウン：縦幅は他の入力欄に合わせる。ブラウザ標準の矢印は
   高さ・位置とも細かく調整できないため、自前のシェブロンアイコンに差し替える
   （基準位置=右16pxから、矢印だけx軸-5pxで右21pxへ寄せる） */
#size {
  padding: 13px 40px 13px 16px; font-size: 14px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' stroke='%235C5C5C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 21px center;
  background-size: 12px 12px;
}
.field--pair { display: flex; flex-direction: row; gap: 8px; }
.field--pair input { min-width: 0; }
input[type="range"] { width: 100%; accent-color: var(--nc-btn); }

.check { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--nc-sub); cursor: pointer; margin-top: 10px; }
.check input { accent-color: var(--nc-btn); }
.check--sm { font-size: 11.5px; margin: 0; }

/* ---------- preview ---------- */
/* .tool 自体がスクロールしないので、プレビューは常に完全固定になる */
.preview {
  background: var(--nc-panel);
  border-radius: var(--nc-radius); padding: 2px 16px 12px; min-width: 0;
}

/* タブ + 設定アイコン */
.preview__bar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--nc-border);
}
.tabs { display: flex; }
.tab {
  border: 0; background: none; cursor: pointer; transition: .15s;
  padding: 13px 18px; font-size: 14px; font-weight: 500; color: var(--nc-sub);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover:not(:disabled) { color: var(--nc-ink); }
.tab.is-active { color: var(--nc-ink); font-weight: 700; border-bottom-color: var(--nc-ink); }
.tab:disabled { opacity: .3; cursor: not-allowed; }

.popwrap { position: relative; padding-bottom: 7px; }
.iconbtn {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 7px; background: none;
  color: var(--nc-muted); cursor: pointer; transition: .15s;
}
.iconbtn:hover, .iconbtn.is-open { background: #F1F1F1; color: var(--nc-ink); }
.iconbtn:focus-visible { outline: 2px solid var(--nc-btn); outline-offset: 2px; }
.popover {
  position: absolute; right: 0; top: calc(100% + 2px); z-index: 30;
  display: flex; flex-direction: column; gap: 9px; white-space: nowrap;
  background: #fff; border: 1px solid var(--nc-border); border-radius: 9px;
  padding: 11px 13px; box-shadow: 0 8px 24px rgba(0,0,0,.13);
}
.popover[hidden] { display: none; }

/* 名刺プレビュー本体 */
.preview__stage {
  margin-top: 16px; padding: 20px; border-radius: 4px;
  background: #F2F2F2;
  display: flex; justify-content: center; overflow: auto;
}
.card-wrap { filter: drop-shadow(0 6px 20px rgba(0,0,0,.14)); }
.card-wrap svg { display: block; }

/* 表示サイズ（右下に控えめに） */
.preview__foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.zoom { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--nc-sub); }
.zoom__btn {
  border: 0; background: none; border-radius: 4px; cursor: pointer;
  padding: 2px 5px; font-size: 13px; line-height: 1; color: var(--nc-sub); transition: .15s;
}
.zoom__btn:hover { background: #F1F1F1; color: var(--nc-ink); }
.zoom output { min-width: 36px; text-align: center; }

/* ---------- modal ---------- */
.modal { border: 0; border-radius: 12px; padding: 0; max-width: 560px; width: calc(100% - 32px); box-shadow: 0 24px 60px rgba(0,0,0,.24); }
.modal::backdrop { background: rgba(26,26,26,.42); }
.modal__inner { padding: 22px; }
.modal h2 { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.export-list { display: flex; flex-direction: column; gap: 10px; }
.export-list li { display: flex; align-items: center; gap: 12px; justify-content: space-between; border: 1px solid var(--nc-border); border-radius: 9px; padding: 11px 12px; }
.export-list b { display: block; font-size: 13px; }
.cardlist { display: flex; flex-direction: column; max-height: 58vh; overflow: auto; padding-right: 8px; }
.cardlist li {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  border-bottom: 1px solid var(--nc-border); padding: 16px 0;
}
.cardlist li:last-child { border-bottom: 0; }
.cardlist__body { min-width: 0; }
.cardlist b { display: block; font-size: 13px; }
.cardlist__meta { display: block; font-size: 11.5px; color: var(--nc-sub); line-height: 1.55; }
.cardlist__act { display: flex; gap: 6px; flex: none; }
.cardlist__empty {
  display: block; text-align: center; color: var(--nc-sub); font-size: 12px;
  border: 1px dashed #CFCFCF; border-radius: 9px; padding: 22px 12px;
}

.note { margin-top: 16px; background: #F7F7F7; border-radius: 9px; padding: 12px 14px; font-size: 11.5px; color: var(--nc-sub); }
.note b { display: block; color: var(--nc-ink); margin-bottom: 5px; font-size: 12px; }
.note ul { list-style: disc; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; }
.modal__foot { margin-top: 16px; text-align: right; }
.modal__foot--split { display: flex; justify-content: flex-end; gap: 8px; }
.modal--sm { max-width: 380px; }
.confirm-msg { font-size: 13px; color: var(--nc-sub); line-height: 1.6; }

/* ---------- print（入稿用PDF書き出し） ---------- */
.print-root { display: none; }
@media print {
  /* body の padding-top（固定ヘッダー分のオフセット）が残っていると、
     カード1面分のページ内に収まらず2ページ目に少しはみ出してしまうため、
     印刷時は完全にリセットする */
  html, body { height: auto !important; margin: 0 !important; padding: 0 !important; }
  body > *:not(.print-root) { display: none !important; }
  .print-root { display: block; margin: 0; padding: 0; }
  .print-root svg { display: block; margin: 0; page-break-after: always; page-break-inside: avoid; }
  .print-root svg:last-child { page-break-after: auto; }
}