.ch-title {
font-size: clamp(36px, 7vw, 72px) !important;
letter-spacing: -.03em !important;
line-height: 1 !important;
text-shadow: 0 2px 28px rgba(0,0,0,.55) !important;
} .sw-card:hover .sw-ic--guide  { transform: rotate(-10deg) scale(1.1); }
.sw-card:hover .sw-ic--food   { transform: translateY(-2px); }
.sw-card:hover .sw-ic--route  { transform: translateX(3px); } .cl-subnav {
background: #fff;
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 50;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.cl-subnav-inner {
display: flex;
align-items: center;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.cl-subnav-inner::-webkit-scrollbar { display: none; }
.cl-subnav-link {
display: block;
padding: 16px 20px;
font-size: 14px;
font-weight: 600;
color: var(--color-text-muted);
text-decoration: none;
white-space: nowrap;
border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s;
}
.cl-subnav-link:hover {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
} .cl-body {
padding-top: 56px;
padding-bottom: 80px;
}
.cl-section {
margin-bottom: 64px;
scroll-margin-top: 56px;
}
.cl-section-title {
font-size: 26px;
font-weight: 700;
color: var(--color-text-main);
margin: 0 0 28px;
line-height: 1.2;
} .cl-areas-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.cl-area-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 20px 20px 16px;
background: var(--color-bg-soft);
transition: box-shadow .2s, border-color .2s;
}
.cl-area-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,.08);
border-color: #c7d2e4;
}
.cl-area-name {
font-size: 16px;
font-weight: 600;
color: var(--color-text-main);
margin-bottom: 8px;
}
.cl-area-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.cl-area-count {
font-size: 13px;
color: var(--color-text-muted);
}
.cl-area-persona {
font-size: 11px;
font-weight: 600;
background: var(--color-badge-blue-bg);
color: var(--color-badge-blue-text);
border-radius: var(--radius-pill);
padding: 2px 10px;
text-transform: uppercase;
letter-spacing: .04em;
} .cl-chart {
display: flex;
align-items: flex-end;
gap: 4px;
height: 140px;
padding-bottom: 48px;
position: relative;
}
.cl-chart-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
position: relative;
}
.cl-chart-bar-wrap {
flex: 1;
width: 100%;
display: flex;
align-items: flex-end;
}
.cl-chart-bar {
width: 100%;
background: #93c5fd;
border-radius: 4px 4px 0 0;
display: flex;
align-items: flex-start;
justify-content: center;
transition: height .3s ease;
position: relative;
min-height: 14px;
}
.cl-chart-col.cl-best .cl-chart-bar {
background: var(--color-primary);
}
.cl-chart-temp {
font-size: 10px;
font-weight: 700;
color: #fff;
padding-top: 3px;
line-height: 1;
white-space: nowrap;
}
.cl-chart-crowd {
width: 100%;
height: 5px;
border-radius: 2px;
}
.cl-chart-crowd.crowd-low  { background: #86efac; }
.cl-chart-crowd.crowd-mid  { background: #fbbf24; }
.cl-chart-crowd.crowd-high { background: #f87171; }
.cl-chart-month {
font-size: 10px;
color: var(--color-text-muted);
font-weight: 500;
margin-top: 4px;
}
.cl-best-star {
font-size: 11px;
color: var(--color-rating-star);
line-height: 1;
}
.cl-best-label {
font-size: 14px;
color: var(--color-text-muted);
margin-top: 16px;
}
.cl-best-label strong { color: var(--color-text-main); }
.cl-chart-legend {
font-size: 12px;
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: 4px;
margin-top: 8px;
flex-wrap: wrap;
}
.cl-legend-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.cl-legend-dot.crowd-low  { background: #86efac; }
.cl-legend-dot.crowd-mid  { background: #fbbf24; }
.cl-legend-dot.crowd-high { background: #f87171; } .cl-foods-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.cl-food-card {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
background: #fff;
transition: box-shadow .2s;
}
.cl-food-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.cl-food-img { aspect-ratio: 4/3; overflow: hidden; }
.cl-food-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-food-info { padding: 12px 14px 14px; }
.cl-food-name {
font-size: 14px;
font-weight: 700;
color: var(--color-text-main);
margin-bottom: 4px;
}
.cl-food-desc {
font-size: 12px;
line-height: 1.6;
color: var(--color-text-muted);
} .cl-persona-nav {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 24px;
padding: 16px 20px;
background: var(--color-bg-soft);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
}
.cl-persona-nav-label {
font-size: 13px;
font-weight: 600;
color: var(--color-text-muted);
white-space: nowrap;
}
.cl-persona-nav-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cl-chip {
display: inline-block;
padding: 5px 14px;
border-radius: var(--radius-pill);
font-size: 13px;
font-weight: 600;
border: 1.5px solid var(--color-border);
background: #fff;
color: var(--color-text-muted);
text-decoration: none;
transition: background .15s, color .15s, border-color .15s;
}
.cl-chip:hover {
border-color: var(--color-primary);
color: var(--color-primary);
background: #fff;
}
.cl-empty {
font-size: 16px;
color: var(--color-text-muted);
padding: 24px 0;
} @media (max-width: 900px) {
.cl-guides-grid { grid-template-columns: repeat(2, 1fr); }
.cl-areas-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.cl-hero        { min-height: 320px; }
.cl-city-name   { font-size: 36px; }
.cl-guides-grid { grid-template-columns: 1fr; }
.cl-foods-grid  { grid-template-columns: repeat(2, 1fr); }
.cl-guides-head { flex-direction: column; }
.cl-chart-temp  { display: none; }
}