/* calc 탭 화면 — 카테고리(W46) · 계산기 하나(W36). 앱 common.dart · category_screen.dart 값 */

/* ── 카테고리 (앱 CategoryScreen · CalcListTile) ── */
.cl-cat .bar2{margin-bottom:2px}
.cl-search{height:48px;border-radius:24px;background:#FDFDFE;display:flex;align-items:center;gap:10px;padding:0 16px;margin:2px 4px 10px;max-width:560px;
  box-shadow:5px 5px 12px rgba(150,164,186,.40),-4px -4px 10px #fff;cursor:text}
.cl-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:15px;font-weight:500;color:var(--ink)}
.cl-search input::placeholder{color:var(--t3)}
.cl-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.cl-drag{display:flex;align-items:center;gap:4px;padding:2px 4px 8px;font-size:11.5px;color:var(--t3)}
.cl-rows{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
.cl-row{background:#fff;border-radius:16px;padding:10px 14px;margin-bottom:8px;display:flex;align-items:center;box-shadow:0 3px 14px rgba(16,35,58,.10);
  min-width:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;position:relative;transition:box-shadow .15s}
.cl-row:hover{box-shadow:0 4px 16px rgba(16,35,58,.14)}
.cl-row b{margin-left:12px;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 0;min-width:0}
.cl-row .kw{margin-left:10px;font-size:11.5px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 0;min-width:0;text-align:right}
.cl-row.lift{z-index:3;opacity:.92;box-shadow:0 10px 26px rgba(16,35,58,.22);transition:none}
.cl-row.over{box-shadow:0 0 0 2px var(--primary)}
.cl-none{padding:60px 0;text-align:center;font-size:15px;color:var(--t3)}

/* ── 계산기 하나 (W36) ── */
.cl-bar h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-top{display:flex;margin-right:-6px}
.cl-ib{position:relative;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px}
.cl-ib:hover{background:rgba(34,40,47,.05)}
.cl-badge{position:absolute;right:6px;top:8px;min-width:16px;padding:1px 5px;border-radius:9px;background:var(--primary);color:#fff;font-style:normal;font-size:9.5px;font-weight:500;line-height:1.3;text-align:center}
.cl-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;padding:0 6px 20px}
.cl-calc.wide-left{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.cl-calc.wide-right{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.cl-l>*+*,.cl-r>*+*{margin-top:18px}
.cl-soon{display:flex;flex-direction:column;align-items:center;padding:80px 32px;text-align:center}
.cl-soon b{margin-top:24px;font-size:20px;font-weight:500}
.cl-soon span{margin-top:10px;font-size:15px;line-height:1.6;color:var(--t2)}

/* 숫자 칸 — 앱 AmountField (떠 있는 면 52 · 둥글기 16 · 숫자 24) */
.cl-lb{display:flex;align-items:baseline;padding:0 0 8px 4px}
.cl-lb span{flex:1;min-width:0;font-size:15px;font-weight:500;color:var(--t2);white-space:pre;overflow:hidden;text-overflow:ellipsis}
.cl-in{height:52px;border-radius:16px;background:#FAFBFC;display:flex;align-items:center;padding:0 6px 0 16px;gap:6px;cursor:text;
  box-shadow:4.6px 4.6px 11.1px rgba(150,164,186,.40),-3.7px -3.7px 9.3px #fff}
.cl-in:focus-within{box-shadow:inset 0 0 0 1.8px var(--primary),4.6px 4.6px 11.1px rgba(150,164,186,.40),-3.7px -3.7px 9.3px #fff}
.cl-in input{flex:1;min-width:0;border:0;outline:0;background:none;text-align:right;font:inherit;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.cl-in input::placeholder{color:var(--t3)}
.cl-in i{font-style:normal;font-size:15px;font-weight:500;color:var(--t2);white-space:nowrap}
.cl-in:not(:has(.cl-x)){padding-right:16px}
.cl-x{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:12px}
.cl-un{padding:6px 0 0 4px;font-size:12.5px;font-weight:500;color:var(--primary)}
.cl-tx{display:block;border-radius:16px;background:#FAFBFC;box-shadow:5px 5px 12px rgba(150,164,186,.40),-4px -4px 10px #fff}
.cl-tx:focus-within{box-shadow:inset 0 0 0 1.8px var(--primary),5px 5px 12px rgba(150,164,186,.40),-4px -4px 10px #fff}
.cl-tx input,.cl-tx textarea{display:block;width:100%;border:0;outline:0;background:none;font:inherit;font-size:15px;font-weight:500;color:var(--ink);padding:15px 16px}
.cl-tx textarea{resize:vertical;line-height:1.6;min-height:140px}
.cl-tx input::placeholder,.cl-tx textarea::placeholder{color:var(--t3);font-weight:500}
.cl-date{position:relative;height:57px;border-radius:16px;background:#FAFBFC;display:flex;align-items:center;gap:12px;padding:0 18px;cursor:pointer;
  box-shadow:5px 5px 12px rgba(150,164,186,.40),-4px -4px 10px #fff}
.cl-date b{flex:1;min-width:0;margin-right:-4px;font-size:17px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-f>.cl-date+*{margin-top:0}
.cl-date input{position:absolute;inset:0;z-index:1;opacity:0;width:100%;height:100%;cursor:pointer;border:0}
.cl-date:focus-within{box-shadow:inset 0 0 0 1.8px var(--primary),5px 5px 12px rgba(150,164,186,.40),-4px -4px 10px #fff}

/* 고르는 띠 — 앱 SurfySeg (상단 탭과 같은 부품) */
.cl-seg{display:flex;width:100%;padding:4px;border-radius:99px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95);box-shadow:0 6px 18px rgba(16,35,58,.13)}
.cl-seg button{flex:1;min-width:0;text-align:center;padding:10px 4px;font-weight:500;color:var(--t2);border-radius:99px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-seg button.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 2px 8px rgba(16,42,58,.13)}

/* 칩 — 앱 ChoiceChip · ActionChip */
.cl-chips{display:flex;flex-wrap:wrap;gap:8px}
.cl-chip{height:32px;padding:0 14px;border-radius:99px;background:#FAFBFC;font-size:14px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 1px 3px rgba(150,164,186,.55)}
.cl-chip.on{background:var(--primary);color:#fff}
.cl-chip:not(.on):hover{background:#F2F5F8}
.cl-achip{height:32px;padding:0 12px;border-radius:15px;background:#fff;border:1px solid var(--divider);font-size:14px;font-weight:500;color:var(--ink);
  box-shadow:0 1px 3px rgba(150,164,186,.55)}
.cl-achip:hover{background:#F7F9FB}
.cl-f+.cl-chips{margin-top:12px}

/* 결과 상자 — 앱 ResultBox (옅은 파랑 · 둥글기 20) */
.cl-rb{background:#DFEBF9;border-radius:20px;padding:20px;box-shadow:5.7px 5.7px 13.7px rgba(150,164,186,.40),-4.6px -4.6px 11.4px #fff}
.cl-rb .l{font-size:13px;font-weight:500;color:#1A6FD1}
.cl-rb .v{margin-top:6px;font-weight:600;color:#155BAB;line-height:1.25;word-break:break-all}
.cl-rb .k{margin-top:5px;font-size:13px;font-weight:500;color:#1A6FD1}
.cl-rb hr{border:0;border-top:1px solid rgba(6,117,229,.2);margin:21.5px 0 17.5px}
.cl-rb .d{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:15px}
.cl-rb .d span{color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cl-rb .d b{font-weight:600;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* 안내 상자 — 앱 NoticeBox (눌린 면) */
.cl-nb{display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:16px;background:#EEF1F5;
  box-shadow:inset 3px 3px 9px rgba(150,164,186,.38),inset -3px -3px 9px #fff}
.cl-nb svg{flex:none;margin-top:1px}
.cl-nb p{font-size:12.5px;line-height:1.55;color:#3F5D77}
.cl-sec{display:flex;align-items:center;padding:0 2px 10px}
.cl-sec b{flex:1;font-size:13px;font-weight:600}
.cl-sec.small b{font-weight:500;color:var(--t3)}
.cl-sec+*{margin-top:0!important}
.cl-desc{padding-left:4px;font-size:12.5px;color:var(--t3);line-height:1.5}
.cl-card{background:#FAFBFC;border-radius:16px;box-shadow:5px 5px 12px rgba(150,164,186,.40),-4px -4px 10px #fff;overflow:hidden}
.cl-step{width:44px;height:40px;border-radius:20px;background:#FAFBFC;display:flex;align-items:center;justify-content:center;
  box-shadow:3.9px 3.9px 9.4px rgba(150,164,186,.40),-3.1px -3.1px 7.9px #fff}
.cl-step:disabled{cursor:default;box-shadow:inset 2.4px 2.4px 7.1px rgba(150,164,186,.38),inset -2.4px -2.4px 7.1px #fff;background:#EEF1F5}
.cl-sw{display:flex;align-items:center;gap:12px;padding:12px 4px;cursor:pointer}
.cl-sw span{flex:1;font-size:15px;font-weight:500}
.cl-sw span small{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--t3)}
.cl-sw input{position:absolute;opacity:0;pointer-events:none}
.cl-sw .t{position:relative;flex:none;width:44px;height:26px;border-radius:99px;background:var(--chip);transition:background .18s}
.cl-sw .t::after{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:99px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s}
.cl-sw input:checked+.t{background:var(--primary)}.cl-sw input:checked+.t::after{transform:translateX(18px)}
.cl-sw input:focus-visible+.t{outline:2px solid var(--primary);outline-offset:2px}

/* 결과 아래 세 단추 — 앱 ResultActions (62 · 둥글기 15 · 「기록에 저장」 만 파랑) */
.cl-acts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:20px!important}
.cl-acts button{height:62px;border-radius:15px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:11.5px;font-weight:500;color:var(--t2);box-shadow:0 2px 6px rgba(150,164,186,.45)}
.cl-acts button.f{background:var(--primary);color:#fff}
.cl-acts button:disabled{color:var(--t3);cursor:default}
.cl-acts button.f:disabled{background:#D3DCE6;color:#fff}
.cl-acts button:not(:disabled):hover{filter:brightness(.98)}

/* 히스토리 판 — 앱 calc_history_sheet.dart */
.cl-hs{display:flex;flex-direction:column;min-height:0;max-height:inherit}
.sheet>.cl-hs{flex:1}
.cl-hs .hd{display:flex;align-items:center;padding:18px 14px 10px 20px;flex:none}
.cl-hs .hd b{font-size:15px;font-weight:500}
.cl-hs .hd span{margin-left:6px;font-size:13px;font-weight:500;color:var(--t3)}.cl-hs .hd span.on{color:var(--primary)}
.cl-hs .hd i{flex:1}
.cl-hs .hd .ib{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px}
.cl-hs .hd .tx{height:40px;padding:0 7px;font-size:13px;font-weight:500;color:var(--primary)}
.cl-hs .hint{padding:0 22px 10px;font-size:11.5px;line-height:1.55;color:var(--t3);flex:none}
.cl-hs .none{padding:32px;text-align:center;font-size:15px;line-height:1.7;color:var(--t3)}
.cl-hs .ls{padding:4px 20px 28px;display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto}
.cl-hs .row{display:flex;align-items:center;padding:12px 8px 12px 16px;border-radius:16px;background:#FAFBFC;cursor:pointer;user-select:none;
  box-shadow:5px 5px 12px rgba(150,164,186,.40),-4px -4px 10px #fff}
.cl-hs .row.on{background:#EAF3FF}
.cl-hs .row .tx{flex:1;min-width:0}
.cl-hs .row .tx span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px;line-height:1.45;font-weight:500;color:var(--t3)}
.cl-hs .row .tx b{display:block;margin-top:3px;font-size:15px;font-weight:500;color:#1A6FD1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-hs .kp{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:12px}
.cl-hs .ck{width:22px;height:22px;margin:9px;flex:none;border-radius:99px;border:1.8px solid #C6CDD4;background:#fff;display:flex;align-items:center;justify-content:center}
.cl-hs .ck.on{background:var(--primary);border-color:var(--primary)}

/* 미니 계산기 — 앱 mini_host · mini_calc (232 × 316 · 둥글기 24 · 유리) */
.cl-mini{position:fixed;z-index:40;width:232px;height:316px;border-radius:24px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 6px 18px rgba(22,35,58,.18);display:flex;flex-direction:column;overflow:hidden;touch-action:none;user-select:none}
.cl-mini.ball{width:58px;height:58px;border-radius:99px;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible}
.cl-mball{width:58px;height:58px;border-radius:99px;background:#1A6FD1;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(10,30,60,.3)}
.cl-mhd{height:32px;display:flex;justify-content:flex-end;align-items:center;padding-right:6px;cursor:move;flex:none}
.cl-mhd button{width:28px;height:28px;border-radius:14px;display:flex;align-items:center;justify-content:center}
.cl-mdp{background:#fff;padding:0 16px 8px;text-align:right;cursor:move;flex:none}
.cl-mdp span{display:block;height:15px;font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-mdp span.m{font-weight:500;color:var(--primary)}
.cl-mdp b{display:block;height:34px;line-height:34px;font-size:26px;font-weight:500;color:#1A6FD1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-mkeys{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:0 8px 10px}
.cl-mkeys>div{height:39px;display:flex;padding:2.5px 0}
.cl-mkeys .k{flex:1;margin:0 1.5px;border-radius:12px;font-size:17px;font-weight:500;color:var(--ink)}
.cl-mkeys .k:hover{background:rgba(34,40,47,.05)}
.cl-mkeys .k.op{color:var(--primary)}.cl-mkeys .k.func{color:var(--t3)}.cl-mkeys .k.back{color:#D43B3B}
.cl-mkeys .k.eq{background:var(--primary);color:#fff;border-radius:99px}

/* ── ㉮ 폰 모양 — 앱처럼 한 줄로 ── */
@media (max-width:599px){
  .cl-rows{grid-template-columns:1fr}
  .cl-search{max-width:none}
  .cl-calc,.cl-calc.wide-left,.cl-calc.wide-right{display:block;padding:0}
  .cl-calc>.cl-r{margin-top:28px}
  .cl-top{margin-right:-10px}
  .cl-ib{width:44px}
}
/* 경조사비 — 참석 두 칸 (앱 _goBar · navySoft 판 · 고른 칸 흰색) */
.cl-go{display:flex;padding:3px;border-radius:14px;background:var(--chip)}
.cl-go button{flex:1;height:42px;border-radius:11px;font-size:13px;font-weight:500;color:var(--t3)}
.cl-go button.on{background:#fff;color:var(--ink)}
.cl-sec+.cl-chips,.cl-sec+.cl-go{margin-top:0}
.cl-chips+.cl-sec,.cl-go+.cl-sec{margin-top:20px}
/* 단위 변환 — 결과 줄 (앱 SoftCard 안 Row · 고른 단위만 옅은 파랑) */
.cl-scrollx{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:3px 3px 5px;margin:-3px -3px -5px}
.cl-scrollx::-webkit-scrollbar{display:none}
.cl-scrollx .cl-chip{flex:none;height:40px;padding:0 14px 0 10px}
.cl-dv{height:1px;background:var(--divider);margin:0 16px}
.cl-ur{display:flex;align-items:center;padding:14px 16px}
.cl-ur span{width:96px;flex:none;font-size:14px;font-weight:500;color:var(--t2)}
.cl-ur b{flex:1;text-align:right;font-size:16px;font-weight:500;word-break:break-all}
.cl-ur.on{background:#DFEBF9}.cl-ur.on span,.cl-ur.on b{color:#1A6FD1}
/* 일반 계산기 — 앱 basic_calculator.dart (식 17 · 숫자 46 · 키판 유리 · 키 62 · = 파란 알약) */
.cl-bs{display:flex;flex-direction:column;justify-content:flex-end;min-height:348px;text-align:right;padding:12px 8px 10px}
.cl-bs .tape{flex:1;max-height:320px;overflow-y:auto;display:flex;flex-direction:column;align-items:flex-end;scrollbar-width:thin}
.cl-bs .tl{display:block;max-width:100%;padding:4px 0;text-align:right;font-size:15px;font-weight:500;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-bs .tl b{font-size:16px;font-weight:500;color:#1A6FD1}
.cl-bs .ex{margin-top:6px;font-size:17px;font-weight:500;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-bs .dp{margin-top:6px;font-weight:500;line-height:1.15;word-break:break-all}
.cl-bs .ku{margin-top:4px;font-size:14px;font-weight:500;color:var(--primary)}
.cl-bs .pv{margin-top:6px;font-size:20px;font-weight:500;color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-pad{padding:14px 10px;border-radius:28px;background:rgba(255,255,255,.12);border:1px solid rgba(0,0,0,.06);box-shadow:0 6px 18px rgba(22,35,58,.13)}
.cl-pad>div{display:flex}
.cl-pad .k{flex:1;height:62px;margin:1px;border-radius:16px;font-size:26px;font-weight:500;color:var(--ink)}
.cl-pad .k:hover{background:rgba(34,40,47,.04)}
.cl-pad .k.op{color:var(--primary)}
.cl-pad .k.func{font-size:18px;color:var(--t3)}
.cl-pad .k.back{font-size:18px;color:#D43B3B}
.cl-pad .k.clear{font-size:20px;color:#D43B3B}
.cl-pad .k.eq{height:52px;margin:5px 1px;border-radius:99px;background:var(--primary);color:#fff;font-size:24px}
.cl-pad .k.eq:hover{background:#1663BD}
@media (max-width:599px){.cl-bs{min-height:0;padding-top:0}.cl-bs .tape{max-height:180px}}
/* 상자 안 작은 칸 — 앱 surfyInput(dense) */
.cl-sm{display:flex;align-items:center;gap:6px;min-width:0;flex:1;height:46px;padding:0 14px;border-radius:16px;background:#EEF1F5;cursor:text}
.cl-sm:focus-within{box-shadow:inset 0 0 0 1.8px var(--primary)}
.cl-sm input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:16px;font-weight:500;color:var(--ink)}
.cl-sm input::placeholder{color:var(--t3)}
.cl-sm i{font-style:normal;font-size:15px;font-weight:500;color:var(--t2)}
.cl-soft{background:#DFEBF9;border-radius:16px}
.cl-pad16{padding:16px}
.cl-two{display:flex;gap:10px}
/* 단가 비교 — 앱 _product (고른 쪽 옅은 파랑 · 「더 저렴」 알약) */
.cl-win{background:#DFEBF9}
.cl-ph{display:flex;align-items:center}.cl-ph b{flex:1;font-size:15px;font-weight:500}
.cl-ph i{font-style:normal;padding:3px 10px;border-radius:20px;background:var(--primary);color:#fff;font-size:11.5px;font-weight:500}
.cl-win .cl-sm{background:#fff}
.cl-pu{margin-top:10px;font-size:13.5px;font-weight:500;color:var(--t3)}.cl-pu.on{color:#1A6FD1}
.cl-upm{font-size:18px;line-height:1.5;font-weight:500;color:#1A6FD1}
.cl-upw{font-size:19px;line-height:1.55;font-weight:500;color:#1A6FD1}
.cl-upw b{font-size:26px;font-weight:500;color:#155BAB}.cl-upw em{font-style:normal;font-size:22px;font-weight:500;color:#155BAB}
/* BMI — 결과 상자 (34 숫자 · 등급 알약) · 기준 표 */
.cl-bmi .l{font-size:13px;font-weight:500;color:#1A6FD1}
.cl-bmi .v{display:flex;align-items:flex-end;gap:10px;margin-top:6px}
.cl-bmi .v b{font-size:34px;font-weight:500;color:#155BAB;line-height:1.2}
.cl-bmi .v i{font-style:normal;margin-bottom:6px;padding:5px 12px;border-radius:20px;color:#fff;font-size:13px;font-weight:500}
.cl-bmi hr{border:0;border-top:1px solid rgba(6,117,229,.2);margin:21.5px 0 17.5px}
.cl-bmi .d{display:flex;justify-content:space-between;padding:3px 0;font-size:14px}.cl-bmi .d span{color:var(--t2)}.cl-bmi .d b{font-weight:500}
.cl-std{display:flex;justify-content:space-between;padding:12px 16px}.cl-std b{font-size:14px;font-weight:500}.cl-std span{font-size:13.5px;color:var(--t2)}
/* 하루 지출 — 앱 _ItemRow · _CutBox */
.cl-h13{font-size:13px;font-weight:500;color:var(--t2)}
.cl-h115{margin-top:3px;font-size:11.5px;color:var(--t3)}
.cl-sps{display:flex;flex-direction:column;gap:8px}
.cl-sp{display:flex;align-items:center;gap:7px;padding:6px 8px 6px 13px;border-radius:16px;background:#fff;border:1px solid var(--divider)}
.cl-sp.off{background:var(--chip)}
.cl-sp .ck{width:25px;height:39px;flex:none;display:flex;align-items:center;justify-content:center;margin-right:2px}
.cl-sp .ck i{width:21px;height:21px;border-radius:7px;border:1.6px solid var(--t3);background:#fff;display:flex;align-items:center;justify-content:center}
.cl-sp .ck.on i{background:var(--primary);border-color:var(--primary)}
.cl-sp .nm,.cl-sp .am{height:40px;border-radius:20px;background:#EEF1F5;display:flex;align-items:center;cursor:text;
  box-shadow:inset 2.1px 2.1px 6.4px rgba(150,164,186,.38),inset -2.1px -2.1px 6.4px #fff}
.cl-sp.off .nm,.cl-sp.off .am{background:var(--chip)}
.cl-sp .nm{flex:1;min-width:0;padding:0 11px}
.cl-sp .am{width:108px;flex:none;padding:0 9px 0 8px;gap:4px}
.cl-sp input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-weight:500;color:var(--ink)}
.cl-sp .nm input{font-size:15px}.cl-sp .am input{font-size:16px;text-align:right}
.cl-sp input::placeholder{color:var(--t3)}
.cl-sp.off input{color:var(--t3);text-decoration:line-through}
.cl-sp .am i{font-style:normal;font-size:12.5px;color:var(--t2)}.cl-sp.off .am i{color:var(--t3)}
.cl-sp .rm{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:12px}
.cl-addrow{display:block;width:100%;padding:12px 0;border-radius:16px;background:#DFEBF9;border:1px solid var(--divider);font-size:14px;font-weight:500;color:var(--primary)}
.cl-perday{display:flex;align-items:baseline;padding:14px 16px;border-radius:14px;background:#fff;box-shadow:var(--cardShadow)}
.cl-perday span{flex:1;font-size:13.5px;font-weight:500;color:var(--t2)}.cl-perday b{font-size:22px;font-weight:500;color:#1A6FD1}
.cl-cut{padding:20px;border-radius:16px;background:#FFF4DC}
.cl-cut .l{font-size:13px;font-weight:500;color:#8A4A18}
.cl-cut .v{margin-top:6px;font-size:26px;font-weight:500;line-height:1.25;color:#6E3A10;word-break:break-all}
.cl-cut p{margin-top:5px;font-size:12.5px;line-height:1.45;color:#8A4A18}
.cl-cut hr{border:0;border-top:1px solid rgba(224,117,46,.25);margin:13px 0 9px}
.cl-cut .d{display:flex;justify-content:space-between;padding:3px 0;font-size:13.5px}.cl-cut .d span{color:#8A4A18}.cl-cut .d b{font-weight:500;color:#6E3A10}
/* 관리비 분담 — 앱 _mateRow */
.cl-secact{font-size:13px;font-weight:500;color:var(--t3);padding:2px 4px;border-radius:8px}
.cl-mates{display:flex;flex-direction:column;gap:8px}
.cl-mate{display:flex;align-items:center;gap:10px;padding:10px 6px 10px 14px}
.cl-mate .nm{flex:1;min-width:0;height:40px;border-radius:20px;background:#EEF1F5;padding:0 13px;display:flex;align-items:center;cursor:text;
  box-shadow:inset 2.1px 2.1px 6.4px rgba(150,164,186,.38),inset -2.1px -2.1px 6.4px #fff}
.cl-mate input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:15px;font-weight:500;color:var(--ink)}
.cl-mate input::placeholder{color:var(--t3)}
.cl-mate .dy{width:74px;flex:none;display:flex;align-items:center;gap:3px;cursor:text}
.cl-mate .dy input{text-align:right}.cl-mate .dy i{font-style:normal;font-size:15px;color:var(--t2)}
.cl-mate b{font-size:15px;font-weight:500;white-space:nowrap}
.cl-mate .x{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:12px}
.cl-mate .x:disabled{opacity:.4;cursor:default}
/* 숫자 하나 묻기 (앱 AlertDialog) */
.cl-pr{padding:24px 24px 12px}
.cl-pr>b{display:block;font-size:17px;font-weight:600;margin-bottom:16px}
.cl-pr .cl-in{padding-right:16px}
/* 더치페이 — 앱 영수증 칸 · 인원 수 · 이름 · 대화 카드 · 단추 둘 */
.cl-rc{display:flex;align-items:center;gap:10px;width:100%;padding:14px 16px;text-align:left}
.cl-rc b{font-size:15px;font-weight:500}.cl-rc small{margin-left:-4px;font-size:12px;color:var(--t3)}.cl-rc i{flex:1}
.cl-rc[aria-expanded="true"] svg:last-child{transform:rotate(180deg)}
.cl-rcb{padding:0 16px 16px;display:flex;flex-direction:column;gap:10px}
.cl-date.sunk{height:46px;background:#EEF1F5;box-shadow:inset 2.4px 2.4px 7.1px rgba(150,164,186,.38),inset -2.4px -2.4px 7.1px #fff}
.cl-date.sunk b{font-size:15px}.cl-date.dim b{color:var(--t3)}
.cl-dx{position:relative;z-index:2;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:10px}
.cl-achip.blue{font-size:13.5px;color:#1A6FD1}
.cl-achip.red{background:#D43B3B;border-color:#D43B3B;color:#fff;min-width:40px}
.cl-stp{display:flex;align-items:center;justify-content:space-between;padding:6px 8px}
.cl-stp .n{display:flex;flex-direction:column;align-items:center;padding:6px 18px;border-radius:12px}
.cl-stp .n b{font-size:18px;font-weight:500}.cl-stp .n small{font-size:10.5px;color:var(--t3)}
.cl-card>.cl-sw{padding:12px 16px}
.cl-nms{padding:0 16px 8px}.cl-nms>div{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cl-nms i{width:28px;height:28px;flex:none;border-radius:9px;background:#DFEBF9;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12.5px;font-weight:500;color:#1A6FD1}
.cl-nms .cl-sm{height:42px}
.cl-talk{padding:22px;border-radius:16px;background:#fff;box-shadow:var(--cardShadow)}
.cl-talk .pl{display:flex;align-items:center;gap:5px;margin-bottom:8px;font-size:13px;font-weight:500;color:#1A6FD1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-talk .q{font-size:15px;line-height:1.55;font-weight:500;color:#1A6FD1}
.cl-talk .a{margin-top:6px;font-size:24px;line-height:1.4;font-weight:500;color:#1A6FD1;word-break:keep-all}
.cl-dpb{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px!important}
.cl-dpb button{height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:500}
.cl-dpb .o{background:#fff;border:1px solid var(--primary);color:#1A6FD1}
.cl-dpb .f{background:var(--primary);color:#fff}
.cl-dpb button:disabled{border-color:var(--divider);color:var(--t3);cursor:default}.cl-dpb .f:disabled{background:#D3DCE6;color:#fff}
.cl-stack>*+*{margin-top:12px}
.cl-r>.cl-nb+.cl-nb{margin-top:10px}
/* 장학금 — 앱 _aidCard · 추가/빼기 */
.cl-aid{padding:12px 14px 14px}
.cl-aid .t{display:flex;align-items:center;gap:8px}
.cl-aid .t i{width:26px;height:26px;flex:none;margin-right:2px;border-radius:13px;background:var(--primary);color:#fff;font-style:normal;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.cl-aid .cl-sm{height:42px}.cl-aid .cl-sm[style*="width"]{flex:none;padding:0 6px}
.cl-aid .cl-chips{margin-top:10px;gap:6px}
.cl-chip.sm{height:28px;padding:0 12px;font-size:12.5px}
.cl-2b{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cl-2b button{height:50px;border-radius:99px;background:#FAFBFC;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500;color:#1A6FD1;
  box-shadow:0 2px 4px rgba(150,164,186,.55)}
.cl-2b button.g{color:var(--t2)}
.cl-2b button:disabled{opacity:.45;cursor:default}
.cl-stack[style*="--g"]>*+*{margin-top:var(--g)}
.cl-aid .t i.soft{border-radius:9px;background:#DFEBF9;color:#1A6FD1;font-weight:500}
.cl-aid .t .u{flex:none;font-size:13px;font-weight:500;color:var(--t2)}
.cl-chip.xs{height:28px;padding:0 10px;font-size:12px}
/* 글자수 세기 — 칸 8줄까지 · 아래 작은 단추 · 목표 막대 */
.cl-tx.multi textarea{max-height:224px;overflow-y:auto;resize:none}
.cl-tools{display:flex;gap:8px;margin-top:10px!important;padding-left:2px}
.cl-tool{display:inline-flex;align-items:center;gap:5px;padding:9px 14px;border-radius:15px;background:#fff;border:1px solid var(--divider);font-size:13px;font-weight:500;color:var(--ink)}
.cl-tool:disabled{background:#FAFBFC;border-color:#F1F3F6;color:var(--t3);cursor:default}
.cl-bar8{height:8px;border-radius:99px;background:var(--chip);overflow:hidden;margin-top:14px!important}
.cl-bar8 i{display:block;height:100%;border-radius:99px}
.cl-bar8+.cl-nb{margin-top:12px}
.cl-tx .cl-rx{font-size:20px;letter-spacing:1px;text-transform:uppercase}
.cl-ur.rx{align-items:flex-start;padding:15px 16px}.cl-ur.rx span{width:62px;font-size:13.5px}.cl-ur.rx b{font-size:16px;line-height:1.4;letter-spacing:.5px;user-select:text}
/* 공학용 계산기 — 함수 단추 세 줄 (40 · 둥글기 15 · tile 색) · 키판 (58 · = 두 칸) */
.cl-bs.sci{min-height:300px}
.cl-bs .pv.sci{color:#1A6FD1;white-space:normal;word-break:break-all}
.cl-fn>div{display:flex;padding:3px 0}
.cl-fn button{flex:1;height:40px;margin:0 3px;border-radius:15px;background:#F0F0F0;font-size:15px;font-weight:500;color:var(--t2);white-space:nowrap}
.cl-fn button.on{background:var(--primary);color:#fff}
.cl-fn button:hover{filter:brightness(.97)}
.cl-pad.sci{margin-top:8px!important;background:var(--chip);border:0;box-shadow:none;border-radius:26px;padding:14px 10px 20px}
.cl-pad.sci .k{height:58px;font-size:25px}
.cl-pad.sci .k.func,.cl-pad.sci .k.back{font-size:18px}
.cl-pad.sci .k.eq{height:48px;flex:2;font-size:23px}
.cl-calc.padcalc{align-items:stretch}
.cl-calc.padcalc>.cl-l{display:flex;flex-direction:column;justify-content:flex-end}
.cl-calc.padcalc .cl-bs{min-height:0}
@media (max-width:599px){.cl-calc.padcalc .cl-bs{min-height:160px}}
/* 실수령액 — 공제 내역 줄 · 연금 기준 줄 · ± 가운데 숫자 */
.cl-stv{font-size:22px;font-weight:500}
.cl-nr{display:flex;align-items:center;gap:6px;padding:13px 16px}
.cl-nr b{font-size:15px;font-weight:500;white-space:nowrap}
.cl-nr small{font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cl-nr i{flex:1}
.cl-nr span{font-size:15px;font-weight:500;color:var(--t2);white-space:nowrap}
.cl-nr.b span{color:var(--ink)}
.cl-pb{padding:0 16px 12px;font-size:11.5px;line-height:1.6;color:var(--t3)}
/* 퇴직금 — 재직 안내 띠 · 3개월 평균 줄 */
.cl-elig{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:16px;background:#DFEBF9;margin-top:10px!important}
.cl-elig span{flex:1;font-size:13px;line-height:1.45;font-weight:500;color:#1A6FD1}
.cl-elig.warn{background:#FDF0E6}.cl-elig.warn span{color:#8A4A18}
.cl-avg{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:var(--cardShadow)}
.cl-avg span{font-size:13.5px;font-weight:500;color:#1A6FD1}.cl-avg b{font-size:17px;font-weight:500;color:#1A6FD1}
.cl-eh{font-size:12px;color:var(--t3);white-space:nowrap}
.cl-f+.cl-chips,.cl-f+.cl-nb{margin-top:10px}
.cl-l>div[style*="margin-top:26px"]{margin-top:26px!important}
/* 근무시간 합계 — 요일 줄 (앱 _row) · 시각 칸은 브라우저 시계 판 */
.cl-wh{display:flex;align-items:center;padding:8px 8px 8px 12px;gap:4px}
.cl-wh .dy{width:30px;height:40px;flex:none;font-size:15px;font-weight:500;color:var(--primary);border-radius:10px}
.cl-wh.off .dy{color:var(--t3)}
.cl-wh label{position:relative;cursor:pointer}
.cl-wh label input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0}
.cl-wh .tm{flex:1;min-width:0;display:flex;flex-direction:column}
.cl-wh .tm b{font-size:15px;font-weight:500}.cl-wh.off .tm b{color:var(--t3)}
.cl-wh .tm small{margin-top:2px;font-size:12.5px;color:var(--t3)}
.cl-wh .ib{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:12px}
.cl-wh .ib:hover{background:rgba(34,40,47,.05)}
.cl-wh .w{width:76px;flex:none;text-align:right;font-size:15px;font-weight:500}.cl-wh.off .w{color:var(--t3)}
.cl-2c{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.cl-2c>*{min-width:0}
/* 대출 — 회차표 (앱 _colFlex 11 · 22 · 19 · 23 · 25) · 전체 보기 판 */
.cl-lt{padding:0 12px}
.cl-lt .h,.cl-lt .r{display:grid;grid-template-columns:11fr 22fr 19fr 23fr 25fr;gap:4px;align-items:center}
.cl-lt .h{padding:4px 0 6px;border-bottom:1px solid var(--divider)}
.cl-lt .h span{font-size:10.5px;font-weight:500;color:var(--t3);text-align:right}
.cl-lt .r{padding:7px 0;border-bottom:1px solid var(--divider)}
.cl-lt .r.g{background:#FFF6E8;margin:0 -12px;padding:7px 12px}
.cl-lt span{font-size:11.5px;font-weight:500;color:var(--t2);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-lt span:first-child{text-align:center}
.cl-lt .r span.b{color:var(--ink)}
.cl-more{margin-left:auto;padding:2px 6px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--primary);white-space:nowrap}
.cl-stp .n.row{flex-direction:row;align-items:center;gap:6px;padding:4px 14px}
.sheet .cl-lsheet{display:flex;flex-direction:column;min-height:0;max-height:inherit}
.cl-lsheet .hd{display:flex;align-items:center;gap:4px;padding:16px 14px 10px;flex:none}
.cl-lsheet .hd b{flex:1;font-size:17px;font-weight:500;color:#1A6FD1}
.cl-lsheet .hd span{font-size:12.5px;font-weight:500;color:var(--t3);margin-right:4px}
.cl-lsheet .hd button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px}
.cl-lsheet .scroll{padding:0 4px 28px}
.sheet:has(.cl-lsheet){width:640px}
.cl-sp .rm:disabled{opacity:.4;cursor:default}
/* 주식 — 「n차 매수」 딱지 · 소계 */
.cl-tagb{font-style:normal;padding:3px 10px;border-radius:9px;background:#DFEBF9;color:#1A6FD1;font-size:12px;font-weight:500}
.cl-sub{margin-left:auto;font-size:13px;font-weight:500;color:var(--t3)}
.cl-two .cl-sm:first-child{flex:3}.cl-two .cl-sm:last-child{flex:2}
.cl-pl{margin-top:12px!important;padding:11px 14px;border-radius:16px;background:#DFEBF9;font-size:13.5px;font-weight:500;color:#1A6FD1}
.cl-pl.loss{background:var(--chip)}
.cl-warnbox{padding:22px;border-radius:16px;background:#FDF0E6;font-size:16px;line-height:1.6;font-weight:500;color:#8A4A18}
.cl-sprofit .v{flex-wrap:wrap}.cl-sprofit .v em{font-style:normal;margin-bottom:5px;font-size:18px;font-weight:500}
/* 본전 — 결과 문장 (수익이면 초록 kProfit) */
.cl-be{font-size:19px;line-height:1.55;font-weight:500;color:#1A6FD1}
.cl-be b{font-size:30px;font-weight:500;color:#1A6FD1}
.cl-be small{font-size:15px}
.cl-soft.profit{background:#E3F5EE}.cl-be.profit,.cl-be.profit b{color:#12805C}
.cl-std.on{background:#DFEBF9}
.cl-card.cl-std{display:flex;justify-content:space-between;align-items:center}
.cl-card.cl-std>span{color:var(--t2)}
.cl-std.past b,.cl-std.past span{color:var(--t3)!important}.cl-std span{color:var(--ink)}
/* 폰 모양 — 키판 계산기는 앱처럼 키판이 아래에 붙고 식은 그 바로 위 */
@media (max-width:599px){
  .cl-page:has(.cl-calc.padcalc){min-height:calc(100dvh - 24px);display:flex;flex-direction:column}
  .cl-calc.padcalc{flex:1;display:flex;flex-direction:column}
  .cl-calc.padcalc>.cl-l{flex:1}
  .cl-calc.padcalc>.cl-r{margin-top:6px}
  .cl-bs .tape{max-height:none}
}
/* 계산기 홈 최근 계산 한 줄 (js/tabs/calc/home.js · 앱 _RecentRow) */
.cl-rec{display:flex;align-items:center;gap:12px;width:100%;padding:9px 18px;text-align:left}
.cl-rec:hover{background:rgba(34,40,47,.025)}
.cl-rec .tx{flex:1;min-width:0}
.cl-rec .tx b{display:block;font-size:15px;font-weight:500;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-rec .tx small{display:block;margin-top:1px;font-size:12.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-rec em{font-style:normal;font-size:15px;font-weight:500;color:var(--t2);white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis}

/* ══ W61 PC 새 틀 (2026-09-23) — 폭 600 이상만. 카드: 흰 바탕 · 1px 선 · 둥글기 22 · 화면 높이를 채움 ══ */
@media (min-width:600px){
  /* 계산기 홈 — 두 칸이 아래 끝까지 · 즐겨찾기는 카드 폭에 고르게 · 카테고리 줄이 높이를 나눠 가짐 */
  .cl-home>.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch;min-height:calc(100vh / var(--z) - 198px)}
  .cl-home>.cols>div{display:flex;flex-direction:column;gap:16px;min-width:0}
  .cl-home .hc{margin:0;border:1px solid var(--line);border-radius:22px;box-shadow:none;overflow:hidden}
  .cl-home a.hc:hover{background:var(--fill)}
  .cl-home #fx:empty{display:none}
  .cl-home .hh{padding:16px 20px 8px}
  .cl-home .hh b{font-size:16px;font-weight:700}
  .cl-home .hint{padding:0 20px 8px}
  .cl-home .pins{grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:6px;padding:6px 14px 4px}
  .cl-home .pt{height:78px;gap:8px;border-radius:16px}
  .cl-home .pt:hover{background:var(--fill)}
  .cl-home .pt span{font-size:12.5px}
  .cl-home .fx{padding:14px 18px 14px 20px}
  .cl-home .fx .ch{height:34px;padding:0 15px;border-radius:17px;background:var(--fill);display:flex;align-items:center;font-weight:600}
  .cl-home .cl-hrec{flex:1;display:flex;flex-direction:column}
  .cl-home .cl-hrec .foot{margin-top:auto}
  .cl-home .cl-hrec .empty2{flex:1;display:flex;align-items:center;justify-content:center}
  .cl-home .cl-rec{padding:11px 20px}
  .cl-home .cl-rec:hover{background:var(--fill)}
  .cl-home .ln{background:var(--line);margin:0 20px}
  .cl-home .foot{padding:13px 20px}
  .cl-home .cl-hcat{flex:1;display:flex;flex-direction:column}
  .cl-home .cl-hcat .cr{flex:1 1 auto;min-height:50px;padding:8px 20px}
  .cl-home .cl-hcat .cr:hover{background:var(--fill)}
  .cl-home .cl-hcat .cr .ct{background:var(--fill);font-weight:600}

  /* 계산기 하나 — 제목 줄(27 굵게 · 동그란 테두리 단추) · 왼쪽 입력 카드 · 오른쪽 결과 카드 */
  .cl-page>.bar2,.cl-cat>.bar2{height:52px;margin:0 0 14px}
  .cl-page>.bar2 h2,.cl-cat>.bar2 h2{font-size:27px;font-weight:700;letter-spacing:-.8px;margin-left:12px}
  .cl-page>.bar2 .bk,.cl-cat>.bar2 .bk{width:38px;height:38px;margin-left:0;border-radius:50%;border:1px solid #E3E7EC;flex:none}
  .cl-page>.bar2 .bk:hover,.cl-cat>.bar2 .bk:hover{background:var(--fill)}
  .cl-top{gap:8px;margin-right:0}
  .cl-ib{width:38px;height:38px;border-radius:50%;border:1px solid #E3E7EC}
  .cl-ib:hover{background:var(--fill)}
  .cl-ib svg{width:20px;height:20px}
  .cl-badge{right:-4px;top:-4px}
  .cl-calc,.cl-calc.wide-left,.cl-calc.wide-right{gap:16px;padding:0;align-items:stretch;min-height:calc(100vh / var(--z) - 198px)}
  .cl-calc>.cl-l,.cl-calc>.cl-r{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 24px 26px;min-width:0}
  .cl-calc>.cl-r{background:var(--fill);border-color:var(--fill)}
  .cl-calc>.cl-r .cl-rb{box-shadow:none}
  .cl-calc>.cl-r .cl-card,.cl-calc>.cl-r .cl-tx,.cl-calc>.cl-r .cl-date,.cl-calc>.cl-r .cl-in{box-shadow:0 1px 2px rgba(20,40,70,.06);border:1px solid var(--line)}
  .cl-calc>.cl-r .cl-acts button{box-shadow:none;border:1px solid #E3E7EC}
  .cl-calc>.cl-r .cl-acts button.f{border-color:var(--primary)}
  .cl-calc>.cl-r .cl-acts button.f:disabled{border-color:#D3DCE6}
  .cl-calc>.cl-r .cl-nb{box-shadow:none;background:#fff;border:1px solid var(--line)}
  .cl-calc>.cl-r:empty{display:none}
  .cl-calc.padcalc>.cl-l{justify-content:flex-end}
  .cl-soon{min-height:calc(100vh / var(--z) - 198px);justify-content:center;border:1px solid var(--line);border-radius:22px}

  /* 카테고리 하나 — 찾기 칸을 제목 줄 오른쪽에 · 줄은 테두리 카드 · 넓으면 세 줄 */
  .cl-cat{align-content:flex-start}
  .cl-cat>.bar2{flex:1 1 auto!important;margin-bottom:14px}
  .cl-cat>.cl-search{flex:0 0 320px!important;height:38px;margin:7px 0 14px auto;border-radius:19px;background:var(--fill);box-shadow:none;padding:0 14px}
  .cl-cat>.cl-search input{font-size:13.5px}
  .cl-cat .cl-drag{padding:0 4px 10px}
  .cl-rows{column-gap:12px}
  .cl-row{border:1px solid var(--line);border-radius:18px;box-shadow:none;padding:14px 16px;margin-bottom:12px;min-height:72px}
  .cl-row:hover{box-shadow:none;background:var(--fill)}
  .cl-row .ctile,.cl-row>span:first-child{flex:none}
  .cl-row b{font-size:15.5px;font-weight:600}
  .cl-row .kw{color:var(--t3)}
}
@media (min-width:1500px){.cl-rows{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:600px){
  .cl-calc.padcalc>.cl-r{display:flex;flex-direction:column;justify-content:flex-end}
  .cl-calc.padcalc .cl-pad{background:#fff;border-color:var(--line);box-shadow:none}
  .cl-calc.padcalc .cl-pad.sci{background:#fff}
}