:root{
  --ink:#111316;
  --muted:#6c6861;
  --orange:#d94308;
  --brass:#a97634;
  --paper:#f5f1e9;
  --line:rgba(17,19,22,.14);
  --soft:rgba(249,246,239,.46);
}
*{box-sizing:border-box}
html{min-width:320px;background:var(--paper)}
body{margin:0;min-height:100vh;color:var(--ink);font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo",sans-serif;background:#f4f0e8}
button,input,textarea{font:inherit;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
.page-art{position:fixed;inset:0;z-index:0;background:linear-gradient(90deg,rgba(250,247,241,.82) 0%,rgba(250,247,241,.55) 43%,rgba(245,240,231,.14) 100%),url("assets/certificate-symbolic-v3.webp") center/cover no-repeat;filter:blur(.55px) saturate(.84) contrast(1.02);transform:scale(1.006)}
.tool-header{position:sticky;top:0;z-index:20;height:74px;padding:0 4vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:rgba(248,245,239,.91);backdrop-filter:blur(16px);border-top:2px solid rgba(154,175,127,.25);border-bottom:1px solid rgba(17,19,22,.06)}
.brand{justify-self:start;font-size:20px;font-weight:900;letter-spacing:-1.2px}
.brand span{color:var(--orange)}
.tool-label{margin:0;display:flex;align-items:center;gap:10px;color:#6d6962;font-size:13px;font-weight:800;letter-spacing:.18em}
.tool-label i{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 7px rgba(217,67,8,.08)}
.header-actions{justify-self:end;display:flex;align-items:center;gap:28px;font-size:13px;font-weight:750}
.text-action,.office-link{border:0;background:none;padding:9px 0;color:#55514b}
.text-action:hover,.text-action:focus-visible,.office-link:hover,.office-link:focus-visible{color:var(--orange)}
.office-link span{margin-left:8px;color:var(--orange)}
.certificate-tool{position:relative;z-index:1;width:min(1500px,100%);min-height:calc(100vh - 74px);margin:0 auto;padding:48px 4vw 96px;display:grid;grid-template-columns:310px minmax(0,1fr);gap:clamp(42px,6vw,96px);align-items:start}
.certificate-intro{padding-top:8px}
.intro-kicker{margin:0 0 20px;color:var(--orange);font-size:13px;font-weight:850;letter-spacing:-.02em}
.certificate-intro h1{margin:0;font-size:clamp(30px,2.45vw,42px);line-height:1.11;letter-spacing:-.055em}
.intro-copy{margin:26px 0 0;color:#5d5953;font-size:15px;font-weight:620;line-height:1.85;letter-spacing:-.02em}
.service-sequence{list-style:none;margin:42px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.service-sequence li{min-height:0;padding:0;display:flex;gap:14px;align-items:baseline}
.service-sequence li:nth-child(even){padding-left:0}
.service-sequence b{color:var(--orange);font-size:12px}
.service-sequence span{font-size:13px;font-weight:760;letter-spacing:-.03em}
.certificate-workspace{min-width:0}
.flow-status{position:relative;display:grid;grid-template-columns:auto minmax(180px,380px) auto;gap:28px;align-items:start;margin-bottom:42px}
.flow-status p{margin:0;display:flex;align-items:center;gap:18px;font-size:13px;font-weight:800;white-space:nowrap}
.flow-status p span{color:var(--orange)}
.flow-status p strong{font-weight:800}
.flow-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:8px}
.flow-rail i{height:3px;background:rgba(17,19,22,.12);transition:background .25s ease}
.flow-rail[data-stage="1"] i:nth-child(1),
.flow-rail[data-stage="2"] i:nth-child(-n+2),
.flow-rail[data-stage="3"] i{background:var(--orange)}
.reset-button{border:0;background:none;padding:0;color:#747068;font-size:13px;font-weight:760;white-space:nowrap}
.reset-button:hover,.reset-button:focus-visible{color:var(--orange)}
#certificate-form{min-width:0}
.honey{position:absolute!important;left:-9999px!important}
.form-step{display:none;margin:0;padding:0;border:0;min-width:0}
.form-step.is-active{display:block;animation:stepIn .28s ease both}
@keyframes stepIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.step-heading{display:flex;align-items:center;gap:18px;margin:0 0 8px;padding:0;font-size:24px;font-weight:850;line-height:1.25;letter-spacing:-.045em}
.step-heading>span{color:var(--orange);font-size:12px;font-weight:900;letter-spacing:0}
.step-help{margin:0 0 34px;padding-left:39px;color:#757068;font-size:13px;line-height:1.7}
.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.two-columns+.two-columns{margin-top:25px}
label,.address-field>p{display:block;font-size:12px;font-weight:800;color:#514d47}
label em,label small,.address-field em{margin-left:7px;color:var(--orange);font-size:11px;font-style:normal;font-weight:800}
label small{color:#858078}
input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]),textarea{display:block;width:100%;margin-top:8px;padding:12px 14px;border:0;border-radius:2px;background:rgba(250,248,243,.38);box-shadow:inset 0 0 0 1px transparent;outline:none;font-size:15px;font-weight:600;transition:box-shadow .2s,background .2s}
input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]){height:48px}
textarea{min-height:92px;resize:vertical;line-height:1.65}
input:focus,textarea:focus{background:rgba(255,252,247,.62)!important;box-shadow:inset 0 0 0 1px var(--orange)!important}
input::placeholder,textarea::placeholder{color:#9b958b;font-weight:500}
.form-step>label{margin-top:24px}
.address-field{margin-top:24px}
.address-field>p{margin:0}
.address-search-row{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:10px;align-items:end}
.address-search-row input{margin-top:8px}
.address-search-button{height:48px;border:0;border-radius:2px;background:rgba(217,67,8,.09);color:var(--orange);font-size:13px;font-weight:850;transition:background .2s,color .2s}
.address-search-button:hover,.address-search-button:focus-visible{background:rgba(217,67,8,.16);color:#b93400;outline:none}
.address-field>input:not([type="hidden"]){margin-top:10px}
.address-dialog{width:min(540px,calc(100% - 24px));padding:0;border:0;border-radius:4px;background:#f6f2ea;color:var(--ink);box-shadow:0 28px 90px rgba(0,0,0,.3)}
.address-dialog::backdrop{background:rgba(21,20,18,.48);backdrop-filter:blur(5px)}
.address-dialog-head{height:56px;padding:0 16px 0 20px;display:flex;align-items:center;justify-content:space-between}
.address-dialog-head h2{margin:0;font-size:16px;letter-spacing:-.03em}
.address-dialog-head button{width:40px;height:40px;border:0;background:transparent;color:#68635c;font-size:27px;line-height:1}
.address-dialog-head button:hover,.address-dialog-head button:focus-visible{color:var(--orange);outline:none}
.postcode-container{width:100%;height:470px;background:#fff}
.file-field{margin-top:28px!important;padding:18px 0}
.file-field input{display:block;margin-top:15px;width:100%;font-size:13px;font-weight:600}
.file-field input::file-selector-button{margin-right:14px;padding:9px 15px;border:1px solid rgba(17,19,22,.2);border-radius:0;background:rgba(250,248,243,.45);font-weight:750;cursor:pointer}
.file-list{margin:14px 0;color:#777169;font-size:12px;line-height:1.6}
.consent{display:flex!important;align-items:flex-start;gap:11px;margin:27px 0 0!important;font-size:12px;font-weight:600;line-height:1.65}
.consent input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--orange)}
.next-button,.submit-button{width:min(310px,100%);min-height:52px;margin:32px 0 0;padding:0 28px 0 0;display:flex;align-items:center;justify-content:space-between;border:0;background:transparent;font-size:15px;font-weight:850;text-align:left;transition:color .2s,padding .2s}
.next-button b,.submit-button b{color:var(--orange);font-size:25px;font-weight:450;line-height:1;transition:transform .2s}
.next-button:hover,.next-button:focus-visible,.submit-button:hover,.submit-button:focus-visible{color:var(--orange);padding-right:34px}
.next-button:hover b,.submit-button:hover b{transform:translateX(3px)}
.step-actions{display:flex;align-items:flex-end;gap:26px;margin-top:10px}
.step-actions .next-button,.step-actions .submit-button{margin-left:auto}
.back-button{min-height:48px;padding:0;border:0;border-bottom:1px solid transparent;background:none;color:#716c64;font-size:13px;font-weight:750}
.back-button:hover,.back-button:focus-visible{color:var(--orange);border-color:var(--orange)}
.form-error{margin:18px 0 0;color:#b22e00;font-size:13px;font-weight:750}
.result-panel{padding:4px 0 10px 24px;border-left:3px solid var(--orange)}
.eyebrow{margin:0 0 10px;color:var(--orange);font-size:12px;font-weight:900;letter-spacing:.08em}
.result-panel h2{margin:0 0 14px;font-size:25px;letter-spacing:-.04em}
.result-panel>p{color:#625d56;line-height:1.7;font-size:14px}
.receipt{margin:28px 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.receipt div{padding:16px 12px;border-right:1px solid var(--line)}
.receipt div:last-child{border-right:0}
.receipt dt{font-size:11px;color:#777169}
.receipt dd{margin:7px 0 0;font-size:14px;font-weight:850;word-break:break-all}
.result-actions{display:grid;grid-template-columns:1fr 1.45fr;gap:18px}
.result-actions button,.result-actions a{min-height:54px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border:0;border-bottom:1px solid rgba(17,19,22,.24);background:transparent;font-size:13px;font-weight:800}
.result-actions b{color:var(--orange);font-size:21px}
.result-actions button:hover,.result-actions a:hover{color:var(--orange);border-color:var(--orange)}
.kakao-guide{font-size:12px!important}
.result-secondary{display:flex;gap:18px;margin-top:18px}
.result-secondary button{border:0;background:none;padding:8px 0;color:#6e6961;font-size:12px;font-weight:750}
.notice{margin-top:54px;padding-top:0}
.notice h2{margin:0 0 13px;font-size:13px;letter-spacing:-.02em}
.notice ul{margin:0;padding-left:18px;color:#5f5a53;font-size:12px;line-height:1.9}
.status-dialog{width:min(620px,calc(100% - 32px));padding:34px;border:0;border-radius:0;background:#f6f2ea;color:var(--ink);box-shadow:0 28px 90px rgba(0,0,0,.3)}
.status-dialog::backdrop{background:rgba(21,20,18,.48);backdrop-filter:blur(5px)}
.dialog-close-row{display:flex;justify-content:flex-end;margin:-18px -17px 4px}
.dialog-close-row button{border:0;background:none;font-size:27px;color:#68635c}
.status-dialog h2{margin:0 0 10px;font-size:28px;letter-spacing:-.04em}
.status-dialog>p{color:#6c675f;font-size:13px}
.status-dialog label{margin-top:19px}
.status-dialog .submit-button{width:100%}
.status-result{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.status-result h3{margin:0;font-size:19px}
[hidden]{display:none!important}
@media(max-width:1100px){
  .certificate-tool{grid-template-columns:270px minmax(0,1fr);gap:46px}
  .flow-status{grid-template-columns:auto 1fr auto;gap:18px}
  .receipt{grid-template-columns:1fr}
  .receipt div{border-right:0;border-bottom:1px solid var(--line)}
  .receipt div:last-child{border-bottom:0}
}
@media(max-width:780px){
  .tool-header{height:64px;grid-template-columns:1fr auto;padding:0 20px}
  .tool-label{display:none}
  .header-actions{gap:16px}
  .office-link{display:none}
  .certificate-tool{display:block;min-height:calc(100vh - 64px);padding:34px 22px 70px}
  .certificate-intro{padding:0}
  .certificate-intro h1{font-size:32px}
  .intro-copy{margin-top:19px;font-size:14px}
  .service-sequence{margin-top:28px}
  .certificate-workspace{margin-top:46px}
  .flow-status{grid-template-columns:1fr auto;gap:12px;margin-bottom:34px}
  .flow-rail{grid-column:1/-1;grid-row:2;padding:0}
  .two-columns{grid-template-columns:1fr;gap:22px}
  input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]),textarea{font-size:16px}
  .two-columns+.two-columns{margin-top:22px}
  .address-search-row{grid-template-columns:minmax(0,1fr) 98px}
  .postcode-container{height:min(520px,calc(100vh - 120px))}
  .step-help{padding-left:0}
  .step-actions{align-items:center}
  .notice{margin-top:46px}
  .result-actions{grid-template-columns:1fr}
}
@media(max-width:430px){
  .brand{font-size:18px}
  .header-actions{font-size:12px}
  .certificate-tool{padding-left:18px;padding-right:18px}
  .certificate-intro h1{font-size:29px}
  .service-sequence li{gap:9px}
  .service-sequence li:nth-child(even){padding-left:0}
  .service-sequence span{font-size:12px}
  .flow-status p{gap:10px;font-size:12px}
  .step-heading{gap:12px}
  .step-heading{font-size:22px}
  .next-button,.submit-button{width:100%;padding-right:24px}
  .step-actions{gap:14px}
  .status-dialog{padding:27px 22px}
}