/* 디지털 명함 3차 (2026-11-12) — 세로 명함 50:90 한 면. 한국 명함 관례: 이름은 1.4배 정도만, 직함은 이름 옆, 연락처는 명함 안 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root{
  --navy:#1F2E55; --pink:#C81F76; --pinkbg:#F9C6DD; --ink:#1E2124; --ink2:#464C53; --ink3:#5F6B76;
  --line:#E6E8EA; --desk:#F4F5F6;
  --sans:"Pretendard Variable",Pretendard,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--desk);color:var(--ink);font-family:var(--sans);word-break:keep-all}
a{color:inherit;text-decoration:none}
img{display:block}
ul{list-style:none;margin:0;padding:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px;border-radius:4px}

.desk{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px 16px}
.cw{container-type:inline-size;width:min(100%,420px,calc((100svh - 128px) * .5556))}
.card{aspect-ratio:50/90;background:#fff;border:1px solid var(--line);border-radius:2.4cqw;overflow:hidden}
.in{height:100%;padding:7cqw 7.4cqw;display:flex;flex-direction:column}

/* 이름 줄 */
.logo{width:34cqw;height:auto}
.nm{display:flex;align-items:baseline;gap:2.6cqw;flex-wrap:wrap}
.nm b{font-size:6.4cqw;font-weight:800;letter-spacing:.06em;color:var(--navy)}
.nm span{font-size:3.9cqw;font-weight:600;color:var(--ink2)}
.biz{margin-top:1cqw;font-size:3.5cqw;color:var(--ink3)}

/* 홈페이지와 같은 아이콘: 남색 선 + 연분홍 면 */
.ic{width:5.6cqw;height:5.6cqw;flex:none;fill:none}
.ic .st{stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic .fl{fill:var(--pinkbg);stroke:none}

/* 연락처 */
.ct a{display:flex;align-items:center;gap:2.4cqw;min-height:7.6cqw;font-size:3.8cqw;font-weight:600;color:var(--ink);line-height:1.2}
.ct small{font-size:3.1cqw;font-weight:500;color:var(--ink3);min-width:13.5cqw}

/* 경력·자격 */
.cv h2{margin:0 0 1.2cqw;font-size:3.3cqw;font-weight:700;color:var(--navy)}
.cv li{display:flex;gap:2cqw;font-size:3.35cqw;line-height:1.55;color:var(--ink2)}
.cv li i{font-style:normal;color:var(--ink3);flex:none;width:18.6cqw;font-variant-numeric:tabular-nums;white-space:nowrap}

/* 채널: 그림 + 이름표 */
.ch a{display:flex;align-items:center;gap:2cqw;min-height:7.4cqw;font-size:3.3cqw;color:var(--ink2);line-height:1.25}
.ch a b{font-weight:700;color:var(--ink)}
.ch .g{width:5.8cqw;height:5.8cqw;flex:none;border-radius:1.4cqw;overflow:hidden;display:grid;place-items:center;border:1px solid var(--line)}
.ch .g img{width:100%;height:100%;object-fit:contain}
.ch .g img.pad{width:74%;height:74%}
.ch .g svg{width:100%;height:100%}

.hr{border:0;border-top:1px solid var(--line);margin:0}
.qr img{width:19cqw;height:19cqw}
.qr span{display:block;text-align:center;font-size:2.7cqw;color:var(--ink3);margin-top:.6cqw}

/* 카드 아래 단추 */
.acts{display:flex;gap:10px;width:min(100%,420px,calc((100svh - 128px) * .5556));min-width:min(100%,300px)}
.btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 16px;border-radius:8px;font:700 17px/1 var(--sans);cursor:pointer;border:1px solid transparent}
.btn svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-main{background:var(--pink);color:#fff}