@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css");
@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noto+Serif+KR:wght@400;500;600;700&display=swap");
:root{--navy:#0b2646;--navy-2:#163c68;--blue:#1768d9;--sky:#53b9ed;--text:#203a59;--muted:#657c96;--line:#d7e5f3;--mint:#24b5b4}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:0;background:linear-gradient(150deg,#ecf4fd,#f8fbff 53%,#eef6fd);font-family:system-ui,-apple-system,"Noto Sans KR","Malgun Gothic",sans-serif;font-size:14px;color:var(--text);word-break:keep-all}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:wait}
[hidden]{display:none!important}
.fare-shell{width:min(1030px,100%);padding:23px clamp(15px,3vw,32px) 30px;margin:0 auto}
.fare-intro{margin-bottom:19px}
.fare-intro-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.fare-brand{font-size:12px;font-weight:900;letter-spacing:.03em;color:#1661b5;display:inline-flex;gap:8px;align-items:center}
.fare-brand-dot{width:7px;height:7px;background:#10b59b;border-radius:100%;box-shadow:0 0 0 4px rgba(16,181,155,.11)}
.fare-live-tag{border:1px solid #c9e2f6;background:#fff;border-radius:99px;padding:5px 11px;font-size:10px;font-weight:800;color:#3d78a6}
.fare-intro h1{font-size:clamp(21px,3.8vw,30px);line-height:1.3;letter-spacing:-.05em;color:#0b2949;font-weight:900;margin:0 0 7px}
.fare-intro h1 em{font-style:normal;color:#1878d8}
.fare-intro p{margin:0;color:#5d718b;line-height:1.7;font-size:12px}
.fare-scope-notice{display:flex;align-items:flex-start;gap:5px 12px;flex-wrap:wrap;margin-bottom:14px;padding:13px 16px;border:1px solid #b5dcf1;border-left:4px solid #0b8bb5;border-radius:11px;background:linear-gradient(110deg,#f6fcff,#eef7ff);color:#315a7d;font-size:12px;line-height:1.65}
.fare-scope-notice strong{font-weight:900;color:#0b4774;font-size:12.5px}
.fare-scope-notice span{flex:1 1 380px}
.fare-scope-notice b{color:#125b91}
.fare-scope-notice a{font-weight:850;color:#0969bc;text-decoration:underline;text-underline-offset:3px;white-space:normal}
.fare-setup-notice{display:flex;gap:12px;align-items:flex-start;margin-bottom:15px;background:#edf8ff;border:1px solid #acd8f4;border-radius:13px;padding:13px 16px;color:#234c70}
.fare-setup-icon{width:25px;height:25px;display:grid;place-items:center;background:#cbeaff;border-radius:50%;font-weight:900;flex:0 0 25px}
.fare-setup-notice strong{display:block;font-size:12.5px;margin-bottom:3px;color:#14436d}
.fare-setup-notice p{font-size:11.5px;line-height:1.6;margin:0}
.fare-layout{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:16px;align-items:stretch}
.fare-map-card,.fare-form-card{min-width:0;border:1px solid #d6e7f8;border-radius:16px;box-shadow:0 10px 25px rgba(26,78,140,.065);background:#fff;overflow:hidden}
.fare-map-card{display:flex;flex-direction:column;padding:19px}
.fare-form-card{padding:19px 21px}
.fare-card-heading{display:flex;gap:9px;align-items:center;margin-bottom:16px;min-width:0}
.fare-step{display:grid;place-items:center;flex:0 0 31px;width:31px;height:31px;background:#e7f3ff;border:1px solid #c3ddfa;border-radius:10px;color:#1167c1;font-size:11px;font-weight:900}
.fare-card-heading>div{min-width:0}
.fare-card-heading small{display:block;font-weight:850;font-size:9px;letter-spacing:.13em;color:#5993c4;margin-bottom:2px}
.fare-card-heading h2{font-size:16px;letter-spacing:-.04em;margin:0;color:#183f66;line-height:1.35;font-weight:850}
.fare-map-state{margin-left:auto;font-size:10px;font-weight:750;color:#4d84b2;background:#eff7ff;border-radius:99px;padding:6px 9px;white-space:nowrap}
.fare-map-canvas{height:300px;width:100%;min-height:230px;border:1px solid #d5e6f8;border-radius:12px;overflow:hidden;position:relative;background:linear-gradient(140deg,#e1effc,#d1e6fa)}
.fare-map-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;padding:20px;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.7),transparent 45%),repeating-linear-gradient(32deg,rgba(255,255,255,.27) 0,rgba(255,255,255,.27) 2px,transparent 2px,transparent 34px),linear-gradient(120deg,#d7eafc,#eef7ff);z-index:1;color:#315f87}
.fare-route-decor{display:flex;align-items:center;width:min(200px,85%);margin-bottom:13px;gap:11px;color:#fff}
.fare-route-origin,.fare-route-dest{height:36px;width:36px;flex:0 0 36px;border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:15px;box-shadow:0 5px 15px rgba(0,55,125,.16)}
.fare-route-origin{background:#0e8da8}.fare-route-dest{background:#1e64d1}
.fare-route-dash{border-top:3px dashed #68a7dc;flex:1}
.fare-map-placeholder strong{font-size:15px;font-weight:900}
.fare-map-placeholder>span:last-child{color:#6786a6;font-size:11px;line-height:1.6}
.fare-map-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:13px;margin-top:auto;padding-top:13px;color:#577798;font-size:10px;font-weight:750}
.fare-map-legend>span{display:inline-flex;align-items:center;gap:5px}
.fare-map-legend i{display:block;width:8px;height:8px;border-radius:50%;background:#0e8da8}
.fare-map-legend .fare-legend-end{background:#236bd1}
.fare-map-legend .fare-legend-line{width:18px;height:4px;border-radius:5px;background:#2879d1}
.fare-form-desc{font-size:11.5px;line-height:1.65;color:#68809a;margin:0 0 19px}
.fare-field label{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:850;margin-bottom:8px;color:#214360}
.fare-field-dot{width:8px;height:8px;border-radius:50%}.fare-field-dot-a{background:#0ea5b0}.fare-field-dot-b{background:#266cd5}
.fare-address-row{display:flex;align-items:stretch;gap:7px}
.fare-address-row input{background:#f7fafe;color:#1a3959;border:1px solid #d3e2f2;border-radius:10px;min-width:0;width:100%;flex:1 1 0;padding:0 12px;height:47px;cursor:pointer;outline:none;font-size:11.8px;font-weight:600;text-overflow:ellipsis}
.fare-address-row input:hover,.fare-address-row input:focus{background:#fff;border-color:#4589d0;box-shadow:0 0 0 3px rgba(35,125,222,.09)}
.fare-address-row input::placeholder{color:#8296aa;font-weight:500}
.fare-address-btn{background:#10395f;color:#fff;border:1px solid #10395f;border-radius:10px;padding:0 12px;flex:0 0 auto;font-size:11.5px;font-weight:800;white-space:nowrap}
.fare-address-btn:hover{background:#1b5d92}
.fare-address-btn span{color:#aee4ff}
.fare-route-connector{display:flex;gap:8px;align-items:center;justify-content:center;height:30px;color:#70a9d5;font-weight:900}
.fare-route-connector span{height:1px;width:24px;background:#e2ecf5}
.fare-calc-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-height:62px;padding:11px 8px;margin-top:24px;border-radius:11px;border:1px solid #2b9dcb;background:linear-gradient(115deg,#0f8daf,#1565ce);color:#fff;box-shadow:0 11px 23px rgba(9,100,182,.18);transition:transform .2s,filter .2s}
.fare-calc-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.fare-calc-btn:disabled{opacity:.67;transform:none}
.fare-calc-main{font-size:14px;font-weight:900;letter-spacing:-.025em}
.fare-calc-main span{margin-left:8px}
.fare-calc-btn small{letter-spacing:.11em;font-size:9px;font-weight:750;opacity:.76}
.fare-mini-note{text-align:center;color:#7b91a6;font-size:10.5px;line-height:1.65;margin:15px 0 0}
.fare-mini-note strong{color:#2d6eae}
.fare-search-status,.fare-results{margin-top:17px;border:1px solid #cae1f6;border-radius:15px;box-shadow:0 8px 25px rgba(10,61,120,.06);background:#fff;padding:18px 21px}
.fare-search-top{display:flex;gap:13px;align-items:center;color:#124773}
.fare-spinner{border:3px solid #d4e7f8;border-top-color:#1985c8;width:28px;height:28px;flex:0 0 28px;border-radius:50%;animation:fareSpin .8s linear infinite}
@keyframes fareSpin{to{transform:rotate(360deg)}}
.fare-search-top strong{font-size:13px}
.fare-search-top p{margin:4px 0 0;color:#6884a0;font-size:11.5px}
.fare-progress-track{height:6px;border-radius:9px;background:#e4eef9;margin-top:14px;overflow:hidden}
.fare-progress-bar{height:100%;width:0;background:linear-gradient(90deg,#2bbcc0,#2076db);transition:width .35s}
.fare-result-title span{font-size:10px;letter-spacing:.15em;color:#5193c6;font-weight:850}
.fare-result-title h2{font-size:21px;letter-spacing:-.04em;color:#153b60;margin:3px 0 15px}
.fare-result-route{display:grid;grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr);gap:9px;align-items:center;padding:15px;border:1px solid #dce9f7;border-radius:12px;background:#f6faff}
.fare-result-route>span{text-align:center;font-size:20px;color:#468ccc}
.fare-result-route div{min-width:0}
.fare-result-route small{display:block;font-size:10px;color:#6690b3;margin-bottom:5px}
.fare-result-route strong{display:block;overflow-wrap:anywhere;color:#183e66;font-size:12.5px;line-height:1.5}
.fare-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0}
.fare-result-grid>div{padding:13px 15px;border-radius:11px;background:#edf5fe}
.fare-result-grid small{display:block;font-size:11px;color:#5e80a1;margin-bottom:4px}
.fare-result-grid strong{font-size:15px;color:#1b548b}
.fare-result-price{display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:12px;padding:18px;background:linear-gradient(120deg,#0b2c4d,#15518c);color:#fff}
.fare-result-price span{font-size:12px;font-weight:750;color:#b3dfff}
.fare-result-price strong{font-size:clamp(20px,3.9vw,29px);font-weight:900;white-space:nowrap;color:#fff}
.fare-result-disclaimer{color:#6d829a;font-size:11px;line-height:1.7;margin:13px 0 0}
.fare-message{border:1px solid #bedaf4;background:#eaf5ff;color:#204b73;margin-top:15px;padding:13px 17px;border-radius:11px;font-size:12px;line-height:1.65;font-weight:700}
.fare-guide{margin-top:17px;border:1px solid #d0e3f5;border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 8px 24px rgba(10,61,120,.05)}
.fare-guide-head{background:linear-gradient(115deg,#0a2c4f,#134778);display:flex;gap:11px;align-items:center;padding:16px 20px;color:#fff}
.fare-guide-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-family:Georgia,serif;font-style:italic;font-size:15px;color:#cbf0ff;border:1px solid #519bcc}
.fare-guide-head small{font-size:9px;font-weight:800;color:#92c9e9;letter-spacing:.14em}
.fare-guide-head h2{margin:2px 0 0;font-weight:850;font-size:15px;color:#fff}
.fare-guide-body{padding:18px 23px 20px}
.fare-guide-body>p{color:#47647e;line-height:1.8;margin:0 0 11px;font-size:12px}
.fare-guide-body>p strong{color:#164e81}
.fare-guide-body ul{margin:0;padding:0 0 0 19px;color:#647b93;font-size:11.5px;line-height:1.85}
.fare-guide-body li{padding:3px 0}
.fare-guide-body li::marker{color:#238bd0}
.fare-guide-call{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:15px;border-radius:12px;background:#eff7ff;padding:15px 17px}
.fare-guide-call>div{min-width:0}
.fare-guide-call strong{display:block;color:#17446f;font-size:12px;font-weight:850;margin-bottom:5px}
.fare-guide-call span{display:block;color:#6385a1;font-size:11px;line-height:1.5}
.fare-guide-call a{text-decoration:none;flex:0 0 auto;border-radius:9px;background:#1267c4;color:#fff;padding:12px 13px;font-size:11.5px;font-weight:850;white-space:nowrap}
.fare-guide-call a:hover{background:#0d4f9d}
.fare-inner-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#8aa1b4;font-size:10px;padding:16px 2px}
.fare-postcode{position:fixed;inset:0;z-index:100;display:flex;justify-content:center;align-items:center;padding:15px}
.fare-postcode-shade{position:absolute;inset:0;background:rgba(6,24,47,.67);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.fare-postcode-panel{position:relative;width:min(520px,100%);height:min(610px,calc(100dvh - 32px));min-height:330px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 25px 70px rgba(0,20,50,.35);display:flex;flex-direction:column;z-index:1}
.fare-postcode-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;background:#0e3154;color:#fff}
.fare-postcode-head strong{font-size:15px}.fare-postcode-head button{display:grid;place-items:center;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.3);color:white;font-size:25px;line-height:1;width:34px;height:34px;border-radius:8px}
.fare-postcode-mount{flex:1;min-height:0}
.fare-map-canvas .fare-marker{min-width:35px;min-height:34px;display:flex;align-items:center;justify-content:center;border-radius:20px;padding:3px 9px;font-size:12px;font-weight:900;color:#fff;border:2px solid #fff;box-shadow:0 3px 12px rgba(3,28,61,.3)}
.fare-map-canvas .fare-marker-start{background:#0799a7}.fare-map-canvas .fare-marker-end{background:#1b64d1}
:focus-visible{outline:3px solid #5dcbff;outline-offset:3px}
@media(max-width:760px){
 .fare-shell{padding:18px 14px 24px}
 .fare-layout{grid-template-columns:1fr;gap:13px}
 .fare-map-card,.fare-form-card{padding:17px}
 .fare-map-canvas{height:280px;min-height:240px}
 .fare-form-card{padding:18px}
 .fare-intro p{font-size:11.5px}
 .fare-guide-call{flex-direction:column;align-items:stretch}
 .fare-guide-call a{text-align:center}
}
@media(max-width:400px){
 .fare-shell{padding:16px 10px 25px}
 .fare-map-canvas{height:240px;min-height:240px}
 .fare-address-btn{padding:0 9px;font-size:10.5px}
 .fare-address-row input{font-size:11px;padding:0 9px}
 .fare-card-heading h2{font-size:15px}
 .fare-result-price{padding:15px 12px}
 .fare-result-price strong{font-size:21px}
 .fare-guide-body{padding:15px 16px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* 2026-10-18 · 전국화물운송요금조회 프리미엄 리파인 */
body{background:radial-gradient(circle at top right,rgba(130,199,255,.18),transparent 26%),linear-gradient(150deg,#eef5fd,#f8fbff 48%,#edf5fc)}
.fare-shell{padding-top:26px;padding-bottom:34px}
.fare-intro{margin-bottom:20px;padding:0 2px}
.fare-intro h1{font-size:clamp(24px,4.1vw,34px);line-height:1.25}
.fare-intro h1 em{display:inline-block;color:#156fd8;text-shadow:0 8px 26px rgba(33,111,210,.12)}
.fare-intro p{font-size:12.5px;color:#58708b;max-width:920px}
.fare-scope-notice{border-radius:14px;padding:15px 18px;border-color:#b7daf1;background:linear-gradient(135deg,#fafdff,#eef7ff);box-shadow:0 10px 24px rgba(12,80,151,.05)}
.fare-setup-notice{border-radius:14px;box-shadow:0 8px 22px rgba(12,81,154,.05)}
.fare-map-card,.fare-form-card,.fare-search-status,.fare-results,.fare-guide{border-color:#d4e6f7;box-shadow:0 16px 40px rgba(15,74,134,.07)}
.fare-map-card,.fare-form-card{border-radius:20px}
.fare-map-card{padding:22px}
.fare-form-card{padding:22px 23px}
.fare-card-heading h2{font-size:17px}
.fare-map-canvas{border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.36)}
.fare-address-row input{height:49px;border-radius:12px;background:#f8fbff;font-size:12px;font-weight:650}
.fare-address-btn{border-radius:12px;padding:0 14px;background:linear-gradient(135deg,#103e68,#0e3154);box-shadow:0 7px 16px rgba(7,53,103,.12)}
.fare-calc-btn{min-height:66px;border-radius:14px;background:linear-gradient(115deg,#1299b1,#156fd4);box-shadow:0 13px 26px rgba(8,92,168,.2),inset 0 1px 0 rgba(255,255,255,.12)}
.fare-calc-main{font-size:15px}
.fare-search-status,.fare-results{border-radius:18px}
.fare-result-price{border-radius:15px;box-shadow:0 14px 32px rgba(7,43,89,.12)}
.fare-guide{border-radius:18px}
.fare-guide-head{padding:18px 21px;background:linear-gradient(115deg,#0a2c4f,#154e84)}
.fare-guide-call{border-radius:14px;background:linear-gradient(135deg,#f2f8ff,#eaf4ff)}
.fare-guide-call a{
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg,#237bd4,#1262cb);
  box-shadow:0 10px 22px rgba(8,75,150,.18),inset 0 1px 0 rgba(255,255,255,.14);
  animation:farePhoneFlip 1s steps(1,end) infinite;
}
.fare-guide-call a:hover{filter:brightness(1.08);background:linear-gradient(135deg,#237bd4,#1262cb)}
.fare-inner-footer{border-top:1px solid rgba(204,221,239,.7);margin-top:14px;padding-top:18px}
@keyframes farePhoneFlip{
  0%,49.999%{background:linear-gradient(135deg,#237bd4,#1262cb)}
  50%,100%{background:linear-gradient(135deg,#d84a5d,#b92843)}
}
@media(max-width:760px){
 .fare-shell{padding-top:18px}
 .fare-map-card,.fare-form-card{border-radius:17px}
 .fare-map-card,.fare-form-card{padding:18px}
 .fare-scope-notice,.fare-setup-notice{padding:13px 14px}
}

/* Font only */
body, input, button, textarea, select {font-family:"Pretendard Variable","Pretendard","Noto Sans KR",sans-serif;}
h1,h2,blockquote {font-family:"Noto Serif KR","Gowun Batang",serif;}