:root { --pd-blue:#2f67ae; --pd-cyan:#58b9da; --pd-orange:#f5a21a; --pd-ink:#17202b; --pd-copy:#3e4854; --pd-surface:#f7f9fb; --pd-line:#dce4ec; }
* { box-sizing:border-box; }
body { margin:0; color:var(--pd-copy); background:var(--pd-surface); font-family:Arial,"Noto Sans KR",sans-serif; }
a { color:inherit; text-decoration:none; }
.pd-header { min-height:72px; padding:0 max(24px, calc((100% - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--pd-line); background:#fff; }
.pd-brand img { display:block; width:150px; height:50px; object-fit:contain; object-position:left center; }
.pd-header nav { display:flex; align-items:center; gap:18px; color:#536273; font-size:13px; font-weight:700; }
.pd-cart { padding:10px 13px; border-radius:7px; color:#fff; background:var(--pd-blue); }.pd-login { padding:9px 12px; border:1px solid #d4e0eb; border-radius:7px; color:#40566d; }
.pd-shell { width:min(100% - 48px,1180px); margin:0 auto; padding:30px 0 78px; }
.pd-crumb { margin:0 0 17px; color:#778695; font-size:12px; }
.pd-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,.9fr); overflow:hidden; border:1px solid var(--pd-line); border-radius:18px; background:#fff; }
.pd-hero-copy { padding:50px clamp(28px,5vw,66px); background:linear-gradient(135deg,#f7fbff,#edf5fc); }
.pd-eyebrow { margin:0 0 12px; color:var(--pd-blue); font-size:12px; letter-spacing:1.5px; font-weight:800; }
.pd-hero h1 { margin:0; color:var(--pd-ink); font-size:clamp(34px,4vw,52px); letter-spacing:-.07em; line-height:1.13; }
.pd-hero p:not(.pd-eyebrow) { max-width:520px; margin:19px 0 0; color:#607083; font-size:16px; line-height:1.7; }
.pd-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:23px; }
.pd-chips span { padding:7px 10px; border:1px solid #cfe0ef; border-radius:999px; color:#3f668b; background:#fff; font-size:12px; font-weight:700; }
.pd-hero-art { position:relative; min-height:330px; background:linear-gradient(135deg,#dfeefa,#fdf5e6); }
.pd-hero-art img { width:100%; height:100%; object-fit:cover; }
.pd-image-fallback { position:absolute; inset:0; display:grid; place-items:center; color:#46729e; font-size:15px; font-weight:800; text-align:center; background:linear-gradient(135deg,#e9f4fc,#fff8e9); }
.pd-image-fallback[hidden] { display:none; }
.pd-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.pd-story { position:relative; margin:28px 0 -10px; padding:30px 34% 30px 30px; overflow:hidden; border:1px solid #cfe0ef; border-radius:16px; background:linear-gradient(120deg,#fff 0%,#f1f8fd 100%); }
.pd-story::after { content:'PRINT'; position:absolute; right:28px; bottom:-14px; color:rgba(47,103,174,.08); font-size:clamp(64px,10vw,130px); font-weight:900; letter-spacing:-.1em; pointer-events:none; }
.pd-story h2 { max-width:650px; margin:0; color:var(--pd-ink); font-size:clamp(24px,3vw,34px); letter-spacing:-.065em; line-height:1.25; }
.pd-story > p:not(.pd-eyebrow) { max-width:670px; margin:13px 0 0; color:#566d82; font-size:14px; line-height:1.75; }
.pd-story .pd-story-lead { color:var(--pd-blue); font-size:16px; font-weight:800; }
.pd-checklist { position:relative; z-index:1; max-width:650px; margin-top:22px; padding:17px 19px; border-radius:10px; background:#fff; box-shadow:0 7px 18px rgba(34,76,112,.08); }
.pd-checklist h3 { margin:0 0 10px; color:#243d54; font-size:14px; }
.pd-checklist ul { display:grid; grid-template-columns:1fr; gap:7px; margin:0; padding:0; list-style:none; }
.pd-checklist li { display:flex; gap:8px; color:#54687a; font-size:13px; line-height:1.45; }
.pd-checklist li::before { content:'✓'; color:var(--pd-blue); font-weight:900; }
.pd-gallery { margin:42px 0 4px; }
.pd-gallery-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:17px; }
.pd-gallery h2 { margin:0; color:var(--pd-ink); font-size:27px; letter-spacing:-.055em; }
.pd-gallery-head > p { max-width:310px; margin:0; color:#718193; font-size:13px; line-height:1.55; text-align:right; }
.pd-gallery-grid { display:grid; grid-template-columns:1.42fr 1fr 1fr; gap:12px; }
.pd-gallery-card { position:relative; min-height:205px; margin:0; overflow:hidden; border-radius:13px; background:#dfe8ef; }
.pd-gallery-card img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .35s ease; }
.pd-gallery-card:hover img { transform:scale(1.035); }
.pd-gallery-card-1 { min-height:300px; grid-row:span 2; }
.pd-gallery-card figcaption { position:absolute; left:12px; bottom:12px; padding:6px 8px; border-radius:5px; color:#fff; background:rgba(18,31,44,.72); font-size:11px; font-weight:800; }
.pd-button { min-height:47px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--pd-blue); border-radius:8px; color:var(--pd-blue); background:#fff; font:inherit; font-size:14px; font-weight:800; cursor:pointer; }
.pd-button-primary { color:#fff; background:var(--pd-blue); }.pd-button-order { border-color:var(--pd-orange); color:#593c04; background:var(--pd-orange); }
.pd-grid { display:grid; grid-template-columns:minmax(0,1fr) 310px; align-items:start; gap:28px; margin-top:44px; }
.pd-content { display:grid; gap:42px; }.pd-side { position:sticky; top:16px; padding:22px; border:1px solid var(--pd-line); border-radius:14px; background:#fff; box-shadow:0 8px 22px rgba(31,63,94,.06); }
.pd-side h2,.pd-section h2 { margin:0; color:var(--pd-ink); letter-spacing:-.05em; }.pd-side h2 { font-size:18px; }.pd-side p { margin:9px 0 17px; color:#6d7d8d; font-size:13px; line-height:1.55; }.pd-side .pd-button { width:100%; margin-top:8px; }
.pd-section-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:18px; }.pd-section h2 { font-size:27px; }.pd-section-head p { margin:0; color:#718193; font-size:13px; }
.pd-spec-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.pd-spec { min-height:130px; padding:19px; border:1px solid var(--pd-line); border-radius:12px; background:#fff; }.pd-spec b { display:block; color:var(--pd-blue); font-size:12px; }.pd-spec strong { display:block; margin-top:10px; color:var(--pd-ink); font-size:17px; }.pd-spec p { margin:8px 0 0; color:#748393; font-size:12px; line-height:1.55; }
.pd-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.pd-step { min-height:155px; padding:18px; border-top:3px solid var(--pd-cyan); border-radius:10px; background:#fff; box-shadow:0 2px 10px rgba(31,63,94,.045); }.pd-step b { color:var(--pd-orange); font-size:12px; }.pd-step strong { display:block; margin-top:18px; color:var(--pd-ink); font-size:16px; }.pd-step p { margin:7px 0 0; color:#748393; font-size:12px; line-height:1.55; }
.pd-rich-guide { padding:30px; border:1px solid var(--pd-line); border-radius:15px; background:#fff; }
.pd-rich-guide-head { padding-bottom:21px; border-bottom:1px solid var(--pd-line); }
.pd-rich-guide h2 { margin:0; color:var(--pd-ink); font-size:27px; letter-spacing:-.055em; }
.pd-rich-guide-head > p:last-child { margin:10px 0 0; color:#718193; font-size:14px; line-height:1.65; }
.pd-rich-guide-list { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
.pd-rich-guide-list article { display:grid; grid-template-columns:37px minmax(0,1fr); gap:10px; padding:23px 0; border-bottom:1px solid #e8eef3; }
.pd-rich-guide-list article:nth-last-child(-n+2) { border-bottom:0; }
.pd-rich-guide-list span { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; color:var(--pd-blue); background:#edf5fc; font-size:11px; font-weight:900; }
.pd-rich-guide-list h3 { margin:3px 0 8px; color:#23394e; font-size:16px; letter-spacing:-.04em; }
.pd-rich-guide-list p { margin:0; color:#637588; font-size:13px; line-height:1.7; }
.pd-cautions { padding:29px; border:1px solid #f0d39a; border-radius:15px; background:#fffaf0; }
.pd-cautions-head { margin-bottom:16px; }.pd-cautions h2 { margin:0; color:#3b2c12; font-size:27px; letter-spacing:-.055em; }.pd-cautions-head > p:last-child { margin:10px 0 0; color:#856d47; font-size:13px; line-height:1.6; }
.pd-cautions details { border-top:1px solid #ecdcbf; }.pd-cautions details:last-child { border-bottom:1px solid #ecdcbf; }.pd-cautions summary { min-height:54px; display:flex; align-items:center; gap:10px; cursor:pointer; color:#46371e; font-size:14px; font-weight:800; list-style:none; }.pd-cautions summary::-webkit-details-marker { display:none; }.pd-cautions summary span { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; color:#764d00; background:#ffe2a6; font-size:13px; font-weight:900; }.pd-cautions summary i { margin-left:auto; color:#9c7a3c; font-size:20px; font-style:normal; font-weight:400; }.pd-cautions details[open] summary i { transform:rotate(45deg); }.pd-cautions details p { margin:0; padding:0 30px 17px; color:#6c5a3e; font-size:13px; line-height:1.75; }
.pd-guide { padding:25px; border-radius:14px; color:#fff; background:linear-gradient(120deg,#24518b,#3678ba); }.pd-guide h2 { color:#fff; }.pd-guide p { max-width:660px; margin:10px 0 18px; color:rgba(255,255,255,.82); font-size:14px; line-height:1.65; }.pd-guide ul { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0; padding:0; list-style:none; }.pd-guide li { padding:11px; border:1px solid rgba(255,255,255,.23); border-radius:8px; background:rgba(255,255,255,.09); font-size:12px; font-weight:700; }
.pd-related { padding:22px; border:1px solid var(--pd-line); border-radius:14px; background:#fff; }.pd-related h2 { margin:0; color:var(--pd-ink); font-size:23px; letter-spacing:-.05em; }.pd-related > div { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:17px; }.pd-related a { display:flex; flex-direction:column; gap:7px; min-height:76px; justify-content:center; padding:13px; border:1px solid #d8e4ee; border-radius:9px; color:#2d4e6c; font-size:14px; font-weight:800; }.pd-related a span { color:#7990a5; font-size:11px; font-weight:700; }.pd-related a.is-current { border-color:var(--pd-blue); color:var(--pd-blue); background:#eef6fd; }
.pd-calculator { padding:25px; border:1px solid #bed6e9; border-radius:14px; background:#eff7fd; }.pd-calculator h2 { font-size:24px; }.pd-calculator > p { margin:9px 0 18px; color:#61758a; font-size:13px; line-height:1.6; }.pd-calc-fields { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:10px; }.pd-calc-fields label { display:grid; gap:6px; color:#49667f; font-size:12px; font-weight:800; }.pd-calc-fields select,.pd-calc-fields input { width:100%; height:42px; padding:0 10px; border:1px solid #b9d0e2; border-radius:7px; color:#243d54; background:#fff; font:inherit; }.pd-calc-result { display:grid; grid-template-columns:1fr 1fr minmax(210px,1.45fr); align-items:end; gap:18px; margin-top:18px; padding:17px; border-radius:9px; background:#fff; }.pd-calc-result span { display:block; color:#668096; font-size:12px; }.pd-calc-result strong { display:block; margin-top:5px; color:var(--pd-blue); font-size:25px; letter-spacing:-.04em; }.pd-calc-result small { color:#768797; font-size:11px; line-height:1.5; }
.pd-options { display:grid; gap:10px; margin:18px 0 0; padding:0; list-style:none; }.pd-options li { display:flex; justify-content:space-between; gap:15px; padding:0 0 10px; border-bottom:1px solid #e8eef3; color:#617487; font-size:13px; }.pd-options b { color:#344a60; }
.pd-footer { padding:44px max(24px,calc((100% - 1180px)/2)); display:flex; flex-direction:column; align-items:center; gap:13px; color:#d9e0e8; background:#252a31; text-align:center; }.pd-footer-kakao { display:inline-flex; min-height:44px; align-items:center; padding:0 18px; border-radius:8px; color:#292000; background:#ffe100; font-size:14px; font-weight:800; }.pd-footer-company { display:grid; gap:4px; font-size:12px; line-height:1.55; color:#c5ced8; }.pd-footer-company strong { color:#fff; font-size:16px; }.pd-footer nav { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 15px; margin-top:4px; font-size:12px; }.pd-footer nav a { color:#eef2f6; }.pd-footer > p { margin:2px 0 0; color:#8996a3; font-size:11px; }
@media (max-width:820px) { .pd-header { min-height:64px; padding:0 16px; }.pd-brand img { width:124px; height:43px; }.pd-header nav { gap:10px; font-size:11px; }.pd-header nav a:nth-child(-n+3) { display:none; }.pd-cart { padding:9px 10px; }.pd-login { padding:8px 10px; }.pd-shell { width:min(100% - 32px,680px); padding-top:20px; }.pd-hero { grid-template-columns:1fr; }.pd-hero-copy { padding:34px 24px; }.pd-hero-art { min-height:220px; order:-1; }.pd-story { margin-top:20px; padding:25px; }.pd-gallery { margin-top:32px; }.pd-gallery-grid { grid-template-columns:1.15fr 1fr; }.pd-gallery-card-1 { min-height:270px; }.pd-gallery-card-3 { grid-column:2; }.pd-grid { grid-template-columns:1fr; gap:34px; margin-top:34px; }.pd-side { position:static; order:-1; }.pd-spec-grid { grid-template-columns:1fr 1fr; }.pd-steps { grid-template-columns:1fr 1fr; }.pd-rich-guide-list { grid-template-columns:1fr; }.pd-rich-guide-list article:nth-last-child(2) { border-bottom:1px solid #e8eef3; }.pd-guide ul { grid-template-columns:1fr; }.pd-related > div { grid-template-columns:1fr 1fr 1fr; }.pd-calc-fields { grid-template-columns:1fr 1fr; }.pd-calc-fields label:last-child { grid-column:1 / -1; }.pd-calc-result { grid-template-columns:1fr 1fr; align-items:start; gap:14px; }.pd-calc-result small { grid-column:1 / -1; } }
@media (max-width:430px) { .pd-header nav a:first-child,.pd-login { display:none; }.pd-hero h1 { font-size:34px; }.pd-hero p:not(.pd-eyebrow) { font-size:14px; }.pd-gallery-head { align-items:start; flex-direction:column; gap:8px; }.pd-gallery-head > p { text-align:left; }.pd-gallery-grid { grid-template-columns:1fr; }.pd-gallery-card,.pd-gallery-card-1,.pd-gallery-card-3 { min-height:220px; grid-column:auto; grid-row:auto; }.pd-section-head { align-items:start; flex-direction:column; }.pd-section h2 { font-size:24px; }.pd-spec-grid,.pd-steps,.pd-calc-fields,.pd-calc-result,.pd-related > div { grid-template-columns:1fr; }.pd-calc-fields label:last-child,.pd-calc-result small { grid-column:auto; }.pd-guide { padding:20px; }.pd-hero-actions .pd-button { width:100%; }.pd-footer { padding:34px 20px; } }