/* 명함형 템플릿(CARD_01) — 색·배경·로고는 디자인 토큰(:root의 --card-*)으로만 정한다. 토큰 코드 목록은 helpers/site_info_helpers.php saas_card_token_defs(). */
:root{--card-bg-from:#FFFDF8;--card-bg-to:#FFE5A0;--card-accent:#F5C518;--card-text:#111827;--card-sub:#5F6671;--card-back-bg:#111827;--card-back-text:#fff;--card-back-label:#F5C518;--card-page-bg:#F1EEE6;--card-ratio:1.75}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body.card-page{font:16px/1.5 Pretendard,"Noto Sans KR",system-ui,sans-serif;color:#111827;background:var(--card-page-bg);display:flex;flex-direction:column;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
[hidden]{display:none!important}
/* 자사 유도 탭(다른 이북과 같은 모양) */
.card-promo{position:fixed;top:0;right:clamp(16px,3.2vw,52px);z-index:40;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:1px solid rgba(15,35,70,.12);border-top:0;border-radius:0 0 10px 10px;background:#fff;color:#0f2346;box-shadow:0 6px 16px rgba(15,35,70,.14);font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1;text-decoration:none;white-space:nowrap}
.card-promo svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:56px 16px 110px}
/* 3D 뒤집는 가로형 명함 — 폭은 화면 폭·높이 중 작은 쪽에 맞춘다 */
.scene{--w:min(92vw,860px,calc((100vh - 230px) * var(--card-ratio)));width:var(--w);aspect-ratio:var(--card-ratio);perspective:1600px}
.card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.75,.2,1);cursor:pointer;border-radius:calc(var(--w) * .028)}
.card.is-back{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:inherit;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 calc(var(--w) * .022) calc(var(--w) * .05) rgba(17,24,39,.24);container-type:inline-size}
.front{background:var(--card-bg-image,linear-gradient(145deg,var(--card-bg-from),var(--card-bg-to)));background-size:cover;background-position:center;color:var(--card-text)}
.front::before{content:"";position:absolute;right:-9%;bottom:-32%;width:56%;aspect-ratio:1;border-radius:50%;background:var(--card-accent);opacity:.92}
.back{background:var(--card-back-bg);color:var(--card-back-text);transform:rotateY(180deg)}
.back::before{content:"";position:absolute;left:-6%;top:-14%;width:20%;aspect-ratio:1;border-radius:50%;background:var(--card-accent)}
.f-in{position:relative;z-index:1;height:100%;padding:6.5% 6.5%;display:flex;flex-direction:column}
.logo{display:block;height:11cqw;max-height:none;max-width:42%;width:auto;object-fit:contain;object-position:left center;margin-bottom:auto}
.logo-txt{font-weight:900;font-size:5cqw;letter-spacing:-.03em;margin-bottom:auto}
.nm{font-size:8.2cqw;font-weight:900;letter-spacing:-.04em;line-height:1.1;margin:0}
.tt{font-size:3.4cqw;font-weight:700;color:var(--card-sub);margin:1.4cqw 0 0}
.co{font-size:3cqw;font-weight:700;margin:2.2cqw 0 0}
.bar-line{width:11cqw;height:.9cqw;background:var(--card-text);border-radius:99px;margin:3.6cqw 0 2cqw}
.tg{font-size:2.5cqw;font-weight:600;color:var(--card-sub);margin:0;max-width:58%}
.dm{position:absolute;right:6.5%;bottom:6%;z-index:2;font-size:2.2cqw;font-weight:800;color:var(--card-text)}
.b-label{font-size:1.9cqw;font-weight:800;letter-spacing:.14em;color:var(--card-back-label);margin:0 0 0 15%}
.rows{margin:auto 0 0 0;display:flex;flex-direction:column;gap:1.25cqw}
.row{display:grid;grid-template-columns:13cqw 1fr;gap:2cqw;align-items:baseline;padding-bottom:1.05cqw;border-bottom:1px solid rgba(255,255,255,.16);color:inherit;text-decoration:none}
.row .k{font-size:1.8cqw;font-weight:700;color:var(--card-back-label)}.row .v{font-size:2.55cqw;font-weight:700;word-break:keep-all;overflow-wrap:anywhere}
.row.small .v{font-size:2cqw}
/* 하단 툴바 */
.dock{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:8px;height:64px;padding:0 14px;background:#fff;border:1px solid #E5E7EB;border-radius:32px;box-shadow:0 6px 20px rgba(17,24,39,.16);max-width:calc(100vw - 24px)}
.ic{width:40px;height:40px;border-radius:20px;background:#F6F4EE;font-size:22px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.chipb{height:32px;padding:0 16px;border-radius:16px;background:#F6F4EE;font-size:14px;font-weight:800}.chipb[aria-pressed=true]{background:#FFF0B9}
.act{height:40px;padding:0 20px;border-radius:20px;background:var(--card-accent);color:var(--card-on-accent,#111827);font-size:15px;font-weight:800;display:inline-flex;align-items:center;gap:6px}
.act.alt{background:#F6F4EE;color:#111827}
.sep{width:1px;height:24px;background:#E5E7EB;margin:0 2px}
.chipb,.act,.ic{white-space:nowrap;flex:none}
/* 공유 — 화면 중앙 플로팅 QR, 뒤 화면은 흐리게 */
.share{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(255,255,255,.38);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.modal{position:relative;width:min(440px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;border-radius:28px;padding:32px 34px 30px;box-shadow:0 24px 60px rgba(17,24,39,.3)}
.modal h2{margin:0 0 6px;font-size:24px;font-weight:900}.modal p{margin:0;color:#6B7280;font-size:15px;line-height:1.55}
.x{position:absolute;right:22px;top:22px;width:36px;height:36px;border-radius:18px;background:#F1EEE6;font-size:22px;line-height:1}
.qr{display:block;width:min(280px,72vw);aspect-ratio:1;margin:22px auto 0;padding:14px;border:2px solid #E5E7EB;border-radius:18px;background:#fff}
.qr svg{display:block;width:100%;height:100%}
.hint{display:block;margin:16px auto 0;width:max-content;max-width:100%;padding:7px 16px;border-radius:99px;background:#FFF9E7;color:#785D00;font-size:13px;font-weight:700;text-align:center}
.sbtns{display:flex;gap:12px;margin-top:20px}.sbtns .act{flex:1;justify-content:center;height:52px;border-radius:26px}.sbtns .act.line{color:#111827;background:#fff;border:2px solid #111827}
.toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);z-index:80;padding:10px 18px;border-radius:99px;background:#111827;color:#fff;font-size:14px;font-weight:700}
@media(max-width:560px){.stage{padding:52px 12px 100px}.dock{gap:6px;padding:0 10px;bottom:14px}.ic{display:none}.chipb{padding:0 14px}.act{padding:0 16px}.modal{padding:28px 22px 24px;border-radius:24px}.sbtns{flex-direction:column}.sbtns .act{flex:none;width:100%;height:50px}.card-promo{height:28px;font-size:12px;right:8px;padding:0 10px}}
@media(prefers-reduced-motion:reduce){.card{transition:none}}

.back .f-in{padding:4.6% 6.5% 4.4%}
/* 보이는 면만 클릭을 받는다 — 3D로 뒤집으면 backface-visibility로 가려진 앞면이 히트 테스트에서 뒷면 링크를 가로채던 문제(2026-09-29) */
.card:not(.is-back) .back{pointer-events:none}.card.is-back .front{pointer-events:none}
a.dm{text-decoration:none;color:var(--card-text)}a.dm:hover{text-decoration:underline}
.row:hover .v{text-decoration:underline}
/* 한/영 전환(영문 내용이 있을 때만 나타남) — 왼쪽 위 고정, 다른 이북의 KO/EN 스위치와 같은 모양 */
.langsw{position:fixed;top:10px;left:clamp(12px,3vw,40px);z-index:40;display:flex;gap:2px;padding:3px;border-radius:99px;background:#fff;border:1px solid #E5E7EB;box-shadow:0 4px 14px rgba(17,24,39,.12)}
.langsw button{min-width:38px;height:28px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:800;color:#6B7280}.langsw button[aria-pressed=true]{background:var(--card-accent);color:var(--card-on-accent,#111827)}
.modal .mp{white-space:pre-line}
.row .v{min-width:0}
/* [2026-09-30] 휴대폰 가로 모드(낮은 화면) — 기능키(독)는 좌측 세로·한영전환은 우측 세로(우상단 Ebook Banana 탭과 안 겹침), 카드는 화면 중앙 유지·확대, 공유 창은 QR 좌·안내/버튼 우 2단으로 한 화면에 다 보이게 */
@media (orientation:landscape) and (max-height:520px){
.stage{padding:40px 96px 12px}
.scene{--w:min(calc(100vw - 192px),860px,calc((100dvh - 52px) * var(--card-ratio)))}
.dock{left:12px;right:auto;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;height:auto;width:68px;padding:12px 0;gap:8px;border-radius:34px}
.langsw{top:50%;left:auto;right:12px;transform:translateY(-50%);flex-direction:column;gap:3px;padding:3px;border-radius:22px}
.langsw button{min-width:34px;height:30px;padding:0 6px}
.dock .ic{width:38px;height:38px}
.dock .chipb{width:54px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.dock .act{width:54px;height:36px;padding:0;justify-content:center;font-size:13px}
.dock .sep{display:none}
.modal{width:min(720px,calc(100% - 24px));display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto 1fr;column-gap:26px;align-items:start;padding:18px 26px;border-radius:22px}
.modal h2{grid-column:2;grid-row:1;margin:6px 0 4px;font-size:20px}
.modal .mp{grid-column:2;grid-row:2;font-size:13px}
.modal .qr{grid-column:1;grid-row:1/span 4;width:min(230px,calc(100dvh - 72px));margin:0}
.modal .hint{grid-column:2;grid-row:3;margin:10px 0 0}
.modal .sbtns{grid-column:2;grid-row:4;align-self:end;margin-top:12px}
.modal .sbtns .act{height:44px}
}
@media (orientation:landscape) and (max-height:340px){
.dock{width:60px;padding:8px 0;gap:5px}
.dock .ic{width:32px;height:32px}
.dock .chipb{width:48px;height:28px;font-size:12px}
.dock .act{width:48px;height:30px;font-size:12px}
}