/*  새 디자인의 첫 화면 (Controls/V2/V2Home). 색과 폭은 V2.css 의 변수를 쓴다. */

.v2-home { font-family: var(--v2-font); color: var(--v2-text); background: #fff; }
.v2-home a { color: inherit; text-decoration: none; }
.v2-home img { max-width: 100%; display: block; }

/* ---------- 큰 그림 ---------- */
/* 사진은 임시다 - 백오피스에서 화면마다 고를 수 있게 되면 그 사진이 선다. */
/* 내용과 같은 폭(1320 - 양옆 16)에 선다. 화면 끝까지 가지 않는다. */
.v2-hero { position: relative; overflow: hidden; width: calc(100% - 32px); max-width: 1288px; margin: 16px auto 0; border-radius: 16px;
    background: linear-gradient(110deg, #f7f1ff 0%, #fdf2f7 45%, #e9f1ff 100%); }
.v2-hero-in { position: relative; display: flex; align-items: center; min-height: 300px; padding: 0 40px; }

/* 머리 글 뒤의 토론토 윤곽 (CN 타워, 로저스 센터 지붕, 도심 빌딩). 옅게 깔아 글을 가리지 않고,
   오른쪽의 앱 카드 아래로 들어간다. 그림은 글자로 적었다 - 파일을 하나 더 두지 않으려고. */
.v2-hero::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 80%; z-index: 0; pointer-events: none; opacity: .11;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20800%20300'%3E%3Cg%20fill='%236b3fe0'%3E%3Crect%20x='0'%20y='252'%20width='30'%20height='48'/%3E%3Crect%20x='34'%20y='226'%20width='26'%20height='74'/%3E%3Crect%20x='64'%20y='242'%20width='22'%20height='58'/%3E%3Crect%20x='90'%20y='206'%20width='30'%20height='94'/%3E%3Cpath%20d='M128%20300V268Q194%20220%20260%20268V300Z'/%3E%3Cpath%20d='M290%20300L297%20128H303L310%20300Z'/%3E%3Crect%20x='284'%20y='112'%20width='32'%20height='17'%20rx='7'/%3E%3Crect%20x='297'%20y='62'%20width='6'%20height='52'/%3E%3Crect%20x='293.5'%20y='55'%20width='13'%20height='9'%20rx='3'/%3E%3Crect%20x='299.2'%20y='2'%20width='1.6'%20height='55'/%3E%3Crect%20x='326'%20y='192'%20width='34'%20height='108'/%3E%3Crect%20x='364'%20y='160'%20width='28'%20height='140'/%3E%3Crect%20x='396'%20y='126'%20width='38'%20height='174'/%3E%3Crect%20x='438'%20y='176'%20width='30'%20height='124'/%3E%3Crect%20x='472'%20y='146'%20width='26'%20height='154'/%3E%3Cpath%20d='M502%20300V172l14-13%2014%2013V300Z'/%3E%3Crect%20x='534'%20y='200'%20width='30'%20height='100'/%3E%3Crect%20x='568'%20y='164'%20width='24'%20height='136'/%3E%3Crect%20x='596'%20y='214'%20width='34'%20height='86'/%3E%3Crect%20x='634'%20y='184'%20width='26'%20height='116'/%3E%3Crect%20x='664'%20y='230'%20width='40'%20height='70'/%3E%3Crect%20x='708'%20y='204'%20width='28'%20height='96'/%3E%3Crect%20x='740'%20y='246'%20width='60'%20height='54'/%3E%3C/g%3E%3C/svg%3E") left 24px bottom / auto 100% no-repeat; }
.v2-hero-in { z-index: 1; }
.v2-hero-copy { position: relative; z-index: 2; max-width: 620px; padding: 40px 0; }
.v2-hero-kicker { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--v2-primary); letter-spacing: .5px; }
.v2-hero-title { margin: 0; font-size: 40px; line-height: 1.25; font-weight: 900; color: var(--v2-navy); letter-spacing: -1px; }
.v2-hero-title em { font-style: normal; color: var(--v2-pink); }
.v2-hero-sub { margin: 14px 0 22px; font-size: 16px; line-height: 1.6; color: #4b5162; }
.v2-search { display: flex; width: 560px; max-width: 100%; background: #fff; border: 2px solid var(--v2-primary); border-radius: 30px; overflow: hidden; box-shadow: 0 8px 24px rgba(107, 63, 224, .14); }
.v2-search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 13px 20px; font-size: 15px; font-family: inherit; background: transparent; }
.v2-search button { border: 0; background: var(--v2-primary); color: #fff; font-weight: 700; font-size: 15px; padding: 0 28px; cursor: pointer; font-family: inherit; }
.v2-search button:hover { background: #5a30c8; }
.v2-hero-art { position: absolute; right: -40px; top: 0; bottom: 0; width: 56%; z-index: 1;
    background:
        radial-gradient(circle at 70% 30%, rgba(230, 0, 92, .18) 0, transparent 34%),
        radial-gradient(circle at 40% 70%, rgba(107, 63, 224, .20) 0, transparent 40%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' preserveAspectRatio='xMidYMax meet'%3E%3Cpath fill='%236b3fe0' fill-opacity='.22' d='M0 300V230h40v-40h30v50h25v-90h45v90h20v-60h40v60h25V140h14v-20h8V20h5v-40h4v40h5v100h8v20h14v140h25v-70h50v70h20v-110h55v110h25v-40h45v40h30v-80h40v80h25v-45h45v115z'/%3E%3C/svg%3E") right bottom / contain no-repeat; }

/* ---------- 바로가기 ---------- */
.v2-shortcuts { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px; margin: 22px 0 26px; }
.v2-shortcut { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px 14px; border: 1px solid var(--v2-line); border-radius: var(--v2-radius); background: #fff; font-size: 14px; font-weight: 700; transition: border-color .15s, box-shadow .15s, transform .15s; }
.v2-shortcut:hover { border-color: var(--v2-primary); box-shadow: 0 6px 16px rgba(107, 63, 224, .12); transform: translateY(-2px); }
.v2-shortcut-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--v2-primary-soft); color: var(--v2-primary); display: flex; align-items: center; justify-content: center; }
.v2-shortcut-icon svg { width: 24px; height: 24px; }
/* 바로가기마다 제 색. 둥근 바탕은 옅게, 그림은 짙게, 올리면 테두리도 그 색. */
.v2-shortcut.is-jobs { --c: #1e6fd9; --bg: #e6f0fd; }
.v2-shortcut.is-rent { --c: #16a34a; --bg: #e3f6ea; }
.v2-shortcut.is-market { --c: #ea7a0c; --bg: #fff0df; }
.v2-shortcut.is-community { --c: #7c3aed; --bg: #efe8fd; }
.v2-shortcut.is-directory { --c: #0d9488; --bg: #def5f2; }
.v2-shortcut.is-event { --c: #4f46e5; --bg: #e8e8fd; }
.v2-shortcut.is-news { --c: #dc2626; --bg: #fdeaea; }
.v2-shortcut.is-blog { --c: #ca8a04; --bg: #fdf3d6; }
.v2-shortcut.is-shop { --c: #c026d3; --bg: #fae6fb; }
/* AhaCard: the card's own purple, filled - the one new thing in the row */
.v2-shortcut.is-ahacard { --c: #fff; --bg: linear-gradient(135deg, #4c2bd0, #a24be0); }
.v2-shortcut.is-ahacard:hover { border-color: #6b3fe0; }
/* its NEW: a ribbon across the box's corner; on phones (no box) a tilted tag over the icon */
.v2-shortcut.is-ahacard { position: relative; overflow: hidden; }
.v2-shortcut.is-ahacard::after { content: 'NEW'; position: absolute; top: 9px; right: -26px; width: 84px; padding: 3px 0; transform: rotate(45deg);
    background: var(--v2-pink); color: #fff; font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .5px; text-align: center; box-shadow: 0 2px 6px rgba(230, 0, 92, .35); }
@media (max-width: 760px) {
    .v2-shortcut.is-ahacard { overflow: visible; }
    .v2-shortcut.is-ahacard::after { top: -4px; right: 50%; width: auto; margin-right: -32px; padding: 2px 5px; border-radius: 6px; font-size: 9px; transform: rotate(20deg); }
}
.v2-shortcut[class*="is-"] .v2-shortcut-icon { background: var(--bg); color: var(--c); }
.v2-shortcut[class*="is-"]:hover { border-color: var(--c); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }

/* ---------- 두 칸 ---------- */
.v2-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.v2-main, .v2-side { min-width: 0; }
.v2-side { overflow: hidden; }
.v2-main > * + * { margin-top: 28px; }
.v2-side > * + * { margin-top: 20px; }

.v2-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.v2-sec-title { margin: 0; font-size: 19px; font-weight: 900; color: var(--v2-navy); padding-left: 12px; border-left: 4px solid var(--v2-primary); line-height: 1.2; }
.v2-more { font-size: 13px; color: var(--v2-muted) !important; }
.v2-more:hover { color: var(--v2-primary) !important; }

.v2-banner a { display: block; border-radius: var(--v2-radius); overflow: hidden; }
.v2-banner img { width: 100%; height: auto; }

/* ---------- 카드 ---------- */
.v2-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.v2-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 14px; }
.v2-card { display: flex; flex-direction: column; gap: 6px; }
.v2-card-img { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--v2-bg); }
.v2-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.v2-card:hover .v2-card-img img { transform: scale(1.04); }
.v2-card-title { font-size: 15px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-card:hover .v2-card-title { color: var(--v2-primary); }
.v2-card-meta { font-size: 12px; color: var(--v2-muted); }
.v2-tag { position: absolute; top: 8px; left: 8px; background: var(--v2-primary); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 12px; }
.v2-play { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }

/* ---------- 쇼핑: 다섯 칸, 칸마다 왼쪽에 사진 ---------- */
.v2-shop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.v2-shop-item { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--v2-line); border-radius: var(--v2-radius); background: #fff; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.v2-shop-item:hover { border-color: var(--v2-primary); box-shadow: 0 6px 16px rgba(107, 63, 224, .10); }
.v2-shop-img { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--v2-bg); }
.v2-shop-img img { width: 100%; height: 100%; object-fit: cover; }
.v2-shop-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v2-shop-name { font-size: 13px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-shop-item:hover .v2-shop-name { color: var(--v2-primary); }
.v2-shop-price { font-size: 14px; font-weight: 900; color: var(--v2-pink); white-space: nowrap; }
.v2-shop-price s { font-size: 11.5px; font-weight: 400; color: #9aa0ad; margin-left: 6px; }
.v2-shop-tag { align-self: flex-start; font-size: 10.5px; font-weight: 700; color: var(--v2-pink); background: #fde8ef; border-radius: 10px; padding: 1px 8px; }
.v2-shop-tag.is-out { color: #6b7280; background: #eef0f5; }

/* ---------- 실시간 게시글 ---------- */
/* minmax(0, 1fr): 한 줄로 자른 긴 제목이 칸을 밀어 오른쪽 상자 밑으로 들어가지 않게. */
.v2-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; border-top: 2px solid var(--v2-navy); }
.v2-posts ul { list-style: none; margin: 0; padding: 0; min-width: 0; }
.v2-posts li a { display: flex; gap: 12px; align-items: flex-start; padding: 12px 2px; border-bottom: 1px solid var(--v2-line); }
.v2-posts li a:hover b { color: var(--v2-primary); }
.v2-post { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.v2-post b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-post-text { font-size: 12.5px; color: var(--v2-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-post-meta { font-size: 11.5px; color: #9aa0ad; }
.v2-pill { flex: 0 0 auto; display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 12px; white-space: nowrap; background: #eef0f5; color: #4b5162; }
.v2-pill-jobs { background: #fde8ef; color: #c8004f; }
.v2-pill-rent { background: #e6f0ff; color: #2a5bd7; }
.v2-pill-market { background: #e5f7ec; color: #198a4a; }
.v2-pill-free { background: #fff3dc; color: #b26b00; }
.v2-pill-qna { background: var(--v2-primary-soft); color: var(--v2-primary); }

/* ---------- 오른쪽 상자 ---------- */
.v2-box { border: 1px solid var(--v2-line); border-radius: var(--v2-radius); padding: 16px 16px 14px; background: #fff; }
/* 날씨·생활정보 카드. 누를 곳은 없다 - 보는 상자다. */
.v2-weather-card { background: linear-gradient(135deg, #f4efff 0%, #eef3ff 100%); border-color: #e4dcfb; }
.v2-weather-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 17px; font-weight: 900; color: var(--v2-navy); }
.v2-weather-title svg { color: var(--v2-primary); }
.v2-weather-now { display: flex; align-items: center; gap: 14px; }
.v2-weather-now .lifeinfo-icon { width: 64px; height: 64px; flex: 0 0 auto; }
.v2-weather-main { flex: 1; min-width: 0; }
.v2-weather-temp { font-size: 34px; font-weight: 900; color: var(--v2-navy); line-height: 1; }
.v2-weather-temp small { font-size: 18px; font-weight: 700; margin-left: 2px; }
.v2-weather-range { margin-top: 6px; font-size: 12.5px; color: var(--v2-muted); }
.v2-weather-range b { color: var(--v2-text); font-weight: 700; }
.v2-weather-sky { font-size: 14px; font-weight: 700; color: #4b5162; text-align: right; }
.v2-weather-card .lifeinfo-clocks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 0; padding: 0; border: 0; }
.v2-weather-card .lifeinfo-clock { background: rgba(255, 255, 255, .75); border-radius: 10px; padding: 8px 10px; text-align: center; border: 0; }
.v2-weather-card .lifeinfo-clock-city { display: block; font-size: 11.5px; color: var(--v2-muted); }
.v2-weather-card .lifeinfo-clock-time { display: block; font-size: 20px; font-weight: 900; color: var(--v2-navy); line-height: 1.2; }
.v2-weather-card .lifeinfo-clock-date { display: block; font-size: 11px; color: var(--v2-muted); }
.v2-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.v2-info-cell { background: rgba(255, 255, 255, .75); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.v2-info-label { font-size: 12px; font-weight: 700; color: #4b5162; }
.v2-info-label small { display: block; font-size: 10.5px; font-weight: 400; color: var(--v2-muted); }
.v2-info-cell b { font-size: 17px; font-weight: 900; color: var(--v2-navy); }
.v2-info-cell b small { font-size: 11px; font-weight: 500; color: var(--v2-muted); margin-left: 2px; }
.v2-weather-card .lifeinfo-asof { margin-top: 8px; font-size: 10.5px; color: #9aa0ad; line-height: 1.5; text-align: right; }

.v2-columns { list-style: none; margin: 0; padding: 0; }
.v2-columns li a { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--v2-line); }
.v2-columns li:last-child a { border-bottom: 0; }
.v2-face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.v2-face-empty { display: flex; align-items: center; justify-content: center; background: var(--v2-bg); font-size: 18px; }
.v2-col-writer { display: block; font-size: 12px; color: var(--v2-muted); }
.v2-col-title { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; }
.v2-columns li a:hover .v2-col-title { color: var(--v2-primary); }

.v2-side-ads { display: flex; flex-direction: column; gap: 12px; }
.v2-side-ads a { display: block; border-radius: var(--v2-radius); overflow: hidden; border: 1px solid var(--v2-line); }
.v2-side-ads img { width: 100%; height: auto; }

.v2-botcard { display: flex; align-items: center; gap: 12px; background: linear-gradient(120deg, var(--v2-primary-soft), #fdeef4); border: 0; }
.v2-botcard-face { font-size: 34px; }
.v2-botcard-text { flex: 1; display: flex; flex-direction: column; font-size: 12.5px; color: #4b5162; line-height: 1.45; }
.v2-botcard-text b { font-size: 15px; color: var(--v2-navy); }
.v2-botcard-go { border: 0; border-radius: 18px; background: var(--v2-primary); color: #fff; font-weight: 700; font-size: 13px; padding: 9px 14px; cursor: pointer; font-family: inherit; white-space: nowrap; }

/* ---------- 이벤트 달력 ---------- */
.v2-cal-nav { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 10px; }
.v2-cal-nav b { font-size: 15px; }
.v2-cal-nav button { width: 30px; height: 30px; border: 1px solid var(--v2-line); border-radius: 50%; background: #fff; font-size: 18px; line-height: 1; cursor: pointer; color: var(--v2-text); }
.v2-cal-nav button:disabled { opacity: .35; cursor: default; }
.v2-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.v2-cal-dow { font-size: 11.5px; color: var(--v2-muted); padding: 4px 0; font-weight: 700; }
.v2-cal-dow.is-sun, .v2-cal-day.is-sun { color: #d33; }
.v2-cal-dow.is-sat { color: #2a5bd7; }
.v2-cal-day { border: 0; background: none; font: inherit; font-size: 13px; padding: 5px 0 4px; border-radius: 8px; cursor: pointer; color: var(--v2-text); display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 38px; }
.v2-cal-day:hover { background: var(--v2-bg); }
.v2-cal-day.is-blank { cursor: default; }
.v2-cal-day.is-past { opacity: .5; }
.v2-cal-day.is-today span:first-child { background: var(--v2-primary); color: #fff; border-radius: 50%; width: 24px; height: 24px; line-height: 24px; font-weight: 700; }
.v2-cal-day.is-picked { background: var(--v2-primary-soft); }
.v2-cal-dots { display: flex; gap: 2px; height: 6px; }
.v2-cal-dots i { width: 6px; height: 6px; border-radius: 50%; }
.k-biz { background: var(--v2-pink); } .k-group { background: var(--v2-primary); }
.k-local { background: #2a9d8f; } .k-culture { background: #f4a100; } .k-etc { background: #9aa0ad; }
.v2-cal-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 10px 0 2px; font-size: 11.5px; color: var(--v2-muted); }
.v2-cal-legend span { background: none !important; display: inline-flex; align-items: center; gap: 5px; }
.v2-cal-legend span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.v2-cal-legend .k-biz::before { background: var(--v2-pink); } .v2-cal-legend .k-group::before { background: var(--v2-primary); }
.v2-cal-legend .k-local::before { background: #2a9d8f; } .v2-cal-legend .k-culture::before { background: #f4a100; }
.v2-cal-list-title { margin: 14px 0 6px; font-size: 15px; font-weight: 900; color: var(--v2-navy); border-top: 1px solid var(--v2-line); padding-top: 12px; }
.v2-cal-list { list-style: none; margin: 0; padding: 0; }
.v2-cal-list li a { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--v2-line); }
.v2-cal-list li:last-child a { border-bottom: 0; }
/* 'N개 모두 보기' under the day's list (JS/V2Calendar.js) */
.v2-cal-list li.v2-cal-all a { justify-content: center; margin-top: 6px; padding: 9px 0; border: 1px solid var(--v2-line); border-radius: 10px; font-size: 13px; font-weight: 800; color: var(--v2-primary); }
.v2-cal-list li.v2-cal-all a:hover { border-color: var(--v2-primary); background: var(--v2-primary-soft); }
.v2-cal-when { flex: 0 0 auto; min-width: 54px; font-size: 12px; font-weight: 700; color: var(--v2-primary); }
.v2-cal-what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v2-cal-what b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-cal-what span { font-size: 11.5px; color: var(--v2-muted); }
.v2-cal-list .v2-pill.k-biz { background: #fde8ef; color: #c8004f; }
.v2-cal-list .v2-pill.k-group { background: var(--v2-primary-soft); color: var(--v2-primary); }
.v2-cal-list .v2-pill.k-local { background: #dff3f0; color: #1d7a6f; }
.v2-cal-list .v2-pill.k-culture { background: #fff1d6; color: #b26b00; }
.v2-cal-list .v2-pill.k-etc { background: #eef0f5; color: #4b5162; }
.v2-cal-empty { font-size: 13px; color: var(--v2-muted); padding: 10px 0; }

/* 앱 출시 카드 (V2Home.appCard): 머리 오른쪽의 짙은 카드. 전화기 두 대는 한 장의 그림이고
   (카드와 같은 색 위에 그렸다), 글과 가게 단추는 글자라 선명하고 눌린다. 머리가 좁아
   카드가 왼쪽 글에 닿으면 (1240px 아래) 카드를 내리고 원래의 도시 그림으로 돌아간다. */
.v2-app-card { display: none; }
/* 앱 카드의 작은 움직임: 전화기는 천천히 떠 있고, NEW 꼬리표는 숨 쉬듯 빛나고, 가게 단추는
   몇 초에 한 번 살짝 뛴다. 눈길만 끌 만큼 작게. 움직임을 줄이도록 해 둔 사람에게는 멈춘다. */
@keyframes v2-app-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes v2-app-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 194, 220, 0); } 50% { box-shadow: 0 0 0 5px rgba(255, 194, 220, .18); } }
@keyframes v2-app-hop { 0%, 84%, 100% { transform: translateY(0); } 88% { transform: translateY(-4px); } 92% { transform: translateY(0); } 95% { transform: translateY(-2px); } }
@media (min-width: 1240px) and (prefers-reduced-motion: no-preference) {
    .v2-app-phones { animation: v2-app-float 4.5s ease-in-out infinite; }
    .v2-app-tag { animation: v2-app-glow 2.6s ease-in-out infinite; }
    .v2-home a.v2-app-store { animation: v2-app-hop 6s ease-in-out infinite; }
    .v2-home a.v2-app-store + a.v2-app-store { animation-delay: .25s; }
    .v2-home a.v2-app-store:hover { animation: none; }
}

@media (min-width: 1240px) {
    .v2-hero-app .v2-hero-art { display: none; }
    .v2-app-card { position: absolute; z-index: 2; right: 40px; top: 24px; bottom: 24px; width: 540px; display: flex; align-items: stretch;
        border-radius: 22px; overflow: hidden; background: #231a5e; box-shadow: 0 18px 40px rgba(35, 26, 94, .28); }
    .v2-app-card::before { content: ''; position: absolute; left: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
        background: radial-gradient(circle, rgba(230, 0, 92, .35) 0, rgba(230, 0, 92, 0) 70%); pointer-events: none; }
    .v2-app-text { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 26px 0 26px 30px; }
    .v2-app-tag { align-self: flex-start; padding: 4px 12px; border-radius: 14px; background: rgba(255, 255, 255, .14); color: #ffc2dc; font-size: 12px; font-weight: 700; letter-spacing: .3px; }
    .v2-app-title { font-size: 26px; line-height: 1.3; font-weight: 900; color: #fff; letter-spacing: -.5px; }
    .v2-app-sub { font-size: 14px; line-height: 1.55; color: #cfc8f5; }
    .v2-app-stores { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
    .v2-home .v2-app-store { display: inline-flex; align-items: center; gap: 10px; width: 176px; padding: 7px 12px; border-radius: 12px; background: #fff; color: var(--v2-navy);
        box-shadow: 0 4px 12px rgba(0, 0, 0, .18); transition: transform .15s, box-shadow .15s; }
    .v2-home a.v2-app-store:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .25); }
    .v2-app-store.is-soon { opacity: .85; cursor: default; }
    .v2-app-store img { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px; }
    .v2-app-store span { display: flex; flex-direction: column; line-height: 1.15; }
    .v2-app-store small { font-size: 10.5px; color: var(--v2-muted); }
    .v2-app-store b { font-size: 15px; font-weight: 800; }
    .v2-app-phones { position: relative; z-index: 1; flex: 0 0 auto; height: 112%; width: auto !important; max-width: none !important; margin: -2% 4px 0 0; align-self: flex-start; }
}

/* ---------- 좁은 화면 (휴대전화 디자인이 오기 전까지의 최소한) ---------- */
@media (max-width: 1100px) {
    .v2-shortcuts { grid-template-columns: repeat(5, 1fr); }
    .v2-cols { grid-template-columns: minmax(0, 1fr); }
    .v2-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v2-hero-art { opacity: .5; width: 100%; }
}
.v2-app-strip { display: none; }
@media (max-width: 760px) {
    /* The hero on phones: a short title and the search across the width (its button had run off
       the screen - the box was 560px wide and pushed the text column with it). The kicker and the
       subtitle are left to wider screens. The community and blog pages share this hero. */
    .v2-hero { margin-top: 10px; }
    .v2-hero-in { min-height: 0; padding: 0 16px; }
    .v2-hero-copy { flex: 1 1 auto; min-width: 0; width: 100%; max-width: none; padding: 20px 0 18px; }
    .v2-hero-kicker, .v2-hero-sub { display: none; }
    .v2-hero-title { font-size: 23px; letter-spacing: -.5px; }
    .v2-hero::before { opacity: .07; height: 62%; }
    .v2-hero-art { opacity: .3; }
    .v2-search { width: 100%; margin-top: 14px; }
    .v2-search input { padding: 11px 16px; font-size: 14px; }
    .v2-search button { flex: 0 0 52px; padding: 0; font-size: 0; color: transparent;
        background: var(--v2-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center / 20px no-repeat; }
    /* the app, as a slim strip under the search (V2Home.appStrip) */
    .v2-home a.v2-app-strip { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 10px 8px 8px; border-radius: 14px;
        background: linear-gradient(120deg, #4f2ad1, #7c3aed 60%, #a03fd0); color: #fff; text-decoration: none; box-shadow: 0 6px 16px rgba(79, 42, 209, .25); }
    .v2-app-strip img { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: #fff; }
    .v2-app-strip-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
    .v2-app-strip-text b { font-size: 13.5px; font-weight: 800; }
    .v2-app-strip-text small { font-size: 11.5px; color: #e2dafd; }
    .v2-app-strip-go { flex: 0 0 auto; padding: 7px 12px; border-radius: 10px; background: #fff; color: #4f2ad1; font-size: 12.5px; font-weight: 900; }
    @media (prefers-reduced-motion: no-preference) { .v2-app-strip-go { animation: v2-app-hop 6s ease-in-out infinite; } }
    /* the shortcuts on phones: no boxes, small round icons five to a row - two rows instead of three tall ones */
    .v2-shortcuts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 2px; margin: 16px 0 20px; }
    .v2-shortcut { gap: 6px; padding: 2px; border: 0; background: none; font-size: 11.5px; line-height: 1.25; text-align: center; word-break: keep-all; }
    .v2-shortcut:hover { box-shadow: none; transform: none; }
    .v2-shortcut-icon { width: 46px; height: 46px; }
    .v2-shortcut-icon svg { width: 22px; height: 22px; }
    /* 오늘의 실시간 게시글: the newest five (the second column is the next five); 더보기 has the rest */
    .v2-home .v2-posts ul + ul { display: none; }
    /* HOT YouTV and the blog news: two rows of two */
    .v2-home .v2-main .v2-grid-3 > a:nth-child(n+5) { display: none; }
    /* the shop cards: a smaller picture, the old price on its own line (the two overflowed side by side) */
    .v2-shop { gap: 8px; }
    .v2-shop-item { gap: 8px; padding: 8px; align-items: flex-start; }
    .v2-shop-img { width: 56px; height: 56px; }
    .v2-shop-name { font-size: 12.5px; }
    .v2-shop-price { font-size: 13.5px; white-space: normal; line-height: 1.3; }
    .v2-shop-price s { display: block; margin: 0; font-size: 11px; }
    .v2-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .v2-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .v2-posts { grid-template-columns: minmax(0, 1fr); }
    .v2-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 첫 화면 팝업 (Core/SitePopup, 백오피스 팝업 관리) ---------- */
html.v2-popup-open, html.v2-popup-open body { overflow: hidden; }
.v2-popup { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(17, 20, 45, .55);
    font-family: var(--v2-font); animation: v2-popup-fade .2s ease-out; }
.v2-popup[hidden] { display: none; }
.v2-popup-box { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 48px); overflow: auto; border-radius: 20px; background: #fff;
    box-shadow: 0 30px 70px rgba(17, 20, 45, .35); animation: v2-popup-rise .25s ease-out; }
.v2-popup-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: #2f3445; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); cursor: pointer; }
.v2-popup-x:hover { background: #fff; color: var(--v2-primary); }
.v2-popup-img { display: block; background: var(--v2-bg); }
.v2-popup-img img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.v2-popup-body { padding: 26px 30px 8px; }
.v2-popup-body h2 { margin: 0 0 10px; font-size: 24px; font-weight: 900; line-height: 1.35; color: var(--v2-navy); letter-spacing: -.3px; word-break: keep-all; }
.v2-popup-body p { margin: 0 0 20px; font-size: 15px; line-height: 1.7; color: #4b5162; white-space: pre-line; word-break: keep-all; }
.v2-popup-go { display: flex; align-items: center; justify-content: center; height: 52px; margin-bottom: 4px; border-radius: 12px; background: var(--v2-primary); color: #fff !important;
    font-size: 15.5px; font-weight: 800; text-decoration: none !important; box-shadow: 0 10px 22px rgba(107, 63, 224, .25); }
.v2-popup-go:hover { background: #5a30c8; }
.v2-popup-foot { display: flex; justify-content: flex-end; padding: 10px 18px 14px; }
.v2-popup-close { border: 0; background: none; color: var(--v2-muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.v2-popup-close:hover { color: var(--v2-text); }
.v2-popup-img + .v2-popup-foot { border-top: 1px solid var(--v2-line); }
@keyframes v2-popup-fade { from { opacity: 0; } }
@keyframes v2-popup-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (max-width: 767px) { .v2-popup { display: none !important; } }