/* 구동계 비교 */
.gs-main{max-width:1240px;margin:0 auto}
.gs-sec{margin:38px 0 8px}
.gs-note{font-size:13px;color:#8a7b67;margin:0 0 16px}
.gs-empty{color:#9a8c77;padding:30px 0}
.gs-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.gs-brand{font-size:15px;letter-spacing:1px;margin:0 0 10px;padding:8px 14px;border-radius:12px;color:#fff;display:inline-block}
.gs-brand.sram{background:#c8102e}.gs-brand.shimano{background:#1d3f8f}
.gs-col{display:grid;gap:10px;align-content:start}
.gs-card{display:grid;grid-template-columns:1fr auto;gap:2px 14px;text-align:left;border:1.5px solid #eee5d8;background:#fff;border-radius:16px;padding:14px 16px;cursor:pointer;font-family:inherit;color:inherit;transition:transform .15s,border-color .15s}
.gs-card:hover{transform:translateY(-2px);border-color:#eac559}
.gs-card.old{background:#faf7f2}
.gs-name{font-size:16.5px;font-weight:900;letter-spacing:-.4px}.gs-sub{grid-column:1;font-size:11.5px;color:#9a8c77}
.gs-w{grid-column:2;grid-row:1/3;text-align:right;display:flex;flex-direction:column;justify-content:center}
.gs-w b{font:900 22px Arial;letter-spacing:-.5px}.gs-w small{font-size:10.5px;color:#a3957f}
.gs-p{grid-column:1/3;font-size:12.5px;font-weight:800;color:#6f6456;border-top:1px dashed #eee5d8;padding-top:6px;margin-top:4px}
.gs-gen{font-size:10.5px;font-weight:900;border-radius:7px;padding:2px 7px;background:#e3f4df;color:#2f7a2a;vertical-align:2px}
.gs-gen.old{background:#efe9df;color:#8f8474}
/* 비교 */
.gs-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.gs-chips button{border:1px solid #e6dccd;background:#fff;border-radius:18px;padding:7px 13px;font:800 12.5px inherit;font-family:inherit;color:#6f6456;cursor:pointer}
.gs-chips button.on{background:#3d3a34;border-color:#3d3a34;color:#fff}
.gs-pick{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.gs-pick select{font:800 14px inherit;font-family:inherit;padding:10px 14px;border-radius:12px;border:1.5px solid #e3d9ca;background:#fff;min-width:220px}
.gs-pick>span{font:900 14px Arial;color:#b08a2e}
.gs-toggle{margin-left:auto;font-size:13px;font-weight:700;color:#6f6456;display:flex;gap:6px;align-items:center}
.gs-total{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-bottom:16px}
.gs-total>div:not(.gs-vs){background:#fff;border:1.5px solid #eee5d8;border-radius:18px;padding:14px 18px;display:flex;flex-direction:column}
.gs-total>div.win{border-color:#ff7a1a;box-shadow:0 0 0 3px #ff7a1a1f}
.gs-total small{font-size:12px;font-weight:800;color:#8a7b67}.gs-total b{font:900 32px Arial;letter-spacing:-1px}.gs-total span{font-size:13px;font-weight:800;color:#6f6456}
.gs-vs{text-align:center}.gs-vs b{display:block;font:900 22px Arial;color:#ff7a1a}.gs-vs span{font-size:12px;font-weight:800;color:#8a7b67}
.gs-table{width:100%;border-collapse:collapse;font-size:13px;min-width:680px}
.gs-table th,.gs-table td{padding:11px 10px;border-bottom:1px solid #f0ebe3;vertical-align:top;text-align:left}
.gs-table thead th{font-size:13px;border-bottom:2px solid #3d3a34}
.gs-table tbody th{width:150px;color:#6f6456;font-weight:800}
.gs-table td{width:34%}.gs-table td.gs-bars{width:22%;vertical-align:middle}
.gs-table td.win{background:#fff5ec}
.gs-wt{display:flex;align-items:center;gap:6px}.gs-wt b{font:900 18px Arial}.gs-wt b.na{color:#c9bfae}
.tag{font-size:10.5px;font-weight:900;border-radius:7px;padding:2px 7px;text-decoration:none}.tag.m{background:#ff7a1a;color:#fff}.tag.c{background:#efe9df;color:#8f8474}
.gs-cl,.gs-md,.gs-pr{display:block;font-size:11.5px;color:#9a8c77;margin-top:2px}.gs-pr{color:#6f6456;font-weight:800}
.gs-na{color:#c9bfae}
.gs-bars div{height:9px;background:#f3eee6;border-radius:5px;margin:4px 0;overflow:hidden}.gs-bars i{display:block;height:100%;border-radius:5px}
.gs-bars i.a{background:#c9a13b}.gs-bars i.b{background:#6f6456}.gs-bars small{font-size:11px;color:#8a7b67}.gs-bars small b{color:#ff7a1a}
.gs-base{margin-top:16px;font-size:12.5px;color:#6f6456;line-height:1.7}.gs-base p{margin:4px 0}
@media(max-width:800px){.gs-cols{grid-template-columns:1fr}.gs-total{grid-template-columns:1fr}.gs-pick select{min-width:0;flex:1}.gs-toggle{margin-left:0}}
.gs-var{display:block;font-size:11.5px;color:#b0671b;font-weight:700;margin-top:3px}
.gs-w.thin b{color:#c9bfae}.gs-w em{font-style:normal;font-size:10.5px;font-weight:900;color:#c2410c;background:#ffedd5;border-radius:6px;padding:1px 6px;margin-top:3px;align-self:flex-end}

/* 무게를 가운데로 모은 비교표 */
.gs-table{min-width:760px;table-layout:fixed}
.gs-table thead th{padding:10px}.gs-table thead th.l{text-align:right}.gs-table thead th.r{text-align:left}.gs-table thead th.gs-mid{text-align:center;color:#9a8c77;font-size:11.5px}
.gs-table tr.gs-row th.gs-part{background:#f7f2ea;color:#3d3a34;font-size:13px;font-weight:900;text-align:center;padding:7px 10px;border-bottom:0;width:auto}
.gs-table td{width:auto;border-bottom:1px solid #f0ebe3}
.gs-info{width:28%!important;vertical-align:middle!important}.gs-info.l{text-align:right!important}.gs-info.r{text-align:left!important}
.gs-w2{width:13%!important;vertical-align:middle!important;white-space:nowrap}
.gs-w2.l{text-align:right!important}.gs-w2.r{text-align:left!important}
.gs-w2 b{font:900 21px Arial;letter-spacing:-.5px;display:block}.gs-w2 .tag{display:inline-block;margin-top:3px}.gs-w2 small{display:block;font-size:11px;color:#9a8c77;margin-top:2px}
.gs-w2.win{background:#fff5ec}.gs-w2.win b{color:#e0600a}.gs-w2.na b{color:#c9bfae}
.gs-mid{width:18%!important;text-align:center!important;vertical-align:middle!important}
.gs-fly{display:grid;grid-template-columns:1fr 1fr;gap:2px;height:12px}
.gs-fly span{display:flex;background:#f3eee6;overflow:hidden}.gs-fly span.l{justify-content:flex-end;border-radius:6px 0 0 6px}.gs-fly span.r{border-radius:0 6px 6px 0}
.gs-fly i{display:block;height:100%}.gs-fly .l i{background:#c9a13b}.gs-fly .r i{background:#6f6456}
.gs-mid small{display:block;margin-top:6px;font-size:11.5px;color:#8a7b67;white-space:nowrap}.gs-mid small b{color:#ff7a1a;font-size:13px}

/* 선택 박스 = 결과 박스와 같은 격자, 눈에 띄는 색 */
.gs-pick,.gs-total{display:grid!important;grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr)!important;gap:12px!important;align-items:stretch}
.gs-pick{margin-bottom:10px}
.gs-sel{display:flex;flex-direction:column;gap:5px;background:#fff4e8;border:2px solid #ff7a1a;border-radius:18px;padding:10px 14px 12px;cursor:pointer;box-shadow:0 6px 16px #ff7a1a22;transition:box-shadow .15s,background .15s}
.gs-sel:hover{background:#ffead4;box-shadow:0 8px 20px #ff7a1a3a}
.gs-sel>span{font-size:11.5px;font-weight:900;color:#e0600a;letter-spacing:.2px}
.gs-sel select{appearance:none;-webkit-appearance:none;border:0!important;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e0600a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center!important;padding:2px 22px 2px 0!important;min-width:0!important;width:100%;font:900 19px inherit!important;font-family:inherit!important;color:#2a2620;cursor:pointer;border-radius:0!important}
.gs-sel select:focus{outline:none}.gs-sel:focus-within{box-shadow:0 0 0 4px #ff7a1a40}
.gs-vs-t{align-self:center;text-align:center;font:900 20px Arial;color:#b08a2e}
.gs-toggle{margin:0 0 14px!important;justify-content:flex-end}
.gs-total>div:not(.gs-vs){padding:14px 16px!important}
@media(max-width:800px){.gs-pick,.gs-total{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr)!important;gap:6px!important}.gs-sel select{font-size:15px!important}.gs-total b{font-size:24px!important}.gs-vs b{font-size:15px!important}.gs-toggle{justify-content:flex-start}}
.gs-brand{display:flex!important;align-items:center;height:48px;padding:0 20px!important}.gs-brand img{height:20px;width:auto;filter:brightness(0) invert(1)}.gs-brand.shimano img{height:17px}
.gs-total b.dim{color:#b9ad9a}.gs-cnt{font-style:normal;font-size:11.5px;font-weight:900;border-radius:7px;padding:2px 8px;align-self:flex-start;margin:2px 0 4px}.gs-cnt.ok{background:#e3f4df;color:#2f7a2a}.gs-cnt.part{background:#ffedd5;color:#c2410c}.gs-claim{font-style:normal;font-size:12px;color:#6f6456;font-weight:800}
.gs-cas{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:900;color:#e0600a;margin-bottom:5px}.gs-cas select{font:900 14px inherit;font-family:inherit;border:2px solid #ff7a1a;background:#fff4e8;border-radius:10px;padding:4px 8px;color:#2a2620;cursor:pointer}

.gs-table tr.gs-row th.gs-part{position:relative}
.gs-ex{position:absolute;left:10px;top:50%;transform:translateY(-50%);border:1.5px solid #d9cfbf;background:#fff;border-radius:14px;padding:3px 10px;font:800 11.5px inherit;font-family:inherit;color:#8a7b67;cursor:pointer}
.gs-ex:hover{border-color:#ff7a1a;color:#e0600a;background:#fff4e8}
.gs-exlist{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;padding:10px 12px;background:#fff8ef;border:1px dashed #f0c89a;border-radius:12px}
.gs-exlist>span{font-size:12px;font-weight:900;color:#c2410c;margin-right:4px}
.gs-exlist button{border:1px solid #f0c89a;background:#fff;border-radius:14px;padding:4px 10px;font:800 12px inherit;font-family:inherit;color:#6f6456;cursor:pointer}
.gs-exlist button:hover{border-color:#ff7a1a;color:#e0600a}.gs-exlist button.all{margin-left:auto;background:#3d3a34;color:#fff;border-color:#3d3a34}

/* 부품 실제 사진: 표 맨 왼쪽·맨 오른쪽 */
.gs-info-in{display:flex;align-items:center;gap:12px}.gs-info.l .gs-info-in{flex-direction:row}.gs-info.r .gs-info-in{flex-direction:row-reverse}
.gs-info-tx{flex:1;min-width:0}
.gs-pic{flex:0 0 64px;width:64px;height:64px;object-fit:contain;background:#fff;border:1px solid #efe6d8;border-radius:12px;padding:3px}
.gs-pic.none{display:inline-block;background:#faf7f2;border-style:dashed}
@media(max-width:800px){.gs-pic{flex-basis:44px;width:44px;height:44px}}

/* 합산 무게: 더 크고 진하게 + 굴러가는 숫자 */
.gs-total b.gs-num{font:900 46px/1.05 Arial!important;letter-spacing:-1.5px!important;color:#15130f!important;font-variant-numeric:tabular-nums;margin:2px 0 4px}
.gs-total b.gs-num.dim{color:#3d3a34!important}
.gs-total>div.win b.gs-num{color:#e0600a!important}
.gs-vs b{font-size:28px!important;font-variant-numeric:tabular-nums}
[data-roll].rolling{filter:blur(.3px)}
[data-roll].landed{animation:gsLand .35s ease}
@keyframes gsLand{0%{transform:scale(1.06)}100%{transform:scale(1)}}
@media(max-width:800px){.gs-total b.gs-num{font-size:30px!important}}

.gs-sel{position:relative}
.gs-sel select{background-image:none!important;padding-right:118px!important}
.gs-chg{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;font-style:normal;font-size:13.5px;font-weight:900;color:#fff;background:#ff7a1a;border-radius:12px;padding:7px 10px 7px 13px;pointer-events:none;box-shadow:0 3px 8px #ff7a1a55}
.gs-chg svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.gs-sel:hover .gs-chg{background:#e0600a}
@media(max-width:800px){.gs-chg{font-size:0;gap:0;padding:6px}.gs-sel select{padding-right:44px!important}}
.gs-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;align-items:stretch}.gs-grid2 .gs-brand{margin:0}.gs-grid2 .gs-card{height:100%}
@media(max-width:800px){.gs-grid2{gap:8px}.gs-grid2 .gs-card{padding:10px}.gs-grid2 .gs-w b{font-size:17px}}