/* 자전거 훈련센터 (training.html) — 여백·정렬 위주로 단순하게 */
.tr-main{max-width:1120px;margin:0 auto;padding:8px 24px 120px;box-sizing:border-box}
.tr-head{padding:8px 0 22px}
.tr-eyebrow{margin:0 0 10px;font:700 11px Arial,sans-serif;letter-spacing:2px;color:#9e9288}
.tr-head h1{margin:0;font-size:34px;line-height:1.25;letter-spacing:-1.2px}
.tr-sub{margin:10px 0 0;font-size:15px;line-height:1.65;color:#6f6456;max-width:640px}
.tr-sub b{color:#b85a0c}

.tr-search{position:relative;display:flex;align-items:center;margin:0 0 12px}
.tr-search>svg{position:absolute;left:16px;color:#9a8f80;pointer-events:none}
.tr-search input{width:100%;box-sizing:border-box;height:48px;border:1px solid #e6dccb;border-radius:999px;background:#fff;color:inherit;font:inherit;font-size:15px;padding:0 44px;outline:0;-webkit-appearance:none;appearance:none}
.tr-search input::-webkit-search-cancel-button{display:none}
.tr-search input:focus{border-color:#e8731a;box-shadow:0 0 0 3px rgba(232,115,26,.15)}
.tr-search input::placeholder{color:#9a8f80}
.tr-qx{position:absolute;right:8px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:#8a7f6e;font-size:14px;cursor:pointer}

.tr-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.tr-region{height:38px;border:1px solid #e6dccb;border-radius:999px;background:#fff;color:inherit;font:inherit;font-size:14px;font-weight:700;padding:0 32px 0 14px;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8a7f6e 50%),linear-gradient(135deg,#8a7f6e 50%,transparent 50%);background-position:calc(100% - 17px) 16px,calc(100% - 12px) 16px;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.tr-chips{display:flex;flex-wrap:wrap;gap:6px}
.tr-chip{height:38px;padding:0 15px;border:1px solid #e6dccb;border-radius:999px;background:#fff;color:#6f6456;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.tr-chip.on{background:#1f1c18;border-color:#1f1c18;color:#fff}
.tr-region:focus-visible,.tr-chip:focus-visible,.tr-card:focus-visible,.tr-btn:focus-visible{outline:2px solid #e8731a;outline-offset:2px}
.tr-count{margin:4px 0 12px;font-size:13px;color:#8a7f6e}

.tr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:14px}
.tr-card{position:relative;display:flex;flex-direction:column;gap:6px;box-sizing:border-box;min-width:0;padding:18px 20px;border:1px solid #eee5d8;border-radius:18px;background:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.tr-card:hover{border-color:#d8c9b0;box-shadow:0 6px 18px rgba(60,40,10,.07)}
.tr-card.feat{border-color:#e8731a;box-shadow:0 0 0 1px rgba(232,115,26,.25)}
.tr-feat{margin:0;font-size:12px;font-weight:900;letter-spacing:.02em;color:#d2570a}
.tr-top{display:flex;align-items:baseline;gap:8px}
.tr-card h3{margin:0;font-size:17px;line-height:1.35;letter-spacing:-.4px;overflow-wrap:anywhere}
.tr-cc{margin-left:auto;font-size:12px;font-weight:800;color:#b85a0c;white-space:nowrap}
.tr-reg{margin:0;font-size:12.5px;font-weight:800;color:#b08a2e}
.tr-svc{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0;padding:0;list-style:none}
.tr-svc li{font-size:11.5px;font-weight:800;background:#f3eee6;border-radius:8px;padding:2px 8px;color:#5b5145}
.tr-sum{margin:2px 0 0;font-size:13.5px;line-height:1.55;color:#5d554a;overflow-wrap:anywhere}
.tr-meta{margin:auto 0 0;padding-top:8px;font-size:12.5px;color:#8a7f6e;display:flex;flex-wrap:wrap;gap:2px 12px}
.tr-empty{grid-column:1/-1;padding:40px 8px;text-align:center;color:#8a7f6e;font-size:15px;line-height:1.7}
.tr-empty a,.tr-more a{color:#b85a0c;font-weight:800}

.tr-more{margin:34px 0 0;padding:22px 24px;border:1px solid #eee5d8;border-radius:18px;background:#faf7f2;font-size:14px;line-height:1.7;color:#5d554a}
.tr-more h2{margin:0 0 6px;font-size:16px}
.tr-more p{margin:0}
.tr-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;margin-top:12px;padding:0 20px;border-radius:999px;background:#1f1c18;color:#fff!important;font-size:14px;font-weight:800;text-decoration:none}
.tr-note{margin:18px 0 0;font-size:12.5px;line-height:1.7;color:#8a7f6e}
.tr-seo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 상세 팝업 */
dialog.tr-dlg{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(580px,calc(100vw - 20px));max-height:calc(100vh - 24px);padding:0;border:0;border-radius:20px;background:#fff;color:#1f1c18;box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:auto}
dialog.tr-dlg::backdrop{background:rgba(20,16,10,.55)}
.tr-dx{position:sticky;top:8px;float:right;margin:8px 8px 0 0;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.06);color:#6f6455;font-size:16px;cursor:pointer;z-index:3}
.tr-dv{padding:26px 24px 24px}
.tr-dv h2{margin:0 0 4px;font-size:24px;line-height:1.35;font-weight:900;letter-spacing:-.02em;padding-right:36px;overflow-wrap:anywhere}
.tr-dv .tr-reg{margin:0 0 12px}
.tr-dbtns{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px}
.tr-dcall,.tr-dmap{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:12px;font-size:15px;font-weight:800;text-decoration:none;box-sizing:border-box;max-width:100%;flex:1 1 200px}
.tr-dcall{background:#1f1c18;color:#fff}.tr-dcall.off{background:#efe9df;color:#8a7f6e}
.tr-dmap{background:#fff;color:#1f1c18;border:1px solid #d9cdb9}
.tr-dl{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px 12px;margin:0 0 12px;font-size:14.5px;line-height:1.6}
.tr-dl dt{color:#8a7f6e;font-weight:700}.tr-dl dd{margin:0;overflow-wrap:anywhere}
.tr-dl .tr-svc{margin:0 0 4px}
.tr-links{display:flex;flex-wrap:wrap;gap:4px 14px}
.tr-links a{color:#b85a0c;font-weight:700}
.tr-copy{margin-left:6px;height:26px;padding:0 10px;border:1px solid #d9cdb9;border-radius:99px;background:#fff;color:#5d554a;font-size:12px;cursor:pointer}
.tr-dfine{margin:8px 0 0;font-size:12.5px;color:#8a7f6e;line-height:1.55}
@media (max-width:600px){
 .tr-main{padding:4px 16px 110px}
 .tr-head h1{font-size:28px}
 .tr-filters{align-items:stretch}
 .tr-region{width:100%}
}
@media (max-width:480px){.tr-dv{padding:22px 16px 20px}.tr-dl{grid-template-columns:52px minmax(0,1fr)}.tr-dv h2{font-size:21px}}

/* 다크 */
:root[data-theme="dark"] .tr-sub,:root[data-theme="dark"] .tr-sum{color:#b3a996}
:root[data-theme="dark"] .tr-sub b,:root[data-theme="dark"] .tr-cc,:root[data-theme="dark"] .tr-empty a,:root[data-theme="dark"] .tr-more a,:root[data-theme="dark"] .tr-links a{color:#e8a566}
:root[data-theme="dark"] .tr-search input,:root[data-theme="dark"] .tr-region,:root[data-theme="dark"] .tr-chip{background-color:#1f1c18;border-color:#3a342b;color:#f4efe6}
:root[data-theme="dark"] .tr-chip{color:#c9bca6}
:root[data-theme="dark"] .tr-chip.on{background:#f4efe6;border-color:#f4efe6;color:#1f1c18}
:root[data-theme="dark"] .tr-card,:root[data-theme="dark"] .tr-more{background:#1f1c18;border-color:#3a342b}
:root[data-theme="dark"] .tr-card:hover{border-color:#5a5040;box-shadow:none}
:root[data-theme="dark"] .tr-card.feat{border-color:#e8731a}
:root[data-theme="dark"] .tr-feat{color:#ff9a5a}
:root[data-theme="dark"] .tr-svc li{background:#2c2721;color:#c9bca6}
:root[data-theme="dark"] .tr-reg{color:#d1ad55}
:root[data-theme="dark"] .tr-meta,:root[data-theme="dark"] .tr-count,:root[data-theme="dark"] .tr-note,:root[data-theme="dark"] .tr-empty,:root[data-theme="dark"] .tr-eyebrow{color:#a89d8d}
:root[data-theme="dark"] .tr-more{color:#c9bca6}
:root[data-theme="dark"] .tr-btn{background:#f4efe6;color:#1f1c18!important}
:root[data-theme="dark"] dialog.tr-dlg{background:#231f1a;color:#f4efe6}
:root[data-theme="dark"] .tr-dx{background:rgba(255,255,255,.1);color:#c9bca6}
:root[data-theme="dark"] .tr-dcall{background:#f4efe6;color:#1f1c18}
:root[data-theme="dark"] .tr-dcall.off{background:#2c2721;color:#a89d8d}
:root[data-theme="dark"] .tr-dmap{background:#231f1a;color:#f4efe6;border-color:#3a342b}
:root[data-theme="dark"] .tr-dl dt,:root[data-theme="dark"] .tr-dfine{color:#a89d8d}
:root[data-theme="dark"] .tr-copy{background:#2c2721;border-color:#3a342b;color:#c9bca6}
#trCmt{margin-top:18px;padding-top:6px;border-top:1px solid #eee6d8}
:root[data-theme="dark"] #trCmt{border-color:#3a342b}
.tr-sub,.tr-sum,.tr-more p,.tr-note,.tr-empty,.tr-dfine,.tr-dl dd{word-break:keep-all}