*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#17294d;background:#fff;font-family:'Noto Sans KR',Arial,sans-serif;font-size:14px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit;background:white;border:1px solid #dce2ec;border-radius:8px;padding:10px 14px;font-weight:500}button:hover{background:#f0f4fc;border-color:#b4c4e8}button:disabled{opacity:.4;cursor:default}a{color:inherit;text-decoration:none}a:hover{color:#315ed4}button:focus-visible,a:focus-visible{outline:3px solid #8faef7;outline-offset:3px}[hidden]{display:none!important}.site-header{height:88px;border-bottom:1px solid #edf0f5;display:flex;align-items:center;justify-content:space-between;padding:0 5.5%;gap:20px}.brand{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:800;letter-spacing:-.7px}.brand-icon{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;color:#fff;background:#2d59cc;font-size:29px}.site-header nav{display:flex;gap:33px;color:#5a6579;font-weight:500}.outline{color:#315ed4;background:#fff;border-color:#cbd7f0}.primary{background:#315ed4;border-color:#315ed4;color:white;font-weight:600}.primary:hover{background:#244bb7;color:#fff}.hero{min-height:545px;padding:78px 6% 65px;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;background:linear-gradient(110deg,#fafbff,#f5f7fc)}.eyebrow{font-size:11px;letter-spacing:2.1px;font-weight:700;color:#4770cc}.hero h1{font-size:46px;line-height:1.38;letter-spacing:-2.4px;margin:21px 0 18px;font-weight:750}.hero h1 em{font-style:normal;color:#315ed4}.hero p{font-size:16px;line-height:1.9;color:#6a7588}.hero-actions{display:flex;align-items:center;gap:23px;margin-top:29px}.hero-actions .primary{padding:16px 24px}.hero-actions .primary span{margin-left:24px}.hero-actions a{font-size:13px;font-weight:600}.hero-benefits{display:flex;gap:18px;margin-top:25px;font-size:11px;color:#788297}.hero-art{position:relative;min-height:380px;max-width:600px}.art-dots{position:absolute;inset:0;background-image:radial-gradient(#cdd7e9 1px,transparent 1px);background-size:17px 17px;mask-image:radial-gradient(ellipse,black,transparent 72%)}.sample{position:absolute;box-shadow:0 20px 40px #26395919}.vertical{background:#284eae;color:#fff;width:190px;height:328px;top:-9px;right:57px;transform:rotate(8deg);padding:23px;overflow:hidden}.vertical small{font-size:7px;letter-spacing:1px;line-height:1.5}.vertical strong{display:block;font-size:37px;line-height:1.2;margin-top:17px;letter-spacing:-2px;position:relative;z-index:1}.vertical span{position:absolute;bottom:21px;font-size:8px;line-height:1.7}.sun-shape{position:absolute;width:125px;height:125px;background:#a6c7ef;border-radius:50%;bottom:43px;right:-48px}.horizontal{bottom:21px;left:0;background:#e7ecdc;width:380px;height:175px;transform:rotate(-6deg);padding:24px;color:#314b3c;display:flex;align-items:center}.horizontal small{font-size:9px}.horizontal strong{display:block;font-size:26px;line-height:1.3;letter-spacing:-1.2px;margin:7px 0}.horizontal span{font-size:9px}.coffee{font-size:66px;margin-left:12px}.floating-label{position:absolute;background:white;box-shadow:0 8px 30px #293a5f12;padding:12px 18px;border-radius:30px;bottom:6px;right:0;font-size:11px;color:#51617d}.section{padding:64px 6%}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px}h2{font-size:26px;letter-spacing:-1px;margin:12px 0 0}.section-heading>p{color:#8190a4;font-size:13px}.format-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.format-card{text-align:left;padding:26px 28px;border-radius:13px;border-color:#e3e8f0;transition:transform .2s}.format-card:hover{transform:translateY(-3px)}.format-card h3{font-size:19px;margin:22px 0 8px}.format-card h3 span{float:right;color:#8494b2}.format-card p{color:#778396;font-size:13px;margin:0 0 12px}.format-card>small{font-size:11px;color:#9aa4b3}.format-icon{height:56px;color:#456ac4;display:flex;align-items:center;justify-content:center;background:#edf2fd;border:1px solid #c1cfee;font-size:11px}.wide{width:135px;height:42px;margin:7px 0}.paper{width:43px;font-size:17px;display:block;padding:6px}.paper span{display:block;font-size:8px;line-height:.9}.format-icon.roll{width:28px;font-size:8px;text-align:center;border-bottom:4px solid #8fa9df}.templates{background:#fafbfe}.pill{background:#eef3fc;border-radius:20px;padding:8px 14px;font-size:11px;color:#6681b4}.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.template-card{border:0;text-align:left;padding:0;background:transparent}.template-card:hover{background:transparent}.template-thumb{height:205px;padding:26px;position:relative;overflow:hidden;border-radius:8px;display:flex;flex-direction:column;justify-content:center}.template-thumb small{font-size:10px;position:relative;z-index:1}.template-thumb strong{font-size:25px;white-space:pre-line;line-height:1.4;max-width:85%;position:relative;z-index:1;margin-top:10px;font-weight:800;letter-spacing:-1.2px}.template-thumb i{position:absolute;right:-35px;bottom:-65px;border-radius:50%;width:180px;height:180px}.template-thumb.roll strong,.template-thumb.flyer strong{font-size:27px}.template-card h3{font-size:14px;margin:14px 0 5px}.template-card p{color:#8d97a7;font-size:11px;margin:0}.guide{text-align:center}.guide>div{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:40px}.guide b{font-size:13px;color:#4e75cb;display:inline-grid;place-items:center;background:#eef3ff;width:40px;height:40px;border-radius:12px}.guide h3{font-size:16px}.guide p{font-size:12px;color:#8791a2}.faq{max-width:950px;margin:auto;padding-top:15px;padding-bottom:80px}.faq h2{margin-bottom:25px}.faq details{border-bottom:1px solid #e6eaf1;padding:18px 0}.faq summary{cursor:pointer;font-weight:500}.faq details p{line-height:1.9;color:#6d7b91;font-size:13px}footer{border-top:1px solid #e8edf4;padding:40px 6%;display:flex;justify-content:space-between;color:#8793a5}footer .brand{color:#314766;font-size:16px}footer p{font-size:11px}footer button{border:0;font-size:11px;background:transparent;padding:6px 12px}footer>div:last-child{text-align:right}.editor-header{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 20px;border-bottom:1px solid #e4e8ef}.editor-header>div{display:flex;align-items:center;gap:9px}.editor-header button{font-size:12px;padding:10px}.editor-header input{border:0;width:180px;font-weight:600;padding:8px}#save-status{font-size:10px;color:#7184a1}.editor-toolbar{height:54px;display:flex;align-items:center;justify-content:space-between;padding:8px 18px;border-bottom:1px solid #dce3ee;gap:8px}.editor-toolbar button{border:0;font-size:11px;padding:7px}.editor-toolbar>div{display:flex;align-items:center;gap:3px}#size-label,#zoom-label{font-size:11px;color:#7a87a0}.editor-body{display:grid;grid-template-columns:215px minmax(0,1fr) 235px;height:calc(100dvh - 128px);min-height:460px}.editor-body aside{padding:22px 17px;overflow:auto;background:#fff}.editor-body h3{font-size:14px;margin:0 0 20px}.editor-body h4{font-size:11px;color:#67778f;margin:24px 0 11px}.editor-body h4 small{float:right;font-weight:400}.workspace{background:#edf0f6;background-image:radial-gradient(#c9d1e1 .7px,transparent .7px);background-size:15px 15px;display:flex;align-items:center;justify-content:center;position:relative;overflow:auto;padding:35px 25px 50px}.canvas-container{box-shadow:0 5px 28px #34456824}#canvas-wrap{flex:none}.canvas-note{position:absolute;bottom:17px;left:0;right:0;text-align:center;font-size:10px;color:#8d99ae;pointer-events:none}.tool-wide{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:12px;padding:12px;background:#f8faff}.shape-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.shape-grid button{font-size:24px;padding:8px 1px;line-height:1.3}.shape-grid small{display:block;font-size:8px;color:#8190a4}.hint{font-size:10px;line-height:1.8;color:#8895a8}.storage-note{background:#f4f7fd;border-radius:6px;padding:10px;margin-top:25px}label{display:block;font-size:11px;color:#6c7c94;margin:12px 0}input:not([type=checkbox]),select,textarea{width:100%;padding:9px;border:1px solid #dce3ee;border-radius:6px;background:#fff;color:#263c5d;margin-top:5px;min-width:0}input[type=color]{height:36px;padding:4px}input[type=range]{padding:0;accent-color:#315ed4}.field{display:flex;align-items:center;gap:20px}.field input{width:65px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field-grid label{margin:6px 0}.check{display:flex;align-items:center;gap:6px}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.action-grid button{font-size:10px;padding:9px 4px}.layer{display:block;width:100%;font-size:10px;text-align:left;margin:5px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mobile-tabs{display:none}dialog{border:1px solid #e0e7f2;border-radius:16px;padding:28px;width:min(470px,92vw);box-shadow:0 30px 90px #15294c33;color:#17294d;max-height:90dvh}dialog::backdrop{background:#10234370;backdrop-filter:blur(3px)}.dialog-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.dialog-title h2{margin:0;font-size:22px}.dialog-title button{font-size:22px;border:0;padding:0 6px}.full{width:100%;margin-top:16px}#export-preview{width:100%;height:190px;object-fit:contain;background:#edf1f7;border:1px solid #e2e8f0;padding:12px}#info-body{line-height:2;color:#65768f;font-size:13px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;transition:.2s;pointer-events:none;background:#142a4e;color:white;padding:14px 23px;border-radius:10px;z-index:9999;box-shadow:0 5px 25px #172a4d25;max-width:90vw;font-size:12px}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:1450px){.hero,.section{padding-left:max(6%,calc((100vw - 1280px)/2));padding-right:max(6%,calc((100vw - 1280px)/2))}.hero h1{font-size:53px}}
@media(max-width:1050px){.hero h1{font-size:37px}.hero{gap:15px}.horizontal{width:320px}.horizontal strong{font-size:22px}.vertical{right:15px}.hero-benefits{gap:8px;font-size:9px}.site-header nav{gap:18px}.editor-body{grid-template-columns:180px minmax(0,1fr) 205px}#save-status{display:none}.section-heading>p{display:none}}
@media(max-width:760px){.site-header{height:72px;padding:0 5%;flex-wrap:wrap}.site-header nav{display:none}.brand{font-size:16px}.site-header .outline{font-size:10px;padding:10px}.hero{grid-template-columns:1fr;padding:45px 6% 35px}.hero h1{font-size:38px}.hero p{font-size:14px}.hero-art{min-height:335px;margin:25px auto 0;width:95%;max-width:430px}.vertical{height:285px;width:164px;right:14px;top:0}.vertical strong{font-size:32px}.horizontal{width:285px;height:150px;bottom:18px;padding:20px}.horizontal strong{font-size:22px}.coffee{font-size:44px}.hero-benefits{font-size:9px;gap:14px}.hero-actions{gap:14px}.hero-actions .primary{padding:14px 17px}.hero-actions a{font-size:11px}.section{padding:40px 6%}h2{font-size:23px}.format-grid{gap:12px;grid-template-columns:1fr}.format-card{padding:20px;position:relative}.format-card .format-icon{float:right;margin:12px 0 0 20px}.format-card h3{margin:0 0 8px}.format-card h3 span{display:none}.template-grid{grid-template-columns:1fr 1fr;gap:20px 12px}.template-thumb{height:175px;padding:15px}.template-thumb strong,.template-thumb.roll strong,.template-thumb.flyer strong{font-size:20px}.template-thumb small{font-size:8px}.template-card h3{font-size:12px}.template-card p{font-size:9px}.pill{display:none}.guide>div{gap:12px}.guide p{font-size:10px;line-height:1.8}.guide h3{font-size:13px}footer{flex-direction:column;gap:22px}footer>div:last-child{text-align:left}footer button{padding-left:0;margin-right:12px}.editor-header{padding:10px;flex-wrap:wrap;gap:6px}.editor-header>div{width:100%;justify-content:space-between}.editor-header input{width:60%;text-align:right}.editor-header button{font-size:11px;padding:9px}.editor-toolbar{height:auto;min-height:50px;padding:6px;flex-wrap:wrap}#size-label{order:3;width:100%;text-align:center}.editor-toolbar button{font-size:9px;padding:6px}.editor-body{display:flex;position:relative;height:calc(100dvh - 218px);min-height:330px}.workspace{width:100%;padding:25px}.editor-body aside{display:none;width:220px;position:absolute;top:0;bottom:0;z-index:20;box-shadow:0 4px 30px #23355722}.editor-body #tools{left:0}.editor-body #properties{right:0}.editor-body aside.mobile-open{display:block}.mobile-tabs{display:flex;gap:6px;padding:6px 10px;border-bottom:1px solid #e1e6ef;align-items:center}.mobile-tabs button{padding:6px 14px;font-size:11px}.mobile-tabs span{font-size:9px;color:#94a0b3;margin-left:auto}.canvas-note{font-size:9px}.dialog-title h2{font-size:19px}}
/* Stage 2: preserve the grid, distinguish physical print formats. */
.format-card{min-height:250px}.format-icon.roll{position:relative;width:48px;height:82px;margin:0 0 0 10px;padding:0;border:0;background:transparent;overflow:visible;display:block}.roll-top{position:absolute;left:-3px;right:-3px;top:0;height:4px;border-radius:2px;background:#7e8b9d;z-index:2}.roll-sheet{position:absolute;inset:4px 0 5px;background:#e0e9ff;border:1px solid #a9bde5;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:10px;font-weight:700;letter-spacing:.5px}.roll-sheet b{font-size:26px}.roll-base{position:absolute;bottom:0;left:-8px;right:-8px;height:7px;background:linear-gradient(#d7dce3,#8594aa);border-radius:3px;box-shadow:0 5px 0 -2px #697991}.format-icon.wide{position:relative;border-radius:0}.format-icon.wide:before,.format-icon.wide:after{content:'';position:absolute;width:5px;height:5px;border:1px solid #8fa7d6;border-radius:50%;top:4px}.format-icon.wide:before{left:4px}.format-icon.wide:after{right:4px}.format-icon.paper{border-radius:0;box-shadow:3px 3px 0 #e2e8f4;width:48px;height:66px}.vertical{overflow:visible}.vertical:before{content:'';position:absolute;top:-5px;left:-3px;right:-3px;height:6px;background:#8b99ae;border-radius:2px}.vertical:after{content:'';position:absolute;bottom:-11px;left:-10px;right:-10px;height:12px;background:linear-gradient(#e0e5ed,#8797ae);border-radius:4px;box-shadow:0 5px 0 -2px #697a92}.vertical .sun-shape{right:7px;width:70px;height:70px;bottom:68px}.template-thumb{background:#edf0f6;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:22px;position:relative}.preview-sheet{position:relative;overflow:hidden;box-shadow:0 6px 14px #243b5b1a;display:flex;flex-direction:column;justify-content:center;padding:14px}.template-thumb.banner .preview-sheet{width:100%;height:90px;border:1px solid #0000000a}.template-thumb.flyer .preview-sheet{height:164px;width:116px;flex:none;align-self:center}.template-thumb.roll .preview-sheet{height:159px;width:66px;flex:none;padding:9px;overflow:hidden;border-top:4px solid #7d8b9d;border-bottom:4px solid #a3adbb;margin-bottom:4px}.template-thumb.roll .preview-roll-base{position:absolute;left:50%;bottom:21px;transform:translateX(-50%);width:83px;height:8px;background:linear-gradient(#d5dbe5,#7f90a8);border-radius:3px;box-shadow:0 5px 0 -2px #6f7e92}.template-thumb .preview-sheet small{font-size:6px;letter-spacing:.3px;line-height:1.5;z-index:1}.template-thumb .preview-sheet strong{font-size:17px;line-height:1.4;max-width:100%;margin-top:8px;letter-spacing:-.6px}.template-thumb.flyer .preview-sheet strong{font-size:17px}.template-thumb.roll .preview-sheet strong{font-size:17px;line-height:1.55;letter-spacing:-.9px;white-space:pre-line}.template-thumb .preview-sheet i{width:110px;height:110px;right:-40px;bottom:-55px}.template-thumb.roll .preview-sheet i{width:65px;height:65px;right:-30px;bottom:12px}.template-thumb.banner:before,.template-thumb.banner:after{content:'';position:absolute;top:55%;width:3px;height:36px;background:#c7cedb;z-index:2}.template-thumb.banner:before{left:24px}.template-thumb.banner:after{right:24px}.shape-category{margin-top:20px}.shape-category>summary{cursor:pointer;font-size:11px;color:#67778f;font-weight:600;margin-bottom:11px}.shape-category .shape-grid{margin-top:9px}.shape-grid [aria-pressed=true]{background:#315ed4;color:white;border-color:#315ed4}.shape-grid [aria-pressed=true] small{color:#fff}#font-status{font-size:9px;color:#667eaa;line-height:1.6}#drawing-status{position:absolute;top:10px;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:5;border-radius:20px;padding:6px 10px 6px 15px;background:#315ed4;color:white;font-size:10px;box-shadow:0 2px 9px #23459f20}#drawing-status button{font-size:9px;padding:3px 8px;margin-left:10px;border:0;background:#fff;color:#315ed4;border-radius:12px}
@media(max-width:760px){.format-card{min-height:150px}.format-card .format-icon.roll{margin:4px 18px 0 20px}.template-thumb{height:205px;padding:18px 10px}.template-thumb.banner .preview-sheet{padding:10px 8px;height:76px}.template-thumb.banner .preview-sheet strong{font-size:12px}.template-thumb.banner .preview-sheet small{font-size:5px}.template-thumb.banner:before{left:12px}.template-thumb.banner:after{right:12px}.template-thumb.flyer .preview-sheet{height:160px;width:113px}.template-thumb.roll .preview-sheet{height:159px;width:66px}.template-thumb.roll .preview-roll-base{bottom:21px}.format-card .format-icon.wide{margin-top:30px}.vertical .sun-shape{width:55px;height:55px}}

/* Keep format icon sizing isolated from the full-width template grid. */
.template-grid{align-items:stretch;gap:28px 24px}.template-card{display:flex;flex-direction:column;align-items:stretch;width:100%;min-width:0;text-align:left}.template-card .template-thumb{width:100%;min-width:0;flex:none;border:0;box-sizing:border-box;text-align:left;margin:0}.template-card .template-thumb.roll{width:100%;height:205px;display:flex;justify-content:center;align-items:center}.template-card>h3,.template-card>p{width:100%;text-align:left;padding:0 2px}.template-card>h3{margin-top:14px;line-height:1.6}.template-card>p{margin-top:2px;line-height:1.6}.template-card .preview-sheet{flex-shrink:0}.template-filter{display:flex;gap:8px;margin:-8px 0 24px;flex-wrap:wrap}.template-filter button{font-size:12px;padding:8px 18px;border-radius:20px}.template-filter [aria-pressed=true]{background:#315ed4;color:#fff;border-color:#315ed4}.last-work{font-size:11px;color:#7d8da5;margin-top:18px;line-height:1.6}.save-meta{padding:10px;background:#f3f6fc;border-radius:7px;font-size:10px;line-height:1.8;color:#617797}.save-meta button{font-size:10px;margin-top:7px;padding:6px 10px}.guide-tools{display:flex;gap:12px;flex-wrap:wrap}.guide-tools label{margin:8px 0;display:flex;gap:5px;align-items:center;font-size:10px}.guide-tools input{margin:0}.alignment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:10px 0}.alignment-grid button{padding:7px 2px;font-size:10px}.layer[aria-pressed=true]{background:#edf3ff;border-color:#8ca9ed;color:#244cba}.layer{min-height:34px}.export-warning{background:#fff6df;color:#84652b;padding:10px;border-radius:7px;font-size:11px;line-height:1.7}.export-state{font-size:11px;color:#5875ab;min-height:20px}#save-status{max-width:210px}.editor-header input{width:155px}
@media(max-width:760px){.template-grid{gap:24px 14px}.template-filter{gap:6px}.template-filter button{font-size:11px;padding:7px 13px}.template-card .template-thumb.roll{height:205px}.guide-tools{gap:9px}.editor-header input{width:60%}}
/* Public information pages share the existing typography and spacing. */
footer a:not(.brand){display:inline-block;margin:6px 14px 6px 0;color:inherit;font-size:13px}
.content-page{max-width:900px;margin:0 auto;padding:64px 28px 80px;line-height:1.85;overflow-wrap:anywhere}
.content-page h1{font-size:clamp(28px,4vw,42px);line-height:1.3;margin:16px 0 32px;letter-spacing:-1.5px}
.content-page h2{font-size:21px;margin:36px 0 10px;line-height:1.5;letter-spacing:-.6px}
.content-page p{color:#536179;margin:10px 0 20px}.content-page .lead{font-size:20px;color:#253c60}
.content-page a:not(.primary),.tool-intro a,.guide>p a{color:#315ed4;text-decoration:underline;text-underline-offset:4px}
.content-page .policy-note{padding:18px 22px;background:#fff6e5;border:1px solid #eedcb7;border-radius:12px;color:#77542a}
.guide-steps{padding-left:28px}.guide-steps>li{padding:0 0 16px 12px;border-bottom:1px solid #e8edf4}.guide-steps>li::marker{font-size:20px;font-weight:700;color:#315ed4}
.content-cta{margin-top:40px}.content-cta a{display:inline-block;text-decoration:none}.tool-intro{padding-top:0!important}.tool-intro p{max-width:850px;line-height:1.9;color:#536179}
@media(max-width:600px){.content-page{padding:32px 20px 48px}.content-page .lead{font-size:18px}.guide-steps{padding-left:20px}.guide-steps>li{padding-left:5px}footer a:not(.brand){margin-right:12px}}