/* 업소 상세 (YPDetail, pageid 75), 새 디자인. YPDetail 이 새 디자인일 때 싣는다.
   짜임과 JS/Yellowpage.js 가 찾는 이름은 그대로 두고 모습만 바꾼다. 예전 규칙
   (CSS/Yellowpage.css) 이 줄 높이와 폭을 묶어 두어 몇 군데는 !important 로 푼다. */

/* ---------- 위의 길 (업소홈 › 분류 › 업종) ---------- */
body:has(.v2-header) .CategoryPathContainer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; height: auto !important; margin: 16px 0 14px !important; padding: 0 !important;
    border: 0 !important; background: none !important; font-family: var(--v2-font); }
body:has(.v2-header) .CategoryPathContainer .CategoryGroupPath { float: none !important; margin: 0 !important; padding: 0 !important; }
body:has(.v2-header) .CategoryPathContainer .CategoryGroupPath + .CategoryGroupPath::before { content: '›'; margin-right: 6px; color: var(--v2-muted); }
body:has(.v2-header) .CategoryPathContainer a { display: inline-block; padding: 6px 12px !important; border: 1px solid var(--v2-line); border-radius: 999px; background: #fff !important;
    font-size: 13px; font-weight: 700; color: #4b5162 !important; text-decoration: none !important; }
body:has(.v2-header) .CategoryPathContainer a:hover { border-color: var(--v2-primary); color: var(--v2-primary) !important; }
body:has(.v2-header) .CategoryPathContainer .CategoryGroupPath:last-child a { border-color: transparent; background: var(--v2-primary-soft) !important; color: var(--v2-primary) !important; }

/* ---------- 이름과 기본 정보: 한 장의 카드 ---------- */
body:has(.v2-header) [itemtype="http://schema.org/LocalBusiness"] { font-family: var(--v2-font); color: var(--v2-text); }
body:has(.v2-header) .YPNameContainer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 !important; padding: 26px 28px 0 !important; border: 1px solid var(--v2-line) !important;
    border-bottom: 0 !important; border-radius: 18px 18px 0 0; background: #fff !important; }
body:has(.v2-header) .YPNameContainer .YPName { font-size: 28px; font-weight: 900; line-height: 1.3; color: var(--v2-navy); }
body:has(.v2-header) .YPNameContainer .YPEName { font-size: 15px; font-weight: 700; color: var(--v2-primary); }
body:has(.v2-header) .YPOtherInfoContainer.container { box-sizing: border-box; display: flex; align-items: flex-start; gap: 24px; width: auto !important; height: auto !important; margin: 0 !important;
    padding: 20px 28px 26px !important; border: 1px solid var(--v2-line); border-top: 0; border-radius: 0 0 18px 18px; background: #fff; }
body:has(.v2-header) .YPOtherInfoContainer.container::before, body:has(.v2-header) .YPOtherInfoContainer.container::after { display: none; }
body:has(.v2-header) .YPOtherInfoContainer.container > img { flex: 0 0 260px; float: none !important; width: 260px; height: auto !important; max-height: 220px; margin: 0 !important; padding: 0;
    object-fit: contain; border: 1px solid var(--v2-line); border-radius: 14px; background: #f6f6fa; }
body:has(.v2-header) .YPOtherInfoContainer .NestedContainer { flex: 1; min-width: 0; width: auto !important; height: auto !important; overflow: visible !important; }
body:has(.v2-header) .YPOtherInfoContainer .NestedContainer .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; height: auto !important; margin: 0 !important; padding: 0;
    border: 0 !important; overflow: visible !important; }
body:has(.v2-header) .YPOtherInfoContainer .NestedContainer .row::before, body:has(.v2-header) .YPOtherInfoContainer .NestedContainer .row::after { display: none; }
body:has(.v2-header) .YPOtherInfoContainer .NestedContainer .row:not(:has(> .cell)) { grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; }
body:has(.v2-header) .YPOtherInfoContainer .NestedContainer .row .cell { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; width: auto !important; height: auto !important; float: none; overflow: visible; }
body:has(.v2-header) .YPOtherInfoContainer .NestedContainer .row > *, body:has(.v2-header) .YPOtherInfoContainer .NestedContainer .row .cell > * { padding-top: 10px !important; padding-bottom: 10px !important;
    border-bottom: 1px solid var(--v2-line); }
body:has(.v2-header) .YPOtherInfoContainer .NestedContainer .row.lastrow > *, body:has(.v2-header) .YPOtherInfoContainer .NestedContainer .row.lastrow .cell > * { border-bottom: 0; }
body:has(.v2-header) .YPOtherInfoContainer .NestedContainer .row .cell { padding: 0 !important; border-bottom: 0; }
body:has(.v2-header) .YPOtherInfoContainer .NestedContainer .NestedTitle { float: none !important; width: auto !important; height: auto !important; background: none !important; text-align: left !important;
    font-size: 12.5px; font-weight: 700; color: var(--v2-muted); white-space: nowrap; }
body:has(.v2-header) .YPOtherInfoContainer .NestedContainer .NestedContent { display: block; height: auto !important; margin: 0 !important; min-width: 0; font-size: 14px !important; font-weight: 600;
    line-height: 1.5; color: var(--v2-text); overflow-wrap: anywhere; }
body:has(.v2-header) .YPOtherInfoContainer .NestedContainer .NestedContent a { color: var(--v2-primary); }
body:has(.v2-header) .UpdateInfo { margin: 8px 4px 18px !important; padding: 0 !important; text-align: right; font-size: 12px; color: var(--v2-muted); }

/* ---------- 소개 · 이벤트 · 위치 · 수정요청 · 별점: 카드 ---------- */
body:has(.v2-header) .YPSection { margin: 0 !important; padding: 0 !important; background: none !important; }
body:has(.v2-header) .YPSection .InnerSection { margin: 0 0 16px !important; padding: 58px 28px 26px !important; border: 1px solid var(--v2-line) !important; border-radius: 18px !important; background: #fff;
    font-size: 15px; line-height: 1.8; }
body:has(.v2-header) .YPSection .InnerSection .InnerSectionTab { top: 22px !important; left: 28px !important; padding: 0 !important; border-radius: 0 !important; background: none !important;
    font-size: 18px; font-weight: 900; line-height: 1.2; color: var(--v2-navy); }
body:has(.v2-header) .YPSection .BlueCircle { display: inline-block; width: 4px; height: 18px; margin-right: 6px; border-radius: 2px; background: var(--v2-primary); vertical-align: -3px; }
body:has(.v2-header) .YPSection .InnerSectionContentIntro img { border-radius: 12px; }
body:has(.v2-header) .YPSection #map_canvas { border-radius: 12px; overflow: hidden; }
body:has(.v2-header) .YPSection textarea, body:has(.v2-header) .YPSection input[type=text] { box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--v2-line); border-radius: 10px;
    font-family: var(--v2-font); font-size: 14px; outline: 0; }
body:has(.v2-header) .YPSection input[type=text] { height: 40px; }
body:has(.v2-header) .YPSection textarea:focus, body:has(.v2-header) .YPSection input[type=text]:focus { border-color: var(--v2-primary); box-shadow: 0 0 0 3px var(--v2-primary-soft); }
body:has(.v2-header) .YPSection .row { display: flex !important; align-items: center; gap: 8px; margin-left: 0; margin-right: 0; }
body:has(.v2-header) .YPSection .row::before, body:has(.v2-header) .YPSection .row::after { display: none; }
body:has(.v2-header) .YPSection .row > div { float: none !important; }

/* ---------- 단추 ---------- */
body:has(.v2-header) [itemtype="http://schema.org/LocalBusiness"] .Buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 30px; }
body:has(.v2-header) [itemtype="http://schema.org/LocalBusiness"] .Buttons .DefaultButton { min-width: 130px; margin: 0; padding: 11px 22px; border: 1px solid var(--v2-line); border-radius: 12px;
    background: #fff !important; box-shadow: none; filter: none; color: #4b5162 !important; font-family: var(--v2-font); font-size: 14.5px; font-weight: 700; text-align: center; text-decoration: none; }
body:has(.v2-header) [itemtype="http://schema.org/LocalBusiness"] .Buttons .DefaultButton:hover { border-color: var(--v2-primary); color: var(--v2-primary) !important; }
body:has(.v2-header) [itemtype="http://schema.org/LocalBusiness"] .Buttons .DefaultButton.my-biz-button,
body:has(.v2-header) [itemtype="http://schema.org/LocalBusiness"] .InnerSection .Buttons .DefaultButton { border-color: var(--v2-primary); background: var(--v2-primary) !important; color: #fff !important; }
body:has(.v2-header) [itemtype="http://schema.org/LocalBusiness"] .Buttons .DefaultButton.my-biz-button:hover,
body:has(.v2-header) [itemtype="http://schema.org/LocalBusiness"] .InnerSection .Buttons .DefaultButton:hover { background: #5a30c8 !important; color: #fff !important; }
body:has(.v2-header) .YPSection .InnerSection .Buttons { justify-content: flex-start; margin: 15px 0 0; }

/* 가운데 칸이 좁아지는 폭(노트북 화면 등): 그림을 위로 올리고 정보는 한 줄에 하나씩.
   두 칸으로 두면 값 자리가 몇 글자 폭으로 줄어 글자가 한 자씩 꺾인다. */
@media (max-width: 1199px) {
    body:has(.v2-header) .YPOtherInfoContainer.container { flex-direction: column; }
    body:has(.v2-header) .YPOtherInfoContainer.container > img { flex-basis: auto; width: auto; max-width: 100%; max-height: 240px; }
    body:has(.v2-header) .YPOtherInfoContainer .NestedContainer { width: 100% !important; }
    body:has(.v2-header) .YPOtherInfoContainer .NestedContainer .row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    body:has(.v2-header) .YPNameContainer { padding: 18px 16px 0 !important; }
    body:has(.v2-header) .YPNameContainer .YPName { font-size: 22px; }
    body:has(.v2-header) .YPOtherInfoContainer.container { flex-direction: column; padding: 14px 16px 18px !important; }
    body:has(.v2-header) .YPOtherInfoContainer.container > img { flex-basis: auto; width: 100%; max-height: 240px; }
    body:has(.v2-header) .YPOtherInfoContainer .NestedContainer .row { grid-template-columns: minmax(0, 1fr); }
    body:has(.v2-header) .YPSection .InnerSection { padding: 52px 16px 18px !important; }
    body:has(.v2-header) .YPSection .InnerSection .InnerSectionTab { left: 16px !important; }
}