/* MyAI+Card — 디지털 명함 공통 스타일 (테마: classic / minimal / bold) */
:root{--max:440px}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Noto Sans KR",system-ui,sans-serif;line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased;background:var(--page);color:var(--ink);min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ── 테마 토큰 ── */
[data-theme="classic"]{--page:#E9E2D5;--bg:#F3EEE5;--paper:#FAF7F1;--ink:#1B2547;--muted:#6B6A66;--line:#D8C7A4;--accent:#B08A4E;--accent-ink:#FAF7F1;--btn:#1B2547;--btn-ink:#FAF7F1;--chip:#EFE7D8;--name-font:"Noto Serif KR",serif;--grad:linear-gradient(100deg,#9C7438,#D9BD86 55%,#A8803F)}
[data-theme="minimal"]{--page:#EDEDED;--bg:#FFFFFF;--paper:#FFFFFF;--ink:#111111;--muted:#737373;--line:#E5E5E5;--accent:#111111;--accent-ink:#FFFFFF;--btn:#111111;--btn-ink:#FFFFFF;--chip:#F4F4F4;--name-font:"Noto Sans KR",sans-serif;--grad:linear-gradient(90deg,#111,#111)}
[data-theme="bold"]{--page:color-mix(in srgb,var(--brand) 80%,#000);--bg:var(--brand);--paper:#FFFFFF;--ink:#14161F;--muted:#5D6170;--line:#E6E8EF;--accent:var(--brand);--accent-ink:#FFFFFF;--btn:var(--brand);--btn-ink:#FFFFFF;--chip:color-mix(in srgb,var(--brand) 10%,#fff);--name-font:"Noto Sans KR",sans-serif;--grad:linear-gradient(90deg,#fff,#fff)}

.wrap{max-width:var(--max);margin:0 auto;min-height:100vh;background:var(--bg);box-shadow:0 0 60px rgba(0,0,0,.12)}

/* ── 명함 (90:50) ── */
.biz{padding:22px 18px 10px}
.card{position:relative;aspect-ratio:9/5;border-radius:10px;overflow:hidden;padding:7% 7.5%;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 18px 40px -18px rgba(0,0,0,.35)}
[data-theme="classic"] .card{background:var(--paper);border:1px solid var(--line)}
[data-theme="classic"] .card::before{content:"";position:absolute;inset:7px;border:1px solid rgba(176,138,78,.28);border-radius:6px;pointer-events:none}
[data-theme="minimal"] .card{background:#fff;border:1px solid #E5E5E5}
[data-theme="bold"] .card{background:#fff}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.company{font-size:11px;letter-spacing:.18em;font-weight:700}
[data-theme="classic"] .company,[data-theme="classic"] .role{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="bold"] .company{color:var(--brand)}
.logo{max-height:26px;max-width:90px;object-fit:contain}
.role{font-size:10px;letter-spacing:.2em;font-weight:700;color:var(--muted);text-transform:uppercase}
.name{font-family:var(--name-font);font-weight:900;font-size:clamp(30px,10vw,40px);line-height:1.1;letter-spacing:.03em;margin-top:4px}
[data-theme="minimal"] .name{font-weight:700;letter-spacing:-.01em}
.en{font-size:11px;letter-spacing:.32em;color:var(--muted);margin-top:4px;text-transform:uppercase}
.card-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.rule{width:34px;height:2px;background:var(--grad)}
[data-theme="bold"] .rule{background:var(--brand)}
.title{font-size:12px;color:var(--ink)}
[data-theme="bold"] .card .stripe{position:absolute;right:0;top:0;bottom:0;width:22%;background:var(--brand)}
[data-theme="bold"] .card-top,[data-theme="bold"] .card-bottom,[data-theme="bold"] .card-mid{position:relative;max-width:74%}

/* 카드 글자를 카드 폭에 비례 (좁은 화면에서도 넘치지 않게) */
.biz{container-type:inline-size}
.biz .card{padding:6cqw 7cqw}
.biz .company{font-size:clamp(8.5px,2.7cqw,12px);letter-spacing:.2em}
.biz .role{font-size:clamp(8px,2.4cqw,11px);letter-spacing:.16em}
.biz .name{font-size:clamp(24px,9.6cqw,42px);margin-top:.6cqw}
.biz .en{font-size:clamp(8.5px,2.6cqw,12px);letter-spacing:.26em;margin-top:.8cqw}
.biz .title{font-size:clamp(10px,3cqw,13px);margin-top:1.6cqw!important}
.biz .rule{width:8cqw}
.biz .logo{max-height:6.5cqw;max-width:24cqw}
.card .company,.card .role,.card .en,.card .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.card-mid{min-width:0}

/* ── 프로필 ── */
.profile{padding:18px 22px 6px;display:flex;gap:14px;align-items:center}
.avatar{width:64px;height:64px;border-radius:50%;flex:0 0 64px;object-fit:cover;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:700;font-size:22px}
[data-theme="classic"] .avatar{background:var(--ink)}
[data-theme="bold"] .avatar{background:#fff;color:var(--brand);border:3px solid rgba(255,255,255,.6)}
.intro{font-size:15.5px;font-weight:500;line-height:1.5}
[data-theme="bold"] .profile,[data-theme="bold"] .profile .intro{color:#fff}

/* ── 액션 버튼 ── */
.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px 18px}
.act{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:12px;background:var(--paper);border:1px solid var(--line);font-size:12px;font-weight:500;transition:transform .15s}
.act:active{transform:scale(.97)}
.act svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-theme="bold"] .act{border-color:transparent}
.save{margin:0 18px;display:flex;justify-content:center;align-items:center;gap:8px;padding:14px;border-radius:12px;background:var(--btn);color:var(--btn-ink);font-weight:700;font-size:15px}
.save svg{width:20px;height:20px;flex:0 0 20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-theme="bold"] .save{background:#fff;color:var(--brand)}

/* ── 섹션 ── */
.sec{margin:18px 18px 0;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px}
[data-theme="bold"] .sec{border-color:transparent}
.sec h3{font-size:11px;letter-spacing:.25em;color:var(--accent);font-weight:700;margin-bottom:10px}
[data-theme="minimal"] .sec h3{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--chip);padding:6px 12px;border-radius:999px;font-size:13px}
.list{list-style:none;display:grid;gap:8px;font-size:14px}
.list li{padding-left:14px;position:relative}
.list li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.links{display:grid;gap:8px}
.links a{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.links a span:last-child{color:var(--muted);font-size:12px}

/* ── QR / 공유 ── */
.qrbox{display:flex;gap:16px;align-items:center}
.qrbox img{width:96px;height:96px;background:#fff;padding:6px;border-radius:8px;border:1px solid var(--line)}
.qrbox p{font-size:13px;color:var(--muted)}
.share{display:flex;gap:8px;margin-top:14px}
.share button{flex:1;padding:11px;border-radius:10px;font-size:13.5px;font-weight:500;border:1px solid var(--line)}
.share .kakao{background:#FEE500;border-color:#FEE500;color:#191919}
footer{text-align:center;padding:26px 0 34px;font-size:11.5px;letter-spacing:.08em;color:var(--muted)}
[data-theme="bold"] footer{color:rgba(255,255,255,.75)}
footer a{font-weight:700}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#111;color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;opacity:0;transition:opacity .25s;pointer-events:none}
.toast.on{opacity:1}

/* ── OG 썸네일 모드 (1200x630) ── */
body.og{background:var(--bg);display:grid;place-items:center;width:1200px;height:630px;overflow:hidden;min-height:0}
body.og .wrap{display:none}
.ogbox{width:1080px;display:flex;gap:46px;align-items:center}
.ogbox .card{width:760px;flex:0 0 760px;padding:52px 58px}
.ogbox .name{font-size:76px}.ogbox .en{font-size:18px}.ogbox .company{font-size:17px}.ogbox .role{font-size:15px}.ogbox .title{font-size:20px}.ogbox .logo{max-height:46px;max-width:170px}.ogbox .rule{width:60px;height:3px}
.ogside{color:var(--ink);font-size:24px;line-height:1.5;font-weight:500}
[data-theme="bold"] .ogside{color:#fff}
.ogside small{display:block;margin-top:18px;font-size:15px;letter-spacing:.2em;opacity:.7}

/* 다른 페이지 안(미리보기)에 들어갈 때 스크롤바 숨김 */
html.embed{scrollbar-width:none}
html.embed::-webkit-scrollbar{display:none}
.share .kakao.pulse{box-shadow:0 0 0 4px rgba(254,229,0,.55),0 0 0 9px rgba(254,229,0,.25);font-weight:700}

/* 이름 옆 프로필 사진 (photo가 있으면 기본으로 카드에 표시, photo_on_card:false 면 아래 프로필로) */
.card-photo{position:absolute;right:7cqw;top:50%;transform:translateY(-38%);width:25cqw;height:25cqw;border-radius:50%;object-fit:cover;object-position:50% 20%;z-index:2;background:#ddd}
[data-theme="classic"] .card-photo{box-shadow:0 0 0 1.2cqw var(--paper),0 0 0 1.5cqw var(--gold2,#D9BD86),0 10px 24px -10px rgba(27,37,71,.45)}
[data-theme="minimal"] .card-photo{border-radius:14%;box-shadow:0 10px 24px -12px rgba(0,0,0,.4)}
[data-theme="bold"] .card-photo{right:9.5cqw;box-shadow:0 0 0 1.4cqw #fff,0 12px 26px -10px rgba(0,0,0,.45)}
.card.has-photo .card-mid,.card.has-photo .card-bottom{max-width:60%}
.card.has-photo .card-top .logo{display:none}
.card.has-photo .card-top{max-width:62%}
.profile.no-av{padding-top:6px}
.profile.no-av .intro{font-size:16px}
.ogbox .card-photo{width:200px;height:200px;right:56px}
[data-theme="classic"] .ogbox .card-photo{box-shadow:0 0 0 9px var(--paper),0 0 0 11px #D9BD86,0 16px 30px -12px rgba(27,37,71,.45)}
[data-theme="bold"] .ogbox .card-photo{right:76px;box-shadow:0 0 0 10px #fff,0 16px 30px -12px rgba(0,0,0,.45)}