.compare-page{width:min(1320px,calc(100% - 40px));margin-top:42px}.compare-page .tool-head{padding:30px 34px;border-radius:20px;background:linear-gradient(135deg,#071b34,#104f8a);color:#fff;box-shadow:0 18px 45px #173a6420}.compare-page .tool-head>a{display:inline-flex;margin-bottom:18px;color:#9bc8f2;font-size:12px;font-weight:850}.compare-page .tool-head span{color:#58e3e6}.compare-page .tool-head h1{font-size:42px}.compare-page .tool-head p{max-width:720px;color:#c7d8e8;font-size:15px;line-height:1.7}
.compare-command{display:grid;grid-template-columns:minmax(240px,1fr) auto auto;align-items:center;gap:12px;margin:22px 0 14px;padding:16px 18px;border:1px solid #d8e3ef;border-radius:14px;background:#fff;box-shadow:0 10px 30px #173a640b}.compare-command label:first-child{position:relative}.compare-command label:first-child:before{content:"⌕";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#60748d;font-size:21px}.compare-command input[type="search"]{width:100%;height:46px;padding:0 14px 0 42px;border:1px solid #cbd9e7;border-radius:10px;background:#f9fbfd}.compare-command .difference-toggle{display:flex;align-items:center;gap:8px;color:#36536e;font-size:12px;font-weight:900}.compare-command .difference-toggle input{width:19px;height:19px;accent-color:#1268e8}.compare-command button{height:42px;padding:0 16px;border:1px solid #c8d8e7;border-radius:9px;background:#fff;color:#36536e;font-size:12px;font-weight:900;cursor:pointer}.compare-status{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}.compare-status strong{font-size:14px}.compare-status strong b{color:#1268e8;font-size:22px}.compare-status span{color:#60748d;font-size:12px}.compare-status i{padding:6px 10px;border-radius:999px;background:#e7f7f3;color:#0b8a61;font-size:10px;font-style:normal;font-weight:900}
.compare-picker{grid-template-columns:repeat(3,minmax(0,1fr));max-height:330px;overflow:auto;padding:5px 5px 8px}.compare-picker label{position:relative;min-height:118px;padding:18px 18px 18px 50px;transition:.18s}.compare-picker label:hover{transform:translateY(-2px);border-color:#a9c8eb;box-shadow:0 10px 24px #173a6412}.compare-picker label.selected{border-color:#1268e8;background:linear-gradient(145deg,#f5faff,#eaf4ff);box-shadow:inset 0 0 0 1px #1268e8}.compare-picker input{position:absolute;left:18px;top:20px;accent-color:#1268e8}.compare-picker label.hidden-by-search{display:none}.compare-picker label.selected:after{content:"비교 중";position:absolute;right:12px;top:12px;padding:4px 7px;border-radius:99px;background:#1268e8;color:#fff;font-size:9px;font-weight:950}
.compare-table-wrap{position:relative;max-height:calc(100vh - 118px);overflow:auto;border-radius:18px;box-shadow:0 16px 42px #173a6412;scrollbar-color:#9db6cd #edf3f8}.compare-table{min-width:980px}.compare-table th,.compare-table td{min-width:230px;padding:22px}.compare-table th:first-child{position:sticky;left:0;z-index:4;min-width:155px;background:#f3f7fb;box-shadow:5px 0 12px #173a640b}.compare-table thead th{position:sticky;top:0;z-index:3;background:#fff;box-shadow:0 4px 12px #173a640d}.compare-table thead th:first-child{z-index:6;background:#eaf2f9}.compare-table thead th:not(:first-child){color:#0b1d33;font-size:20px;line-height:1.35}.compare-table tbody th{color:#36536e;font-size:12px;font-weight:950}.compare-table tbody tr:nth-child(even) td{background:#fbfdff}.compare-table tbody tr.same-row{transition:.2s}.compare-table-wrap.only-differences tr.same-row{display:none}.compare-table td.best-value{position:relative;background:#effbf6!important;color:#087b58;font-weight:950}.compare-table td.best-value:after{content:"BEST";position:absolute;right:10px;top:9px;padding:3px 6px;border-radius:99px;background:#0b9a68;color:#fff;font-size:8px;font-weight:950}.compare-table td.is-different{box-shadow:inset 0 0 0 2px #d8e9ff}.compare-table td ul{margin:0}.compare-table td button,.compare-table td>a:last-child{min-width:92px;text-align:center;cursor:pointer}.compare-scroll-guide{display:none;margin:10px 0 0;padding:10px;border-radius:9px;background:#edf5ff;color:#35628c;font-size:11px;font-weight:850;text-align:center}
@media(max-width:900px){.compare-command{grid-template-columns:1fr 1fr}.compare-command label:first-child{grid-column:1/-1}.compare-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.compare-scroll-guide{display:block}.compare-table-wrap{max-height:70vh}.compare-page .tool-head h1{font-size:34px}}
@media(max-width:620px){.compare-page{width:min(100% - 24px,1320px);margin-top:22px}.compare-page .tool-head{padding:24px 20px}.compare-page .tool-head h1{font-size:29px}.compare-command{grid-template-columns:1fr}.compare-command label:first-child{grid-column:auto}.compare-picker{grid-template-columns:1fr;max-height:390px}.compare-status{align-items:flex-start;flex-direction:column}.compare-table th,.compare-table td{min-width:205px;padding:17px}.compare-table th:first-child{min-width:125px}}
.compare-picker label:has(>figure){grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto auto;align-items:center;min-height:142px;padding:16px 18px 16px 48px}.compare-picker label>figure{position:relative;display:grid;width:92px;height:102px;grid-row:1/4;margin:0;place-items:center;overflow:hidden;border:1px solid #d8e3ef;border-radius:10px;background:linear-gradient(145deg,#f5f9fc,#e5eef7)}.compare-picker label>figure img{display:block;width:100%;height:100%;padding:7px;object-fit:contain}.compare-picker label>figure em{position:absolute;right:5px;bottom:5px;padding:3px 5px;border-radius:99px;background:#071b34d9;color:#fff;font-size:7px;font-style:normal;font-weight:900}.compare-picker label>figure span{color:#6f8498;font-size:9px;font-weight:900}.compare-representative-image{display:block;width:100%;height:150px;padding:9px;object-fit:contain;background:#fff}.compare-representative-label{position:absolute;right:8px;bottom:8px;padding:4px 7px;border-radius:99px;background:#071b34dc!important;color:#fff!important;font-size:8px!important;font-weight:900}.compare-table td>a:first-child:has(.compare-representative-image){position:relative;border:1px solid #e0e9f2;border-radius:11px;background:#fff}@media(max-width:620px){.compare-picker label:has(>figure){grid-template-columns:82px minmax(0,1fr);min-height:120px}.compare-picker label>figure{width:72px;height:84px}}