:root { --dc10-blue:#0954df; --dc10-navy:#102244; --dc10-sky:#eaf5ff; --dc10-orange:#ff7315; --dc10-line:#dce5f1; }
* { box-sizing:border-box; }.dc10-page { margin:0; color:var(--dc10-navy); background:#fff; font-family:"Noto Sans KR","Pretendard",Arial,sans-serif; }.dc10-header { height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 max(24px,calc((100% - 1240px)/2)); border-bottom:1px solid #edf0f4; background:#fff; }.dc10-brand { display:inline-flex; align-items:center; gap:11px; color:var(--dc10-navy); text-decoration:none; }.dc10-brand img { width:104px; height:45px; object-fit:contain; }.dc10-brand strong { padding-left:11px; border-left:1px solid #d8e0e9; font-size:18px; letter-spacing:-.04em; }.dc10-header nav { display:flex; align-items:center; gap:26px; }.dc10-header nav a { color:#43526a; font-size:14px; font-weight:700; text-decoration:none; }.dc10-header .dc10-store-link { color:var(--dc10-blue); }.dc10-header .dc10-profile-link { padding:10px 15px; border-radius:7px; color:#fff; background:var(--dc10-blue); }
.dc10-hero { min-height:630px; display:grid; grid-template-columns:minmax(390px,.88fr) minmax(460px,1.12fr); align-items:center; gap:20px; overflow:hidden; padding:62px max(24px,calc((100% - 1240px)/2)); background:radial-gradient(circle at 75% 35%,#e4f3ff 0,rgba(234,245,255,.42) 26%,transparent 50%),linear-gradient(115deg,#fff 0%,#fff 48%,#eff8ff 100%); }.dc10-hero-copy { position:relative; z-index:1; }.dc10-kicker { margin:0 0 16px; color:var(--dc10-blue); font-size:12px; font-weight:900; letter-spacing:.13em; }.dc10-hero h1 { margin:0; color:#0d1d3d; font-size:clamp(42px,4.3vw,68px); letter-spacing:-.085em; line-height:1.13; }.dc10-hero h1 em { color:var(--dc10-blue); font-style:normal; }.dc10-lead { margin:25px 0 28px; color:#596b83; font-size:17px; line-height:1.7; }.dc10-primary,.dc10-submit { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:58px; padding:0 25px; border:0; border-radius:10px; color:#fff; background:var(--dc10-blue); box-shadow:0 12px 24px rgba(9,84,223,.19); font:inherit; font-size:16px; font-weight:900; text-decoration:none; cursor:pointer; }.dc10-primary span,.dc10-submit span { font-size:23px; }.dc10-note { margin:15px 0 0; color:#8490a0; font-size:12px; }.dc10-hero-art { transform:translateX(5%); }.dc10-hero-art img { display:block; width:100%; min-width:620px; max-width:920px; filter:drop-shadow(0 22px 30px rgba(34,75,124,.16)); }
.dc10-how,.dc10-request { width:min(100% - 48px,1160px); margin:0 auto; }.dc10-how { padding:94px 0 82px; text-align:center; }.dc10-how h2,.dc10-request h2 { margin:0; color:#142646; font-size:clamp(28px,3vw,40px); letter-spacing:-.065em; }.dc10-how ol { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:45px 0 0; padding:0; list-style:none; text-align:left; }.dc10-how li { position:relative; display:grid; gap:9px; min-height:160px; padding:25px 21px; border-radius:14px; background:#f7faff; }.dc10-how li:not(:last-child)::after { content:'→'; position:absolute; z-index:2; top:65px; right:-18px; color:var(--dc10-blue); font-size:24px; }.dc10-how b { color:var(--dc10-orange); font-size:13px; }.dc10-how strong { color:#162a49; font-size:18px; }.dc10-how span { color:#6f7e91; font-size:13px; line-height:1.55; }
.dc10-request { margin-bottom:92px; overflow:hidden; border-radius:24px; background:linear-gradient(135deg,#0d4fc7,#0970e8); box-shadow:0 18px 45px rgba(15,74,166,.18); }.dc10-request-heading { padding:47px 54px 30px; color:#fff; }.dc10-request-heading .dc10-kicker { color:#bfe2ff; }.dc10-request-heading h2 { color:#fff; }.dc10-request-heading > p:last-child { margin:13px 0 0; color:#dbeeff; font-size:15px; }.dc10-request form { padding:34px 54px 52px; background:#fff; }.dc10-contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.dc10-contact-grid label,.dc10-message { display:grid; gap:7px; color:#3e526b; font-size:12px; font-weight:800; }.dc10-contact-grid input,.dc10-message textarea { width:100%; padding:0 13px; border:1px solid var(--dc10-line); border-radius:8px; color:#26384f; background:#fff; font:inherit; font-size:14px; }.dc10-contact-grid input { height:47px; }.dc10-message { margin-top:19px; }.dc10-message textarea { min-height:95px; padding-top:12px; resize:vertical; }.dc10-files { display:grid; grid-template-columns:1fr 44px 1fr; align-items:center; gap:18px; margin-top:26px; }.dc10-file-card { position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:13px; align-items:center; min-height:112px; padding:20px; border:1px dashed #82ace2; border-radius:12px; color:#24466d; background:#f7fbff; cursor:pointer; }.dc10-file-card input { position:absolute; width:1px; height:1px; opacity:0; }.dc10-file-index { grid-row:span 2; display:grid; place-items:center; width:39px; height:39px; border-radius:50%; color:#fff; background:var(--dc10-blue); font-size:16px; font-weight:900; }.dc10-file-card strong { font-size:16px; }.dc10-file-card small { color:#7a8b9d; font-size:12px; }.dc10-file-select { grid-column:2; margin-top:8px; color:var(--dc10-blue); font-size:12px; font-weight:900; }.dc10-plus { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:var(--dc10-blue); background:#e7f2ff; font-size:29px; }.dc10-file-lists { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:9px; }.dc10-file-lists div { display:flex; flex-wrap:wrap; gap:6px; }.dc10-file-lists span { padding:6px 8px; border-radius:5px; color:#47617a; background:#eff4f8; font-size:11px; }.dc10-file-lists small { margin-left:5px; color:#8998a7; }.dc10-agreement { display:flex; align-items:flex-start; gap:8px; margin:18px 0; color:#647487; font-size:12px; line-height:1.5; }.dc10-agreement input { margin-top:2px; }.dc10-submit { width:100%; min-height:62px; border-radius:9px; }.dc10-submit:disabled { opacity:.65; cursor:wait; }.dc10-form-message { min-height:18px; margin:14px 0 0; color:#32683f; font-size:13px; text-align:center; }.dc10-footer { display:flex; align-items:center; justify-content:center; gap:13px; padding:31px 20px; color:#d7e0ea; background:#14223a; font-size:12px; }.dc10-footer strong { color:#fff; font-size:18px; }.dc10-footer a { color:#afcef5; text-decoration:none; }
@media (max-width:820px) { .dc10-header { height:64px; padding:0 16px; }.dc10-brand img { width:89px; }.dc10-brand strong { font-size:15px; }.dc10-header nav { gap:12px; }.dc10-header nav a:not(.dc10-profile-link) { display:none; }.dc10-hero { grid-template-columns:1fr; min-height:auto; padding:45px 22px 0; }.dc10-hero h1 { font-size:43px; }.dc10-hero-art { margin:23px -22px 0; transform:none; }.dc10-hero-art img { min-width:0; width:100%; }.dc10-how,.dc10-request { width:min(100% - 32px,680px); }.dc10-how { padding:62px 0; }.dc10-how ol { grid-template-columns:1fr 1fr; }.dc10-how li:not(:last-child)::after { display:none; }.dc10-request-heading,.dc10-request form { padding-inline:22px; }.dc10-contact-grid { grid-template-columns:1fr 1fr; }.dc10-files { grid-template-columns:1fr; gap:10px; }.dc10-plus { justify-self:center; }.dc10-file-lists { grid-template-columns:1fr; gap:5px; }.dc10-footer { flex-wrap:wrap; } }
@media (max-width:480px) { .dc10-hero h1 { font-size:35px; }.dc10-lead { font-size:15px; }.dc10-primary { width:100%; }.dc10-how ol,.dc10-contact-grid { grid-template-columns:1fr; }.dc10-how li { min-height:120px; }.dc10-request { width:100%; margin-bottom:0; border-radius:0; }.dc10-request-heading,.dc10-request form { padding-inline:18px; } }

/* [인쇄톡 쇼핑몰팀 추가 | 2026-08-03] DC10 소개 이미지를 중심으로 두고, 접수 행동을 바로 이어갑니다. */
.dc10-hero.dc10-hero-art-only { display:flex; align-items:center; justify-content:center; min-height:0; padding:42px 24px 18px; background:radial-gradient(circle at 50% 20%,#e9f5ff 0,rgba(234,245,255,.48) 30%,transparent 65%),linear-gradient(180deg,#fff,#f8fbff); }
.dc10-hero-art-only .dc10-hero-art { position:relative; width:min(100%,920px); margin:0; transform:none; }.dc10-hero-art-only .dc10-hero-art img,.dc10-hero-art-only .dc10-hero-art video { display:block; width:100%; min-width:0; max-width:920px; margin:0 auto; border-radius:16px; }.dc10-hero-sound { position:absolute; right:14px; bottom:14px; display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 12px; border:1px solid rgba(255,255,255,.72); border-radius:999px; color:#18345e; background:rgba(255,255,255,.92); box-shadow:0 5px 17px rgba(14,42,78,.16); font:inherit; font-size:12px; font-weight:800; cursor:pointer; }.dc10-hero-sound:hover { color:#fff; border-color:var(--dc10-blue); background:var(--dc10-blue); }.dc10-hero-sound:focus-visible { outline:3px solid rgba(9,84,223,.35); outline-offset:3px; }
.dc10-quick-start { width:min(100% - 48px,1160px); display:flex; align-items:center; justify-content:space-between; gap:32px; margin:0 auto; padding:28px 36px; border:1px solid #d8e9fb; border-radius:18px; background:linear-gradient(100deg,#f6faff,#fff); box-shadow:0 10px 25px rgba(35,83,140,.08); }.dc10-quick-start .dc10-kicker { margin-bottom:8px; }.dc10-quick-start h1 { margin:0; color:#142646; font-size:clamp(23px,2.5vw,34px); letter-spacing:-.065em; }.dc10-quick-start p:not(.dc10-kicker) { margin:9px 0 0; color:#61728a; font-size:14px; line-height:1.65; }.dc10-quick-start .dc10-primary { flex:0 0 auto; white-space:nowrap; }
.dc10-intro { width:min(100% - 48px,1160px); margin:0 auto; padding:82px 0 28px; }.dc10-intro h2 { max-width:760px; margin:0; color:#142646; font-size:clamp(28px,3vw,40px); letter-spacing:-.065em; line-height:1.28; }.dc10-intro-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:28px; }.dc10-intro-grid p { margin:0; padding:23px 24px; border-radius:12px; color:#5e6f83; background:#f7faff; font-size:15px; line-height:1.8; }
@media (max-width:820px) { .dc10-hero.dc10-hero-art-only { padding:22px 16px 10px; }.dc10-quick-start,.dc10-intro { width:min(100% - 32px,680px); }.dc10-quick-start { align-items:flex-start; flex-direction:column; gap:17px; padding:24px 20px; }.dc10-quick-start .dc10-primary { width:100%; }.dc10-intro { padding-top:58px; }.dc10-intro-grid { grid-template-columns:1fr; gap:10px; }.dc10-intro-grid p { padding:18px; font-size:14px; } }

/* [인쇄톡 DC10팀 추가 | 2026-08-03] 로그인 안내창 */
.dc10-login-prompt[hidden] { display:none; }.dc10-login-prompt { position:fixed; z-index:10000; inset:0; display:grid; place-items:center; padding:22px; }.dc10-login-prompt-backdrop { position:absolute; inset:0; background:rgba(16,34,68,.48); backdrop-filter:blur(3px); }.dc10-login-prompt-card { position:relative; width:min(100%,520px); padding:34px; border:1px solid #dce8f5; border-radius:18px; background:#fff; box-shadow:0 24px 60px rgba(8,29,62,.28); }.dc10-login-prompt-icon { display:grid; place-items:center; width:38px; height:38px; margin-bottom:16px; border-radius:12px; color:#fff; background:linear-gradient(135deg,#0a57dd,#287eec); font-size:20px; }.dc10-login-prompt-card .dc10-kicker { margin-bottom:8px; }.dc10-login-prompt-card h2 { margin:0; color:#142646; font-size:26px; letter-spacing:-.065em; }.dc10-login-prompt-card > p:not(.dc10-kicker) { margin:16px 0 10px; color:#53667c; font-size:14px; line-height:1.75; }.dc10-login-prompt-card small { display:block; color:#8493a3; font-size:11px; line-height:1.55; }.dc10-login-prompt-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:24px; }.dc10-login-prompt-actions button { min-height:46px; padding:0 15px; border-radius:8px; font:inherit; font-size:13px; font-weight:800; cursor:pointer; }.dc10-prompt-cancel { border:1px solid #d9e3ed; color:#637589; background:#fff; }.dc10-prompt-login { border:1px solid #0954df; color:#fff; background:#0954df; box-shadow:0 8px 17px rgba(9,84,223,.2); }.dc10-prompt-login span { margin-left:12px; font-size:19px; }.dc10-prompt-login:focus-visible,.dc10-prompt-cancel:focus-visible { outline:3px solid rgba(9,84,223,.28); outline-offset:2px; }
@media (max-width:480px) { .dc10-login-prompt { padding:16px; align-items:end; }.dc10-login-prompt-card { padding:27px 22px; border-radius:16px; }.dc10-login-prompt-card h2 { font-size:23px; }.dc10-login-prompt-actions { flex-direction:column-reverse; }.dc10-login-prompt-actions button { width:100%; } }