/* =========================================================
   Referan Card デザインシステム（確定3テーマ）
   写真なし版=基本 / 写真あり版=任意オプション
   利用: card-setup 完成画面プレビュー / card-print 印刷 / (将来 /c 等)
   印刷サイズは body.rc-print で .pcard を 91×55mm に。既定はプレビュー(340×206px)。
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Zen+Maru+Gothic:wght@500;700;900&family=Shippori+Mincho:wght@600;800&family=DM+Sans:wght@500;700&display=swap');

.pcard { width:340px; height:206px; border-radius:14px; overflow:hidden; position:relative; box-shadow:0 6px 18px rgba(0,0,0,.14); }
.dcard { width:340px; border-radius:22px; overflow:hidden; position:relative; box-shadow:0 10px 30px rgba(0,0,0,.16); }
.pcard .avatar { object-fit:cover; display:block; background:#ddd; flex-shrink:0; }

/* ===== CASUAL ===== */
.nf-casual,.t-casual{ font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif; }
.nf-casual.pcard,.t-casual.pcard-front{ background:linear-gradient(135deg,#ffd36e 0%,#ff8fb1 55%,#ff6a9a 100%); color:#fff; }
.nf-casual::before{ content:''; position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.2);top:-56px;right:-40px; }
.nf-casual::after{ content:''; position:absolute;width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.16);bottom:-22px;left:40px; }
.nf-casual .in{ position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding:20px 24px; }
.nf-casual .nm{ font-size:2.15rem;font-weight:900;line-height:1.08;text-shadow:0 2px 4px rgba(0,0,0,.14); }
.nf-casual .nick{ font-size:.86rem;font-weight:700;margin-top:3px; }
.nf-casual .grp{ margin-top:auto; }
.nf-casual .store{ font-size:1.15rem;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,.16); }
.nf-casual .sub{ font-size:.66rem;margin-top:2px;opacity:.95; }
.t-casual.pcard-back{ background:linear-gradient(135deg,#fff3f7,#ffe3ee);color:#e0407a; }
.t-casual .cb .qr-box{ background:#fff;padding:8px;border-radius:12px;box-shadow:0 3px 10px rgba(224,64,122,.18); }
.t-casual .cb .store2{ color:#e0407a; }
.t-casual .cf .avatar{ border-radius:50%;border:4px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.18); }
.t-casual .cf .store{ text-shadow:0 1px 3px rgba(0,0,0,.14); }
.t-casual .cf .sub{ opacity:.95; }
.nd-casual{ font-family:'Zen Maru Gothic',sans-serif; }
.nd-casual .nd-hero{ background:linear-gradient(160deg,#ffd36e,#ff8fb1 60%,#ff6a9a);color:#fff; }
.nd-casual .nd-avatar,.pd-casual .pd-avatar{ border-radius:50%;border:4px solid #fff; }
.nd-casual .nd-store,.nd-casual .nd-cta{ color:#e0407a; } .nd-casual .nd-sub{ color:#c86; }

/* ===== WARM（白背景・上品エディトリアル） ===== */
.nf-warm,.t-warm,.nd-warm,.pd-warm{ font-family:'Shippori Mincho','Noto Sans JP',serif; }
.nf-warm.pcard,.t-warm.pcard-front,.t-warm.pcard-back{ background:#ffffff; color:#2c2822; }
.nf-warm .in{ position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;text-align:left;padding:26px 28px 22px; }
.nf-warm .nm{ font-size:1.5rem;font-weight:800;line-height:1.18;letter-spacing:.01em;color:#26221c;margin-top:6px; }
.nf-warm .nick{ font-size:.8rem;margin-top:5px;color:#8a8378;letter-spacing:.06em; }
.nf-warm .grp{ width:100%;margin-top:auto;padding-top:0;position:relative; }
.nf-warm .grp::before{ content:'';display:block;width:24px;height:2px;background:#c2603f;margin-bottom:11px; }
.nf-warm .store{ font-size:1.05rem;font-weight:800;letter-spacing:.09em;color:#26221c; }
.nf-warm .sub{ font-size:.64rem;margin-top:4px;color:#8a8378;letter-spacing:.04em; }
.t-warm .cf .avatar{ border-radius:50%;border:1px solid #e6e0d6; }
.t-warm .cf .nm{ font-weight:800;color:#26221c; }
.t-warm .cf .grp{ position:relative;padding-top:0; }
.t-warm .cf .grp::before{ content:'';display:block;width:22px;height:2px;background:#c2603f;margin-bottom:8px; }
.t-warm .cf .store{ color:#26221c;letter-spacing:.09em; } .t-warm .cf .sub{ color:#8a8378; }
.t-warm .cb .qr-box{ background:#fff;padding:6px;border-radius:8px;border:1px solid #eee6da; }
.t-warm .cb .cta-t{ color:#26221c; } .t-warm .cb .store2{ color:#26221c;letter-spacing:.09em; }
.nd-warm .nd-hero{ background:#fff;color:#26221c;text-align:left;padding:30px 28px 20px; }
.nd-warm .nd-nm{ letter-spacing:.01em;font-size:1.7rem; } .nd-warm .nd-nick{ color:#8a8378; }
.nd-warm .nd-avatar,.pd-warm .pd-avatar{ border-radius:50%;border:1px solid #e6e0d6; }
.nd-warm .nd-body{ background:#fff;text-align:left;padding:6px 28px 26px; }
.nd-warm .nd-store{ position:relative;padding-top:13px;letter-spacing:.09em;color:#26221c; }
.nd-warm .nd-store::before{ content:'';display:block;width:24px;height:2px;background:#c2603f;margin-bottom:11px; }
.nd-warm .nd-cta{ color:#26221c;letter-spacing:.06em; } .nd-warm .nd-sub{ color:#8a8378; }
.nd-warm .nd-qr{ display:block;margin-top:6px; }

/* ===== SIMPLE（白背景・写真角形） ===== */
.nf-simple,.t-simple,.nd-simple,.pd-simple{ font-family:'DM Sans','Noto Sans JP',sans-serif; }
.nf-simple.pcard,.t-simple.pcard-front,.t-simple.pcard-back{ background:#fafafa;color:#111; }
.nf-simple .in{ position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding:22px 26px; }
.nf-simple .nm{ font-size:1.5rem;font-weight:900;line-height:1.14;letter-spacing:.01em;margin-top:4px; }
.nf-simple .nick{ font-size:.8rem;color:#666;margin-top:2px; }
.nf-simple .grp{ margin-top:auto;padding-top:11px;border-top:1px solid #e2e2e2; }
.nf-simple .store{ font-size:1.05rem;font-weight:900;letter-spacing:.03em; }
.nf-simple .sub{ font-size:.64rem;color:#777;margin-top:3px; }
.t-simple .cf .avatar{ border-radius:12px; }
.t-simple .cf .nm{ letter-spacing:.01em; } .t-simple .cf .nick{ color:#666; }
.t-simple .cf .grp{ border-top:1px solid #e2e2e2; }
.t-simple .cf .store{ letter-spacing:.03em; } .t-simple .cf .sub{ color:#777; }
.t-simple .cb .qr-box{ background:#fff;padding:8px;border-radius:6px;border:1px solid #e4e4e4; }
.t-simple .cb .cta-t{ color:#111; } .t-simple .cb .store2{ color:#111;letter-spacing:.14em;text-transform:uppercase; }
.nd-simple .nd-hero{ background:#111;color:#fff; }
.nd-simple .nd-nm{ font-size:1.7rem; }
.nd-simple .nd-avatar{ border-radius:16px;background:#fff; } .pd-simple .pd-avatar{ border-radius:16px; }
.nd-simple .nd-store,.nd-simple .nd-cta{ color:#111; } .nd-simple .nd-sub{ color:#777; }

/* ===== 写真あり 表 共通レイアウト ===== */
.t-casual.pcard-front,.t-warm.pcard-front,.t-simple.pcard-front{}
.cf{ position:relative;z-index:2;display:flex;height:100%;align-items:center;gap:16px;padding:18px 20px; }
.cf .avatar{ width:92px;height:92px; }
.cf .rt{ flex:1;min-width:0;display:flex;flex-direction:column;height:100%;justify-content:center; }
.cf .nm{ font-size:1.5rem;font-weight:900;line-height:1.14; }
.cf .nick{ font-size:.8rem;margin-top:1px; }
.cf .grp{ margin-top:auto;padding-top:8px; }
.cf .store{ font-size:1.05rem;font-weight:900; }
.cf .sub{ font-size:.64rem;margin-top:2px; }

/* ===== 裏 共通レイアウト ===== */
/* 裏面: 左上=氏名 / 右下=店名＋QR＋小さな案内（名刺らしいレイアウト） */
.cb{ position:relative;z-index:2;height:100%;box-sizing:border-box;padding:18px 20px; }
.cb .bk-id{ position:absolute; top:16px; left:20px; max-width:56%; }
.cb .bk-name{ font-size:1.2rem; font-weight:900; line-height:1.15; letter-spacing:.01em; }
.cb .bk-nick{ font-size:.72rem; font-weight:700; margin-top:3px; opacity:.68; }
/* 紙裏に本人（任意・取り込みデザイン店向け）: 小さな写真＋一言 */
.cb .bk-photo{ width:42px; height:42px; border-radius:50%; object-fit:cover; display:block; margin-bottom:6px; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.22); background:#eee; }
.cb .bk-msg{ font-size:.58rem; margin-top:5px; opacity:.85; line-height:1.35; }
.cb .bk-corner{ position:absolute; right:16px; bottom:15px; width:88px; text-align:center; }
.cb .bk-store{ font-size:.62rem; font-weight:800; line-height:1.25; margin-bottom:5px; letter-spacing:.03em; }
.cb .qr-box{ display:inline-block; }
.cb .qr-box canvas{ display:block; width:64px; height:64px; } /* 裏面QRは名刺実物に合わせ約17mm相当 */
.cb .bk-cap{ font-size:.5rem; font-weight:700; line-height:1.2; margin-top:4px; opacity:.8; white-space:nowrap; letter-spacing:-.01em; }

/* ===== デジタル1枚もの 共通 ===== */
.dcard .nd-hero{ padding:34px 24px 26px;text-align:center;position:relative;overflow:hidden; }
.dcard .nd-nm{ font-size:2.5rem;font-weight:900;line-height:1.1; }
.dcard .nd-nick{ font-size:.92rem;margin-top:4px; }
.dcard .nd-body{ background:#fff;padding:22px 22px 24px;text-align:center; }
.dcard .nd-store{ font-size:1.3rem;font-weight:900;line-height:1.3; }
.dcard .nd-sub{ font-size:.74rem;margin-top:3px; }
.dcard .nd-msg{ font-size:.86rem;line-height:1.85;margin:12px 0 18px;color:#333; }
.dcard .nd-qr{ display:inline-block;padding:12px;border-radius:14px;background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.1); }
.dcard .nd-qr canvas{ display:block; }
.dcard .nd-cta{ font-size:.82rem;font-weight:900;margin-top:12px; }
/* デジタル 写真あり */
.pd-hero{ padding:24px 22px 18px;text-align:center; }
.pd-avatar{ width:104px;height:104px;object-fit:cover;margin:0 auto 10px;display:block;background:#ddd; }
.pd-nm{ font-size:1.7rem;font-weight:900;line-height:1.15; }
.pd-nick{ font-size:.88rem;margin-top:2px; }
/* デジタル 写真なし avatar は無し */
.nd-avatar{ width:112px;height:112px;margin:0 auto 12px;object-fit:cover;display:block;background:#ddd; }

/* ===== 既存デザイン取り込み（front_image・表を全面画像で） ===== */
.rc-cf{ overflow:hidden; }
.rc-cf .rc-cf-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; display:block; }
.rc-cf .rc-cf-text{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:14px 16px; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.6)); }
.rc-cf .rc-cf-nm{ font-size:1.4rem; font-weight:900; line-height:1.1; text-shadow:0 1px 4px rgba(0,0,0,.55); }
.rc-cf .rc-cf-store{ font-size:.8rem; font-weight:700; margin-top:3px; text-shadow:0 1px 3px rgba(0,0,0,.55); }

/* デジタル: 上部に取り込み画像(縦横そのまま)→下に情報ゾーン(テーマのまま=フォント統一) */
.rc-dg .rc-dg-img{ display:block; width:100%; height:auto; }
.dcard .rc-dg-nm{ font-size:1.5rem; font-weight:900; line-height:1.15; margin-bottom:2px; }
.nd-warm .rc-dg-nm{ color:#26221c; }
.nd-simple .rc-dg-nm{ color:#111; }
.nd-casual .rc-dg-nm{ color:#e0407a; }

/* ===== 印刷モード: 91×55mm ===== */
body.rc-print { margin:0; }
body.rc-print .pcard { width:91mm; height:55mm; border-radius:0; box-shadow:none; }
@media print { @page { size:91mm 55mm; margin:0; } body.rc-print .pcard { page-break-after:always; } }