:root{ --primary:#1A1A1A; --primary-h:#000; --primary-bg:#F1F1EE; --primary-l:#CFCFC9; --hero-rgb:22,22,22; --accent:#F5A524; --accent-text:#9A6400; --hero-img:url(https://images.unsplash.com/photo-1536098561742-ca998e48cbcc?w=1600&h=640&fit=crop&auto=format); --navy:#111; --text:#111; --text2:#4D4D4D; --text3:#6B6B6B; --link:#1A1A1A; --border:#E2E2DE; --border2:#ECECE8; --bg:#F7F7F5; --white:#fff; --good:#0A7A3F; --good-bg:#E6F4EA; --good-br:#B7E1C1; --mid:#5F6B7A; --mid-bg:#F1F3F5; --mid-br:#D5DAE0; --bad:#C21F35; --bad-bg:#FDECEE; --bad-br:#F5B9C1; --star:#F5A623; --score:#1A1A1A; --font-num:"Space Grotesk","Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; --r:10px; --r-s:6px; --shadow:0 2px 8px rgba(0,0,0,.08); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word} a{color:inherit;text-decoration:none} a.link{color:var(--link)} a.link:hover{text-decoration:underline} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} input{font:inherit;color:inherit} img{display:block;max-width:100%} ul{list-style:none} .num{font-variant-numeric:tabular-nums;white-space:nowrap} .wrap{max-width:1200px;margin:0 auto;padding:0 20px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .ic{width:16px;height:16px;flex:none;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .ic.fill{fill:currentColor;stroke:none} .btn .ic{color:#fff} .m-only{display:none} /* ---------- header ---------- */ .hd{background:#fff;border-bottom:1px solid var(--border2);position:relative;z-index:30} .hd .wrap{display:flex;align-items:center;height:60px;gap:28px} .logo{display:flex;align-items:baseline;gap:2px;font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--navy)} .logo .dot{width:8px;height:8px;border-radius:50%;background:var(--primary);display:inline-block;margin-left:2px;transform:translateY(-1px)} .logo small{font-size:12px;font-weight:600;color:var(--text3);margin-left:8px;letter-spacing:0} .nav{display:flex;gap:4px;height:100%} .nav a{display:flex;align-items:center;padding:0 12px;font-size:15px;font-weight:600;color:var(--text2);position:relative;white-space:nowrap} .nav a.on{color:var(--primary)} .nav a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--primary);border-radius:3px 3px 0 0} .hd-r{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:13px;font-weight:600;color:var(--text2)} .hd-r a{display:flex;align-items:center;gap:5px;white-space:nowrap} .btn-outline{border:1px solid var(--border);border-radius:var(--r-s);padding:7px 12px;font-weight:600;color:var(--navy);background:#fff} .btn-outline:hover{border-color:var(--navy)} .hd-m{display:none} /* ---------- search bar ---------- */ .sband{background:var(--primary-bg);padding:14px 0} .sbar{display:flex;align-items:stretch;background:#fff;border:1px solid var(--border);border-radius:var(--r);height:52px;box-shadow:var(--shadow)} .sbar .seg{display:flex;align-items:center;gap:8px;padding:0 16px;border-right:1px solid var(--border2);min-width:0} .sbar .seg.dest{flex:1 1 320px} .sbar .seg.date{flex:0 0 auto;gap:12px} .sbar .seg.guest{flex:0 0 auto} .sbar .seg .v{font-weight:600;color:var(--navy);white-space:nowrap} .sbar .seg input{border:0;outline:0;background:transparent;width:100%;min-width:0;font-weight:600;color:var(--navy)} .sbar .seg input::placeholder{color:var(--text3);font-weight:500} .sbar .seg .ic{color:var(--text2)} .sbar .x{margin-left:auto;width:18px;height:18px;border-radius:50%;background:#CFCFC9;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none} .nights{display:inline-block;background:var(--bg);border-radius:12px;padding:2px 8px;font-size:12px;font-weight:600;color:var(--text2)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--primary);color:#fff;font-weight:700;border-radius:var(--r-s);padding:0 18px;height:40px;font-size:15px;white-space:nowrap} .btn:hover{background:var(--primary-h)} .btn.sm{height:36px;font-size:14px;padding:0 14px} .btn.ghost{background:#fff;color:var(--primary);border:1px solid var(--primary)} .btn.ghost:hover{background:var(--primary-bg)} .sbar .btn{margin:5px;height:40px;border-radius:6px;padding:0 20px} /* ---------- tags / chips ---------- */ .tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;border-radius:3px;font-size:12px;font-weight:700;line-height:1;white-space:nowrap} .tag.good{background:var(--good);color:#fff} .tag.mid{background:var(--mid);color:#fff} .tag.bad{background:var(--bad);color:#fff} .tag.good-l{background:var(--good-bg);color:var(--good);border:1px solid var(--good-br)} .tag.mid-l{background:var(--mid-bg);color:var(--mid);border:1px solid var(--mid-br)} .tag.bad-l{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-br)} .tag.info{background:var(--primary-bg);color:var(--primary);border:1px solid #E2E2DE} .chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--border);border-radius:16px;background:#fff;font-size:13px;font-weight:600;color:var(--text2);white-space:nowrap} .chip.on{border-color:var(--primary);color:var(--primary);background:var(--primary-bg)} .score{display:inline-flex;align-items:center;gap:6px} .score .box{background:var(--score);color:#fff;font-weight:800;font-size:13px;border:0;border-radius:4px;padding:2px 6px;line-height:1.2;margin:0} .score .box small{font-weight:500;font-size:12px;opacity:.9} .score .cnt{color:var(--text2)} .stars{display:inline-flex;gap:1px;vertical-align:-2px} .stars svg{width:13px;height:13px;fill:var(--star)} .quote{display:inline-flex;gap:8px;color:var(--text2);font-size:13px} .quote span::before{content:"“"}.quote span::after{content:"”"} .loc{display:flex;align-items:center;gap:5px;color:var(--text2);font-size:13px} .loc .ic{color:var(--primary);width:14px;height:14px} .loc a{color:var(--link)} /* ---------- info strip ---------- */ .strip{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #E2E2DE;border-radius:var(--r);padding:11px 16px;margin-bottom:14px;font-size:13px;flex-wrap:wrap} .strip b{color:var(--navy)} .strip .ok{color:var(--primary);display:inline-flex;align-items:center;gap:4px;font-weight:700} .strip .sp{margin-left:auto} /* ---------- results layout ---------- */ .page{padding:16px 0 40px} .cols{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start} .cols>*{min-width:0} .side{display:flex;flex-direction:column;gap:12px} .card{background:#fff;border:1px solid var(--border);border-radius:var(--r)} .map{height:120px;border-radius:var(--r) var(--r) 0 0;position:relative;overflow:hidden;background:#ECECE8} .map .pin{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;background:var(--primary);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transform:translate(-50%,-50%)} .map .btn{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);height:32px;font-size:13px;padding:0 12px;box-shadow:0 2px 6px rgba(0,0,0,.25)} .map .osm{position:absolute;right:4px;top:3px;font-size:10px;color:#333;background:rgba(255,255,255,.75);padding:0 4px;border-radius:2px} .fgroup{padding:14px 16px;border-top:1px solid var(--border2)} .fgroup:first-child{border-top:0} .fgroup .fh{font-size:14px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;color:var(--navy)} .fgroup .fh a{font-size:12px;font-weight:500;color:var(--link)} .fgroup li > a{padding:4px 0} .fgroup ul{display:flex;flex-direction:column;gap:8px} .fgroup li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2)} .fgroup li label{display:flex;align-items:center;gap:8px;flex:1;cursor:pointer} .fgroup li .cnt{margin-left:auto;color:var(--text3);font-size:12px} input.cb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.5px solid #CFCFC9;border-radius:3px;background:#fff;flex:none;position:relative;margin:0;cursor:pointer} input.cb:checked{background:var(--primary);border-color:var(--primary)} input.cb:checked::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .fgroup .more{color:var(--link);font-size:13px;margin-top:8px;display:inline-block} .slider{position:relative;height:28px;margin:4px 4px 8px} .slider .rail{position:absolute;left:0;right:0;top:13px;height:3px;background:#E2E2DE;border-radius:2px} .slider .fillr{position:absolute;left:0;right:0;top:13px;height:3px;background:var(--primary);border-radius:2px} .slider .kn{position:absolute;top:7px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--primary);box-shadow:0 1px 3px rgba(0,0,0,.2)} .pchips{display:flex;flex-wrap:wrap;gap:6px} .pchips span{border:1px solid var(--border);border-radius:4px;padding:4px 8px;font-size:12px;color:var(--text2);background:#fff;display:inline-block} .pchips a.on span{border-color:var(--primary);color:var(--primary);background:var(--primary-bg);font-weight:700} .fgroup li a.on{font-weight:800;color:var(--primary)} .fgroup li a.on .tag{outline:2px solid var(--primary);outline-offset:1px} .rhead{display:flex;align-items:center;gap:12px;margin:4px 0 14px;flex-wrap:wrap} .rhead h1{font-size:20px;font-weight:800;letter-spacing:-.02em} .rhead .sum{display:flex;gap:6px} .rhead .sort{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:var(--r-s);background:#fff;padding:7px 12px;font-size:13px;font-weight:600;color:var(--navy)} .rhead .sort a{white-space:nowrap;color:var(--text3);font-weight:600} .rhead .sort a[aria-current]{color:var(--navy);font-weight:800} .rhead .sort span{white-space:nowrap} .fchips{display:none} /* ---------- hotel card (list) ---------- */ .hc{display:grid;grid-template-columns:240px minmax(0,1fr) 220px;background:#fff;border:1px solid var(--border);border-radius:var(--r);margin-bottom:12px;overflow:hidden;transition:box-shadow .15s;min-width:0} .hc:hover{box-shadow:0 4px 14px rgba(0,0,0,.12)} .hc .ph{position:relative;background:#ECECE8} .hc .ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:240/236} .hc .ph .heart{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;color:var(--navy)} .hc .ph .cnt{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;padding:2px 7px;border-radius:3px} .hc .bd{padding:16px 18px 14px;display:flex;flex-direction:column;gap:7px;min-width:0} .hc .ttl{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .hc .ttl h2{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--navy)} .hc .en{color:var(--text3);font-size:13px;margin-top:-5px} .hc .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px} .hc .room{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:6px;margin-top:2px} .hc .room .ic{width:14px;height:14px;color:var(--text3)} .rng{background:var(--bg);border-radius:6px;padding:10px 12px;margin-top:2px} .rng .t{display:flex;justify-content:space-between;font-size:12px;color:var(--text2);margin-bottom:7px;gap:8px} .rng .t b{color:var(--navy);white-space:nowrap} .bar{position:relative;height:6px;background:#E2E2DE;border-radius:3px} .bar .f{position:absolute;left:0;right:0;top:0;height:6px;border-radius:3px;background:linear-gradient(90deg,#2E9E5B,#F2C94C 55%,#E5313E)} .bar .avg{position:absolute;top:-4px;width:2px;height:14px;background:var(--navy);opacity:.5} .bar .me{position:absolute;top:-5px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--primary);transform:translateX(-50%);box-shadow:0 1px 3px rgba(0,0,0,.25)} .rng .l{display:flex;justify-content:space-between;font-size:12px;color:var(--text3);margin-top:7px} .rng .rx{font-size:11px;color:var(--text3);margin-top:4px} .rng .l b{color:var(--text2);font-weight:600} .hc .pr{border-left:1px solid var(--border2);padding:16px 16px 14px;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px} .hc .pr .tags{display:flex;gap:4px;margin-bottom:2px} .hc .pr .delta{font-size:13px;font-weight:700;white-space:nowrap} .hc .pr .delta.good{color:var(--good)}.hc .pr .delta.mid{color:var(--mid)}.hc .pr .delta.bad{color:var(--bad)} .hc .pr .was{font-size:12px;color:var(--text3);white-space:nowrap} .hc .pr .p{font-size:24px;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.2;white-space:nowrap} .hc .pr .p small{font-size:14px;font-weight:700} .hc .pr .n{font-size:12px;color:var(--text2)} .hc .pr .btn{margin-top:auto;width:100%;height:40px;font-size:14px} .hc .pr .alt{font-size:13px;color:var(--link);font-weight:600;margin-top:8px;display:inline-flex;align-items:center;gap:2px} .pager{display:flex;justify-content:center;gap:6px;margin:20px 0 8px} .pager a{min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--r-s);background:#fff;font-weight:600;color:var(--text2);padding:0 8px} .pager a.on{background:var(--primary);border-color:var(--primary);color:#fff} /* ---------- footer ---------- */ .ft{background:#fff;border-top:1px solid var(--border);margin-top:40px;padding:32px 0 28px;color:var(--text2);font-size:13px} .ft .cols4{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px} .ft .fcity{border-top:1px solid var(--border2);padding:18px 0 6px} .ft .fcity dl div{display:flex;gap:12px;font-size:13px;line-height:1.6;margin-bottom:8px} .ft .fcity dt{flex:0 0 52px;font-weight:600;color:var(--text2)} .ft .fcity dd{display:flex;flex-wrap:wrap;gap:2px 14px} .ft .fh{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:10px} .ft li{margin-bottom:6px} .ft .note{border-top:1px solid var(--border2);padding-top:18px;font-size:12px;color:var(--text3);line-height:1.7} .ft .note b{color:var(--text2);font-weight:600} .ft .legal{margin-top:10px;display:flex;gap:14px;flex-wrap:wrap} .ft .legal a{color:var(--text2);font-weight:600} /* ---------- home ---------- */ .hero{position:relative;background:rgb(var(--hero-rgb)) var(--hero-img) center 40%/cover} .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--hero-rgb),.92) 0%,rgba(var(--hero-rgb),.72) 45%,rgba(var(--hero-rgb),.3) 100%)} .hero .wrap{position:relative;padding-top:40px;padding-bottom:44px} .hero h1{color:#fff;font-size:30px;font-weight:800;letter-spacing:-.03em;margin-bottom:18px} .panel{background:#fff;border-radius:12px;padding:12px;box-shadow:0 8px 24px rgba(0,0,0,.25);position:relative} .panel .sbar{height:56px;border:0;box-shadow:none;background:transparent} .panel .sbar .seg{border:1px solid var(--border);border-radius:var(--r);margin-right:8px;height:56px} .panel.open .sbar .seg.dest{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-bg)} .panel .sbar .btn{margin:0;height:56px;padding:0 28px;font-size:16px;border-radius:var(--r)} .panel .basis{display:flex;gap:16px;align-items:center;padding:10px 6px 2px;font-size:12px;color:var(--text2);flex-wrap:wrap} .panel .basis b{color:var(--navy)} .panel .basis .link{margin-left:auto} .ac{display:none;position:absolute;left:12px;top:72px;width:540px;background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:20;overflow:hidden} .panel.open .ac{display:block} .ac .grp{font-size:12px;color:var(--text3);font-weight:600;padding:10px 16px 6px;background:var(--bg);border-bottom:1px solid var(--border2)} .ac li{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border2);font-size:14px;cursor:pointer} .ac li:hover,.ac li.sel{background:var(--primary-bg)} .ac li .ic{color:var(--text2);width:18px;height:18px} .ac li .nm{font-weight:600;color:var(--navy)} .ac li .nm mark{background:none;color:var(--primary)} .ac li .sb{color:var(--text3);font-size:12px;font-weight:500} .ac li .rt{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);white-space:nowrap} .ac li .rt b{color:var(--navy)} .ac .ft2{padding:8px 16px;font-size:12px;color:var(--text3);background:var(--bg);display:flex;justify-content:space-between} .sec{margin-top:36px} .sec-h{display:flex;align-items:baseline;gap:14px;margin-bottom:14px} .sec-h h2{font-size:22px;font-weight:800;letter-spacing:-.02em;white-space:nowrap} .sec-h .tabs{display:flex;gap:4px;margin-left:8px} .sec-h .tabs a{padding:4px 10px;font-size:14px;font-weight:600;color:var(--text2);border-bottom:2px solid transparent} .sec-h .tabs a.on{color:var(--navy);border-color:var(--navy)} .sec-h .all{margin-left:auto;color:var(--link);font-size:13px;font-weight:600;white-space:nowrap} .cities{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .cities a{display:block} .cities .im{aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#ECECE8} .cities .im img{width:100%;height:100%;object-fit:cover} .cities b{display:block;text-align:center;margin-top:8px;font-size:15px;color:var(--navy)} .cities a:hover .im img{transform:scale(1.04)} .cities .im img{transition:transform .3s} .deals{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .recent{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .rc{display:flex;gap:12px;background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:10px;min-width:0} .rc img{width:88px;height:66px;object-fit:cover;border-radius:6px;flex:none} .rc .bd{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0} .rc h3{font-size:14px;font-weight:700} .rc .loc{font-size:12px} .rc .pr{display:flex;align-items:center;gap:8px;margin-top:auto;flex-wrap:wrap} .rc .pr b{font-size:16px;color:var(--navy);white-space:nowrap} .rc .pr span.d{font-size:12px;color:var(--text3)} .cap{font-size:12px;color:var(--text3)} /* ---------- hotel detail ---------- */ .crumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);padding:12px 0 10px;flex-wrap:wrap} .crumb a{color:var(--link)} .crumb .sep{color:var(--text3)} .crumb .r{margin-left:auto;color:var(--link);font-weight:600} .tabs-s{position:sticky;top:0;z-index:20;background:#fff;border:1px solid var(--border);border-radius:var(--r);margin-top:14px;display:flex;align-items:center;padding:0 8px;height:52px} .tabs-s a{padding:0 14px;height:52px;display:flex;align-items:center;font-weight:600;color:var(--text2);position:relative;font-size:14px;white-space:nowrap} .tabs-s a.on{color:var(--primary)} .tabs-s a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--primary)} .tabs-s .r{margin-left:auto;display:flex;align-items:center;gap:12px;padding-right:6px} .tabs-s .r .p{font-size:18px;font-weight:800;color:var(--navy);white-space:nowrap} .tabs-s .r .p small{font-size:12px;font-weight:500;color:var(--text2);margin-right:6px} .tabs-s .r a.btn{color:#fff;height:36px;padding:0 16px} .tabs-s .r a.btn::after{display:none} .dcols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;margin-top:16px;align-items:start} .dcols>*{min-width:0} .box{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:20px 22px;margin-bottom:14px} .box h2{font-size:18px;font-weight:800;letter-spacing:-.02em;margin-bottom:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .box h2 .t{white-space:nowrap} .box h2 small{font-size:12px;font-weight:500;color:var(--text3)} .box h2 .r{margin-left:auto;font-size:13px;font-weight:600;color:var(--link);white-space:nowrap} .box.title{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;align-items:center;padding:16px} .title .ph{aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#ECECE8} .title .ph img,.title .ph .ph-empty{width:100%;height:100%;object-fit:cover;display:block} .title .badges{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap} .title h1{font-size:26px;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:10px;flex-wrap:wrap;line-height:1.3} .title h1 .en{font-size:16px;font-weight:600;color:var(--text2)} .title .addr{margin-top:8px;font-size:13px;color:var(--text2);display:flex;gap:8px;flex-wrap:wrap;align-items:center} .title .addr a{color:var(--link)} .title .rate{margin-top:10px;display:flex;align-items:center;gap:10px;font-size:13px} .title .rate .score{margin-left:auto} .title .rv{margin-top:4px;text-align:right;font-size:13px;color:var(--text2)} .verdict{display:grid;grid-template-columns:1fr 1.3fr;gap:24px;align-items:center} .verdict .lhs .cap{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:8px;flex-wrap:wrap} .verdict .lhs .cap .chip{height:26px;font-size:12px;padding:0 10px} .verdict .lhs .p{font-size:40px;font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1.15;margin:6px 0 2px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .verdict .lhs .p small{font-size:14px;color:var(--text2);font-weight:500} .verdict .lhs .tag{height:28px;font-size:14px;padding:0 10px} .verdict .lhs .txt{margin-top:8px;font-size:14px;color:var(--text2)} .verdict .lhs .txt b{color:var(--good)} .verdict .rhs .rng{background:var(--bg);padding:14px 16px} .verdict .rhs .rng .t{font-size:13px;margin-bottom:10px} .verdict .rhs .bar{height:8px} .verdict .rhs .bar .f{height:8px} .verdict .rhs .bar .me{top:-6px;width:20px;height:20px} .verdict .rhs .l{font-size:12px;margin-top:9px} .verdict .rhs .l b{color:var(--navy);display:block;font-size:13px} .verdict .foot{grid-column:1/-1;display:flex;gap:16px;align-items:center;font-size:12px;color:var(--text3);border-top:1px solid var(--border2);padding-top:12px;flex-wrap:wrap} .verdict .foot .dot{width:7px;height:7px;border-radius:50%;background:var(--good);display:inline-block;margin-right:4px} .chart{width:100%;height:auto;display:block} .chart.m,.legend.m{display:none} .chart text{font-family:inherit} .legend{display:flex;gap:16px;font-size:12px;color:var(--text2);margin-top:6px;flex-wrap:wrap} .legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px} .legend .cap{margin-left:auto} .kv2{width:100%;border-collapse:collapse;font-size:13px;margin-top:12px} .kv2 th,.kv2 td{border-top:1px solid var(--border2);padding:9px 6px;text-align:left;vertical-align:top} .kv2 th{color:var(--text2);font-weight:600;width:34%;white-space:nowrap} .kv2 td b{color:var(--navy);white-space:nowrap} .kv2 td span{color:var(--text3);font-size:12px;margin-left:6px} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .stats div{background:var(--bg);border-radius:6px;padding:12px 14px;min-width:0} .stats div span{display:block;font-size:12px;color:var(--text2)} .stats div b{display:block;font-size:18px;color:var(--navy);margin-top:2px;white-space:nowrap} .stats div small{font-size:12px;color:var(--text3)} .fac{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 16px;font-size:13px;color:var(--text2)} .fac li{display:flex;align-items:center;gap:6px} .fac li .ic{color:var(--good);width:14px;height:14px;stroke-width:2.2} .desc{font-size:14px;color:var(--text2);line-height:1.7} .desc a{color:var(--link);font-weight:600} .kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;font-size:13px;margin-top:12px} .kv div{display:flex;justify-content:space-between;border-bottom:1px solid var(--border2);padding:7px 0;gap:10px} .kv span{color:var(--text2)}.kv b{color:var(--navy);font-weight:600;text-align:right} .rail{display:flex;flex-direction:column;gap:12px} .rbox{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:16px 18px} .rbox h2{font-size:15px;font-weight:700;margin-bottom:10px} .rbox .sc{display:flex;align-items:center;gap:12px;margin-bottom:12px} .rbox .sc .big{background:var(--score);color:#fff;font-size:24px;font-weight:800;border-radius:6px;padding:4px 10px;line-height:1.2} .rbox .sc .w{font-size:16px;font-weight:800;color:var(--navy)} .rbox .sc .c{font-size:12px;color:var(--text2)} .rbox .sc .all{margin-left:auto;color:var(--link);font-size:12px;font-weight:600;white-space:nowrap} .subs{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:12px} .subs div{display:flex;align-items:center;gap:8px;color:var(--text2)} .subs div b{margin-left:auto;color:var(--navy)} .subs .bar2{flex:1;height:4px;background:#E2E2DE;border-radius:2px;position:relative} .subs .bar2 i{position:absolute;left:0;top:0;height:4px;background:var(--score);border-radius:2px} .rbox .map{height:140px;border-radius:6px;margin-bottom:10px} .near{font-size:13px} .near li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border2);color:var(--text2);gap:10px} .near li b{color:var(--navy);font-weight:500} .near li span{color:var(--text3);white-space:nowrap} .cta{background:#fff;border:1px solid var(--primary);border-radius:var(--r);padding:16px 18px;box-shadow:0 4px 14px rgba(0,0,0,.15)} .cta .l1{font-size:12px;color:var(--text2)} .cta .p{font-size:28px;font-weight:800;color:var(--navy);letter-spacing:-.02em;display:flex;align-items:center;gap:8px;margin:2px 0 4px;white-space:nowrap} .cta .n{font-size:12px;color:var(--text2);margin-bottom:12px} .cta .btn{width:100%;height:44px;font-size:15px} .cta .fine{font-size:12px;color:var(--text3);margin-top:8px;text-align:center} .others li{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--border2);align-items:center} .others li:first-child{border-top:0;padding-top:0} .others img{width:64px;height:48px;object-fit:cover;border-radius:4px;flex:none} .others .nm{font-size:13px;font-weight:600;color:var(--navy);flex:1;min-width:0} .others .nm .meta{display:flex;align-items:center;gap:6px;margin-top:3px} .others .nm .score .box{font-size:12px;padding:1px 5px} .others .nm .dist{font-size:12px;color:var(--text3);font-weight:400} .others .pp{text-align:right;font-size:13px;font-weight:700;color:var(--navy);white-space:nowrap} .others .pp .tag{display:inline-flex;margin-top:3px;height:20px;font-size:12px;padding:0 5px} .mbar{display:none} /* ---------- responsive ---------- */ @media (max-width:1023px){ .cols{grid-template-columns:1fr} .side{display:none} .fchips{display:flex;gap:8px;overflow-x:auto;margin:0 0 10px;padding:2px 0 6px;scrollbar-width:none} .fchips::-webkit-scrollbar{display:none} .dcols{grid-template-columns:1fr} .cities{grid-template-columns:repeat(5,1fr)} .deals{grid-template-columns:repeat(2,1fr)} .recent{grid-template-columns:repeat(2,1fr)} .ft .cols4{grid-template-columns:repeat(2,1fr)} } @media (max-width:720px){ .m-only{display:block} .wrap{padding:0 16px} .hd .wrap{height:52px;gap:12px} .nav,.hd-r{display:none} .hd-m{display:flex;margin-left:auto;align-items:center;gap:14px;color:var(--navy)} .hd-m .ic{width:22px;height:22px} .hd-m > a,.mnav summary{display:flex;padding:9px;margin:-9px 0} .rhead .sort a{padding:8px 0} .crumb a{padding:6px 0} .pager a{min-width:40px;height:40px} .ft li a,.ft .legal a{display:inline-block;padding:6px 0} .verdict .lhs .cap .chip{height:34px} .dpick[open] .menu{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:60vh;z-index:60;border-radius:12px 12px 0 0;padding:10px 10px 16px;box-shadow:0 -8px 30px rgba(0,0,0,.2)} .dpick .menu a{padding:10px 8px} .box,.rbox{scroll-margin-top:56px} .mbar .p small.fine{display:block;font-size:12px;color:var(--text3);white-space:normal;line-height:1.35} .logo{font-size:21px} .logo small{display:none} .sband{padding:8px 0} .sband .sbar{height:46px} .sband .sbar .seg{padding:0 12px} .sband .sbar .seg.cond{padding:0 10px;gap:6px} .sband .sbar .seg.cond small{display:none} .sband .sbar .seg.cond select{font-size:13px} .sband .sbar .btn{height:36px;padding:0 14px} .wrap.page{padding:16px 16px 40px} .strip{gap:6px 10px;padding:9px 12px;font-size:12px;margin-bottom:10px} .strip .basis{order:3;width:100%} .strip .sp{margin-left:auto} .rhead h1{font-size:18px} .rhead{margin-bottom:10px} .rhead .sort{margin-left:0;width:100%;gap:14px;overflow-x:auto;scrollbar-width:none} .rhead .sort::-webkit-scrollbar{display:none} .fchips{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .fchips::-webkit-scrollbar{display:none} /* 모바일 목록 카드: 왼쪽 사진·오른쪽 정보, 아래 한 줄에 판정·가격·예약(한 화면에 3곳 이상) */ .hc{grid-template-columns:112px minmax(0,1fr);grid-template-areas:"ph bd" "pr pr";margin-bottom:10px} .hc .ph{grid-area:ph} .hc .ph img{aspect-ratio:auto;height:100%;min-height:128px} .hc .bd{grid-area:bd;padding:10px 12px 10px;gap:4px} .hc .ttl{gap:4px} .hc .ttl h2{font-size:15px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .hc .ttl .stars .ic,.hc .ttl .stars svg{width:11px;height:11px} .hc .en{display:none} .hc .meta{font-size:12px} .hc .loc{font-size:12px} .hc .rng{padding:0;background:none;margin-top:2px} .hc .rng .t{font-size:12px;margin-bottom:4px} .hc .rng .t span:last-child{display:none} .hc .rng .bar,.hc .rng .bar .f{height:4px} .hc .pr{grid-area:pr;border-left:0;border-top:1px solid var(--border2);display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"meta meta btn" "tags rv btn" "delta p btn" ". n btn";align-items:center;text-align:left;padding:8px 12px;gap:0 10px} .hc .pr .tags{grid-area:tags;margin-bottom:0} .hc .pr .delta{grid-area:delta;font-size:12px} .hc .pr .meta{grid-area:meta;margin:0 0 2px} .hc .pr .rv{grid-area:rv;justify-self:end;margin-bottom:0} .hc .pr .p{grid-area:p;font-size:19px;text-align:right} .hc .pr .p small{font-size:12px} .hc .pr .n{grid-area:n;font-size:12px;text-align:right;color:var(--text3)} .hc .pr .btn{grid-area:btn;width:auto;margin-top:0;padding:0 12px;height:38px;font-size:13px} .hc .pr .alt{display:none} .hero .wrap{padding-top:24px;padding-bottom:28px} .hero h1{font-size:22px;margin-bottom:14px} .panel{padding:8px} .panel .sbar{display:flex;flex-wrap:wrap;height:auto} .panel .sbar .seg{margin-right:0;margin-bottom:8px;height:48px;width:100%;flex:none} .panel .sbar .btn{height:48px;width:100%;margin:0} .panel .basis{gap:4px 12px} .panel .basis .link{margin-left:0} .ac{width:auto;right:0} .panel .ac{left:8px;right:8px;top:60px} .ac li .rt .tag{display:none} .ac .ft2{display:none} /* 모바일은 한 줄 가로 스크롤(다음 카드가 조금 보이게) */ .cities{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;margin:0 -16px;padding:0 16px} .cities::-webkit-scrollbar{display:none} .cities a{flex:0 0 calc((100% - 20px) / 3.4);scroll-snap-align:start} .cities b{font-size:14px} .deals{grid-template-columns:1fr 1fr;gap:10px} .recent{display:flex;overflow-x:auto;margin:0 -16px;padding:0 16px 6px;gap:10px;scrollbar-width:none} .recent::-webkit-scrollbar{display:none} .rc{flex:0 0 280px} .sec{margin-top:28px} .sec-h h2{font-size:19px} .sec-h .tabs{display:none} .crumb .r{display:none} .tabs-s{overflow-x:auto;border-radius:0;margin:0 -16px;border-left:0;border-right:0;height:46px;scrollbar-width:none} .tabs-s a{height:46px;padding:0 12px} .tabs-s .r{display:none} .box{padding:16px;border-radius:var(--r)} .box.title{grid-template-columns:1fr;padding:0;gap:0;overflow:hidden} .title .ph{aspect-ratio:2/1;border-radius:0} .title .tx{padding:16px} .box h2 small{width:100%;order:3;margin-top:-4px} .title h1{font-size:21px} .title h1 .en{font-size:13px;width:100%} .verdict{grid-template-columns:1fr;gap:14px} .verdict .lhs .p{font-size:32px} .stats{grid-template-columns:1fr;gap:6px} .stats div{padding:10px 12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .stats div span{flex:0 0 70px} .stats div b{font-size:16px;margin-top:0} .fac{grid-template-columns:1fr 1fr} .kv{grid-template-columns:1fr} .rail .cta{display:none} .rbox .map{height:120px} .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--border);padding:10px 16px;gap:12px;align-items:center;z-index:40;box-shadow:0 -4px 14px rgba(0,0,0,.1)} .mbar .p{display:flex;flex-direction:column;gap:1px;min-width:0} .mbar .p .row{display:flex;align-items:center;gap:8px} .mbar .p b{font-size:20px;font-weight:800;color:var(--navy);white-space:nowrap} .mbar .p small{font-size:12px;font-weight:500;color:var(--text2);white-space:nowrap} .mbar .btn{margin-left:auto;height:44px;padding:0 18px} body.has-mbar{padding-bottom:108px} .ft .cols4{grid-template-columns:1fr 1fr;gap:16px} } .ph-empty{width:100%;height:100%;min-height:180px;background:#ECECE8} .hc .ttl h2 a{color:inherit} .ac li a{display:flex;align-items:center;gap:12px;width:100%;color:inherit} .ac[hidden]{display:none} /* ---------- hotel detail ---------- */ .others .nm a{color:inherit} .others .ph-empty{width:64px;height:48px;min-height:0;flex:none;border-radius:4px} .qa{margin-bottom:14px}.qa:last-child{margin-bottom:0} .qa h3{font-size:15px;font-weight:700;margin-bottom:4px;color:var(--navy)} .verdict .lhs .txt.mid b{color:var(--navy)}.verdict .lhs .txt.bad b{color:var(--bad)} .dpick{position:relative} .dpick summary{list-style:none;cursor:pointer} .dpick summary::-webkit-details-marker{display:none} .dpick .menu{position:absolute;left:0;top:calc(100% + 4px);z-index:25;background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:0 6px 20px rgba(0,0,0,.12);padding:6px;width:260px;max-height:340px;overflow-y:auto} .dpick .menu a{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;font-size:13px;color:var(--text)} .dpick .menu a:hover,.dpick .menu a.on{background:var(--bg)} .dpick .menu a.on{font-weight:700} .dpick .menu a b{margin-left:auto;font-weight:600} .dpick .menu .tag{height:20px;font-size:12px;padding:0 6px} .map .tiles{position:absolute;width:512px;height:512px;display:grid;grid-template-columns:256px 256px;left:clamp(calc(100% - 512px),calc(50% - var(--mx)),0px);top:calc(50% - var(--my))} .map .tiles img{width:256px;height:256px;max-width:none} .map .tiles .pin{left:var(--mx);top:var(--my)} /* 타일 묶음이 512px라 지도 상자를 그보다 넓히지 않는다(1단 배치인 1024px 이하에서 빈 회색 여백 방지) */ .rbox .map{max-width:512px;margin-left:auto;margin-right:auto} .chart a:hover rect{opacity:.85} .box.desc h1{font-size:24px;margin-bottom:12px;color:var(--navy)} .box.desc h2{font-size:17px;margin:18px 0 6px;display:block} .box.desc p{margin-bottom:10px} .box.desc ul{margin:0 0 10px 20px;list-style:disc} /* ---------- search panel, menu, filters (2026-10-01 audit) ---------- */ .skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;color:#111;padding:8px 12px;border:2px solid #111;border-radius:6px;font-weight:700} .skip:focus{left:12px} .sbar .seg.cond{flex:0 0 auto;gap:10px;cursor:pointer} .sbar .seg.cond span{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0} .sbar .seg.cond small{font-size:12px;color:var(--text3);font-weight:600} .sbar .seg.cond select{width:100%;border:0;outline:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--navy);padding:0;margin-left:-2px;cursor:pointer} .acbox{position:relative} .acbox .ac{top:calc(100% + 6px);left:0} .acbox.open .ac{display:block} .mnav{position:relative} .mnav summary{list-style:none;cursor:pointer;display:flex} .mnav summary::-webkit-details-marker{display:none} .mnav-p{position:absolute;right:-16px;top:calc(100% + 13px);width:min(320px,100vw);max-height:calc(100vh - 52px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1px solid var(--border);border-top:0;box-shadow:0 12px 30px rgba(0,0,0,.15);padding:6px 0 10px;z-index:50} .mnav-p > a{display:block;padding:12px 20px;font-size:15px;font-weight:600;color:var(--navy)} .mnav-p p{padding:12px 20px 4px;font-size:12px;font-weight:600;color:var(--text3);border-top:1px solid var(--border2);margin-top:4px} .mnav-r > b{display:block;padding:10px 20px 0;font-size:12px;font-weight:700;color:var(--navy)} .mnav-c{display:grid;grid-template-columns:repeat(3,1fr);padding:0 10px} .mnav-c a{padding:10px;font-size:14px;color:var(--text)} .mfilt{display:none} .rhead .sum a.tag{text-decoration:none} .rhead .sum a.tag.on{outline:2px solid currentColor;outline-offset:1px} .hc .ph{display:block} .hc .pr .so{font-size:20px;color:var(--text2)} .box,.rbox{scroll-margin-top:64px} @media (max-width:1023px){ .mfilt{display:block;margin-bottom:8px} .mfilt summary{list-style:none;cursor:pointer;width:max-content} .mfilt summary::-webkit-details-marker{display:none} .mfilt[open] summary{border-color:var(--primary);color:var(--primary)} .mfilt > .card{margin-top:8px} } .notice{background:#FFF8E6;border:1px solid #F3D38A;color:#6B4E00;border-radius:6px;padding:10px 12px;font-size:13px;margin-bottom:14px} .sec-h h2 small{font-size:13px;font-weight:500;color:var(--text3);margin-left:8px;letter-spacing:0} /* ---------- home: deals (2026-10-01 redesign) ---------- */ .dtabs{display:flex;gap:8px;margin:-2px 0 14px;overflow-x:auto;scrollbar-width:none} .dtabs::-webkit-scrollbar{display:none} .dtabs button{flex:none;height:36px;padding:0 14px;border:1px solid var(--border);border-radius:18px;background:#fff;font:inherit;font-size:14px;font-weight:600;color:var(--text2);cursor:pointer} .dtabs button[aria-selected="true"]{background:var(--primary);border-color:var(--primary);color:#fff} .dc{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s} .dc:hover{box-shadow:0 8px 24px rgba(0,0,0,.10);transform:translateY(-2px)} .dc .im{position:relative;aspect-ratio:4/3;overflow:hidden;background:#ECECE8} .dc .im img{width:100%;height:100%;object-fit:cover;display:block} .dc .disc{position:absolute;left:10px;top:10px;background:var(--good);color:#fff;font-size:13px;font-weight:800;padding:3px 8px;border-radius:4px} .dc .bd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1} .dc .cityl{font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dc h3{font-size:15px;font-weight:700;color:var(--navy);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .dc .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:20px} .dc .bt{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;align-items:flex-end;gap:1px} .dc .p{font-size:20px;font-weight:800;color:var(--navy);white-space:nowrap} /* 리뷰 수: 가격 바로 위, 오른쪽 정렬(평점은 성급 줄에 둔다) */ .dc .rv,.hc .pr .rv{font-size:12px;color:var(--text2);white-space:nowrap} .dc .n{font-size:12px;color:var(--text3);text-align:right} .rowlink{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--navy)} .rowlink .ic{width:14px;height:14px;color:var(--text3)} @media (max-width:720px){ .deals{grid-template-columns:1fr 1fr;gap:10px} .dc .bd{padding:10px 10px 12px} .dc h3{font-size:14px} .dc .p{font-size:17px} .dc .n{font-size:12px} } /* ---------- hotel: polish (2026-10-01 redesign) ---------- */ .tabs-s .r{opacity:0;visibility:hidden;transition:opacity .15s} .tabs-s.stuck .r{opacity:1;visibility:visible} .verdict .rhs .l span{display:flex;flex-direction:column;line-height:1.35} .verdict .rhs .l span:nth-child(2){align-items:flex-end} .verdict .rhs .l small{font-size:12px;color:var(--text3)} #year .kv2{margin-top:14px} @media (max-width:1023px){.rhead .sum{display:none}} .places{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px} .places .chip{height:auto;padding:8px 14px;border-radius:10px;flex-direction:column;align-items:flex-start;gap:0} .places .chip b{font-size:14px;color:var(--navy)} .places .chip span{font-size:12px;font-weight:500;color:var(--text3)} .empty{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:22px} .empty .places{margin:14px 0 0} /* ---------- hotel: kpis, summary, 14-day calendar (2026-10-01) ---------- */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:14px} .kpis div{background:var(--bg);border-radius:8px;padding:10px 12px} .kpis dt{font-size:12px;color:var(--text3)} .kpis dd{font-size:16px;font-weight:800;color:var(--navy);margin-top:2px} .more-box{margin-top:14px;padding-top:12px;border-top:1px solid var(--border2)} .desc.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .desc.clamp.open{display:block} .more-btn{margin-top:6px;background:none;border:0;padding:6px 0;font:inherit;font-size:13px;font-weight:700;color:var(--navy);cursor:pointer} .wrap.page > .box.desc{max-width:860px;margin-left:auto;margin-right:auto} @media (max-width:720px){ .kpis{grid-template-columns:1fr 1fr} } /* ---------- methodology / guide (2026-10-01) ---------- */ .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 18px} .facts div{background:var(--bg);border-radius:8px;padding:12px 14px} .facts dt{font-size:12px;color:var(--text3);font-weight:600} .facts dd{font-size:14px;font-weight:700;color:var(--navy);margin-top:4px;line-height:1.45} .vband{margin:14px 0 16px;padding:18px 18px 14px;border:1px solid var(--border);border-radius:10px} .vband .bar{display:grid;grid-template-columns:1fr 1fr 1fr;height:34px;border-radius:6px;overflow:hidden;font-size:13px;font-weight:700} .vband .bar span{display:flex;align-items:center;justify-content:center} .vband .bar .g{background:#E3F3EA;color:var(--good)} .vband .bar .m{background:#EEEEEA;color:var(--text2)} .vband .bar .b{background:#FBE7E9;color:var(--bad)} .vband .ticks{position:relative;height:22px;margin-top:6px;font-size:12px;color:var(--text3)} .vband .ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap} .vband .ticks span::before{content:"";position:absolute;left:50%;top:-8px;width:1px;height:6px;background:var(--text3)} .vband figcaption{font-size:13px;color:var(--text2);margin-top:6px} .glist{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px} .glist a{display:block;border:1px solid var(--border);border-radius:10px;padding:16px 18px;background:#fff;transition:box-shadow .15s} .glist a:hover{box-shadow:0 6px 18px rgba(0,0,0,.08)} .glist b{display:block;font-size:16px;color:var(--navy);line-height:1.4} .glist p{font-size:13px;color:var(--text2);margin:6px 0 8px} .glist small{font-size:12px;color:var(--text3)} @media (max-width:720px){ .facts,.glist{grid-template-columns:1fr} .vband .ticks{font-size:12px} } /* ---------- theme B: charcoal mono + amber, numeric display font ---------- */ .sband{background:#EFEFEB} .logo .dot{background:var(--accent)} .nav a.on{color:#111}.nav a.on::after{background:var(--accent)} .desc a.link,.cap a.link,.notice a.link,.txt a.link,.qa a{text-decoration:underline;text-underline-offset:2px} .bar .me,.verdict .rhs .bar .me{border-color:var(--accent)} .strip{border-color:#E2E2DE} .score .box{background:#111} .cta{border-color:#111;box-shadow:0 4px 14px rgba(0,0,0,.08)} .chip.on{border-color:#111;color:#111;background:#F1F1EE} .num,.hc .pr .p,.dc .p,.verdict .lhs .p,.cta .p,.tabs-s .r .p,.mbar .p b,.stats div b,.kv2 td b,.rng .t b,.rc .pr b,.others .pp,.score .box,.rbox .sc .big,.subs div b,.hc .pr .delta,.dc .d{font-family:var(--font-num);font-feature-settings:"tnum" 1} .chart text{font-family:var(--font-num)} .hc .pr .p,.verdict .lhs .p,.cta .p,.dc .p,.mbar .p b{letter-spacing:-.01em} /* ---------- round 2 audit (2026-10-01) ---------- */ body{min-height:100vh;display:flex;flex-direction:column} #content{flex:1} /* 키보드 포커스: 어디서나 보이게(마우스 클릭에는 나타나지 않는다) */ :focus-visible{outline:2px solid var(--accent);outline-offset:2px} .btn:focus-visible{box-shadow:0 0 0 4px #fff} .sbar .seg.dest:focus-within,.sbar .seg.cond:focus-within{border-color:#111;box-shadow:0 0 0 2px var(--primary-bg)} /* 마우스오버: 눌리는 것은 반응하고, 안 눌리는 것은 반응하지 않는다 */ .nav a:hover,.hd-r a:hover,.rhead .sort a:hover,.crumb a:hover,.ft a:hover,.tabs-s > a:hover,.hc .pr .alt:hover,.sec-h .all:hover,.rowlink:hover{color:#000} .chip:hover,.pager a:hover,.dtabs button:hover,.places .chip:hover{border-color:#111} .dtabs button[aria-selected="true"]:hover{border-color:var(--primary)} /* 목록 카드·주변 호텔: 카드(행) 전체가 상세로 가는 링크, 예약 버튼만 그 위에 */ .hc{position:relative} .hc .ttl h2 a::after{content:"";position:absolute;inset:0;z-index:1} .hc .ph,.hc .pr .btn,.hc .pr .alt{position:relative;z-index:2} .others li{position:relative} .others .nm a::after{content:"";position:absolute;inset:0} .others li:hover .nm a{text-decoration:underline} /* 0곳 판정 태그는 누를 수 없게 */ .tag.off{opacity:.45;cursor:default} .rhead .sum .tag:not(.off):hover{filter:brightness(.96)} /* 필터: 행 전체가 눌리고, 고른 항목은 배경으로 구분 */ .fgroup li{gap:0} .fgroup li > a{display:flex;align-items:center;gap:8px;flex:1;padding:7px 8px;margin:0 -8px;border-radius:6px;color:var(--text2)} .fgroup li > a:hover{background:var(--bg)} .fgroup li > a.on{background:var(--primary-bg);color:var(--navy);font-weight:700} .fgroup li > a.on::after{content:"✓";margin-left:6px;font-weight:800} .fgroup li .cnt{margin-left:auto} .fgroup .stars svg{width:14px;height:14px} .fpanel .sheet-h,.dpick .menu .sheet-h{display:none} .ftool{display:none} /* 모바일 메뉴: 딤 배경, 열면 X 아이콘, 지금 페이지 표시 */ .mnav .ix{display:none} .mnav[open] .io{display:none} .mnav[open] .ix{display:inline-flex} .mnav[open]::before{content:"";position:fixed;left:0;right:0;top:52px;bottom:0;background:rgba(0,0,0,.4);z-index:40} .mnav-p{z-index:50} .mnav-p > a[aria-current="page"]{color:var(--accent-text)} html.lock{overflow:hidden} html:has(.mnav[open]) .mbar{display:none} /* 가이드·문의·404 */ .box.desc h2{color:var(--navy)} .box.desc .glist a{font-weight:400;text-decoration:none} .box.desc .glist b{font-weight:700} .box.desc .glist p{margin:6px 0 8px;color:var(--text2)} .rel{margin-top:28px;padding-top:18px;border-top:1px solid var(--border2)} .rel .fh{font-weight:700;color:var(--navy);margin-bottom:10px} .back{margin-top:18px;font-size:14px} .crumb.doc{max-width:860px;margin:0 auto} .ctypes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px} .box.desc .ctypes a{display:block;border:1px solid var(--border);border-radius:10px;padding:14px 16px;text-decoration:none;font-weight:400} .ctypes a:hover{border-color:#111} .ctypes b{display:block;color:var(--navy);font-size:15px;margin-bottom:4px} .ctypes span{font-size:13px;color:var(--text2)} .errp h1{font-size:24px;font-weight:800;color:var(--navy);margin-bottom:6px} .errp .acbox{margin-top:16px;max-width:760px} /* 홈 딜 카드 */ .dc .disc{display:inline-flex;align-items:baseline;gap:4px} .dc .disc small{font-size:12px;font-weight:600;opacity:.9} .dc .n{white-space:nowrap} /* 호텔: 달별 요금 목록(모바일), 이상치 안내, 첫 화면 가격 줄 */ .mlist,.mprice{display:none} .outl{margin-top:8px} .dpick .menu .tg{min-width:52px;display:flex;justify-content:flex-end} .verdict .rhs .rng .t b{color:var(--navy)} @media (max-width:1023px){ .ftool{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:25;background:var(--bg);margin:0 0 10px;padding:8px 0} .ftool .fchips{flex:1;min-width:0;margin:0;padding:0} .ftool .mfilt{margin:0;flex:none} .mfilt summary .n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:9px;background:var(--primary);color:#fff;font-size:12px;margin-left:4px} .mfilt[open]::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55} .mfilt[open] > .fpanel{position:fixed;left:0;right:0;bottom:0;max-height:78vh;overflow:auto;z-index:60;margin:0;border-radius:14px 14px 0 0;padding:6px 16px 20px} .fpanel .sheet-h{display:flex;align-items:center;justify-content:space-between;padding:8px 0 4px;position:sticky;top:-6px;background:#fff;z-index:1} .fpanel .btn.ghost{width:100%;margin-top:12px} .sheet-h .x{width:40px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:-10px} .sheet-h .x .ic{width:20px;height:20px} } @media (max-width:720px){ .hc .pr .delta{white-space:normal;line-height:1.25} .hc .pr .delta .vs{display:none} .rhead .sort{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)} .vband .lg{display:none} .ctypes{grid-template-columns:1fr} .fcity{display:none} .crumb{flex-wrap:nowrap;white-space:nowrap;overflow:hidden} .crumb > span:last-child{overflow:hidden;text-overflow:ellipsis;min-width:0} .title .ph{aspect-ratio:16/9;max-height:200px} .title .badges{display:none} .mprice{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:12px;padding:10px 12px;background:var(--bg);border-radius:8px} .mprice .d{width:100%;font-size:12px;color:var(--text3)} .mprice b{font-size:22px;font-weight:800;color:var(--navy)} .mprice .dl{font-size:13px;font-weight:700} .mprice .dl.good{color:var(--good)}.mprice .dl.bad{color:var(--bad)}.mprice .dl.mid{color:var(--text2)} .mlist{display:grid;gap:6px;margin-top:14px} .mlist li{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:8px;font-size:13px} .mlist .m{color:var(--text2)} .mlist .b{height:8px;background:var(--bg);border-radius:4px;overflow:hidden} .mlist .b i{display:block;height:100%;background:var(--primary-l)} .mlist li.lo .b i{background:var(--good)} .mlist li.hi .b i{background:var(--bad)} .mlist b{font-size:13px;color:var(--navy)} .dpick[open]::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55} .dpick .menu .sheet-h{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 8px;position:sticky;top:-10px;background:#fff;z-index:1} .dpick .menu a{min-height:44px} .more-btn{padding:10px 0} .title .addr a{padding:6px 0} } .ac{right:12px;width:auto} .ac li .nm mark{background:none;color:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px} .pager a{padding:0 10px} @media (hover:none){.fgroup li > a:not(.on):hover{background:none}.chip:not(.on):hover,.pager a:not(.on):hover,.dtabs button[aria-selected="false"]:hover,.places .chip:hover{border-color:var(--border)}.dc:hover,.hc:hover{box-shadow:none;transform:none}} .nw{white-space:nowrap} /* 도시가 많을 때: 판정 표의 권역 행, 데스크톱 탭 줄바꿈, 푸터 도시 2열 */ @media (min-width:721px){.dtabs{flex-wrap:wrap}} .fcity ul{display:grid;grid-template-columns:1fr 1fr;column-gap:12px} /* 지금 싼 호텔 권역 탭: 권역 안 도시로 가는 줄 */ .dcity{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 14px;font-size:13px} .dcity span{color:var(--text3);font-weight:600} .dcity a{color:var(--text);font-weight:600} .dcity a b{color:var(--good);margin-left:2px} .dcity a:hover{text-decoration:underline} .dempty{padding:28px 0;text-align:center} /* 권역 탭 5개가 모바일 한 줄에 들어가게 */ @media (max-width:720px){.dtabs{gap:6px}.dtabs button{flex:1 1 auto;padding:0 8px;font-size:13px}} .dc .bt .meta{align-self:stretch;margin-bottom:2px} .dc .bt .meta .score{margin-left:auto} .hc .pr .meta{align-self:stretch;margin-top:6px} .hc .pr .meta .score{margin-left:auto} /* ---------- hotel charts on phones (2026-10-02): 340px 좌표계로 그린 차트를 상자 가장자리까지 넓혀 글자가 1:1로 보이게 한다 ---------- */ @media (max-width:560px){ .chart-wrap{margin:0 -16px} .chart.d,.legend.d{display:none} .chart.m{display:block} .legend.m{display:flex} } /* ---------- check-in calendar (2026-10-02): 검색창의 체크인