@charset "utf-8";

/*
    PC 고정 사이드바 카드형 테스트
    ------------------------------------------------------------------
    적용: 1360px 이상
    복원: sidebar.html의 side_dock_compact_test.css import 한 줄만 제거
    기존 side_dock.css / slideMenu.css / side_navigation.css는 변경하지 않습니다.
*/

@media (min-width: 1360px) {
    :root {
        --side-dock-gap: 55px;
        --side-dock-card-width: 358px;
        --side-dock-border: #eeeeee;
        --side-dock-text-subtle: #999999;
        --side-dock-nav-active: #f5c520;
        /*
            지점 타일 색은 모바일과 같아야 하므로 여기서 따로 정하지 않고
            공용 변수(--mono-5-f6 판 색, --mono-2-95 오픈예정 글자색)를 그대로 씁니다.
        */
    }

    #aside {
        justify-content: flex-start;
        padding: 24px var(--side-dock-gap) 24px 0;
        background: transparent;
    }

    /* 오른쪽 검색 영역도 본문 경계에서 정확히 55px 떨어지게 맞춥니다. */
    html .pc_right {
        width: calc(50% - clamp(var(--width-min), var(--width), var(--width-max)) / 2);
        padding-right: var(--side-dock-gap);
        padding-left: var(--side-dock-gap);
    }

    html .pc_right .inner {
        margin-right: auto;
        margin-left: 0;
    }

    /* 위아래 auto margin은 높이가 충분할 때 카드 전체를 세로 중앙에 둡니다. */
    #aside .aside_util,
    #aside nav {
        width: 100%;
        max-width: var(--side-dock-card-width);
        background: var(--mono-ff);
        box-sizing: border-box;
    }

    /*
        카드 높이는 내용에 맡깁니다.

        전에는 .aside_util 467px + nav 263px = 730px 로 못 박고,
        그 위에 가상 요소로 730px 테두리를 한 장 덮어 카드처럼 보이게 했습니다.
        지점 칸이 모바일과 같은 여유 있는 타일로 바뀌면서 내용이 730px 를 넘어
        높이를 고정해 둘 수 없게 되었습니다.

        그래서 테두리를 두 형제 박스가 위아래로 나눠 갖습니다.
        위 박스는 아래 테두리를, 아래 박스는 위 테두리를 빼고 둥근 모서리도 나눠 가지면
        둘이 이어져 하나의 카드로 보입니다. 배경이 둘 다 흰색이라 이음선이 안 보입니다.
        내부 폭이 테두리 2px 만큼 줄지만, 지점 칸이 1fr(남는 만큼 나눠 갖기)이라 상관없습니다.
    */
    #aside .aside_util {
        position: relative;
        margin: auto 0 0 auto;
        padding: 22px 20px 20px;
        border: 1px solid var(--side-dock-border);
        border-bottom: 0;
        border-radius: 13px 13px 0 0;
    }

    #aside nav {
        margin: 0 0 auto auto;
        padding: 6px 20px 11px;
        border: 1px solid var(--side-dock-border);
        border-top: 0;
        border-radius: 0 0 13px 13px;
    }

    /* 고정 패널에서도 안내문구를 카드 상단 제목으로 사용합니다. */
    #aside .util_tit {
        display: block;
    }

    #aside .aside_util .util_tit .util_tit__title {
        margin: 0;
        color: var(--font-color-heading);
        font-size: 18px;
        font-weight: 700;
        /*
            글자 간격: 원래 -1.98px(약 -0.11em)이라 낱말 사이가 붙어
            "바로그의원에오신것을환영합니다" 처럼 읽혔습니다.
            한글 제목에 알맞은 -0.02em 수준으로 낮춥니다.
        */
        line-height: 26px;
        letter-spacing: -0.36px;
        word-break: keep-all;
    }

    #aside .aside_util .util_tit p:not(.util_tit__title) {
        margin: 6px 0 0;
        color: var(--side-dock-text-subtle);
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: -0.24px;
        word-break: keep-all;
    }

    /*
        "전체지점" 제목을 다시 보이게 합니다.
        모바일 메뉴와 같은 순서(인사말 → 전체지점 → 지점 타일)로 읽히게 하는 것이 목적입니다.
        위 여백만 모바일(30px)보다 좁게 둡니다. 카드 안이라 그만큼 벌릴 자리가 없습니다.
    */
    /* side_dock.css 가 같은 자리에 굵기 700 을 주고 있어, 선택자를 같은 급으로 맞춰 덮습니다. */
    #aside .aside_util .aside_util__branchLabel {
        display: block;
        margin: 18px 0 8px;
        color: var(--font-color-base);
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.32px;
    }

    #aside .aside_util .inner {
        padding: 0;
        border: 0;
    }

    /* ----------------------------------------------------------------
       지점 선택 영역 — 모바일 메뉴와 같은 모양

       전에는 칸마다 실선을 그어 하나의 표처럼 보이게 했습니다(Figma 시안).
       모바일은 회색 판 위에 타일이 여백으로 떨어져 있는 모양이라 서로 달랐습니다.
       PC 를 모바일 쪽에 맞춥니다. 값은 side_navigation.css 의 모바일 규칙과 같습니다.
       달라지는 것은 폭뿐입니다. 모바일은 화면 폭, PC 는 358px 카드 안입니다.
    ---------------------------------------------------------------- */
    #aside .aside_util .sideNav__branchGrid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        /* 표였을 때 필요했던 고정 행 높이와 전체 높이를 풉니다. 타일 크기가 높이를 정합니다. */
        grid-template-rows: none;
        align-items: unset;
        gap: 0;
        width: 100%;
        height: auto;
        margin: 0 0 17px;
        padding: 8px;
        overflow: hidden;
        border: 0;
        border-radius: var(--radius-12);
        background: var(--mono-5-f6);
        box-sizing: border-box;
    }

    /* 칸을 나누던 실선을 지웁니다. 타일 사이 여백이 그 역할을 합니다. */
    #aside .aside_util .sideNav__branchGrid li {
        min-width: 0;
        min-height: 0;
        border: 0;
        background: transparent;
    }

    #aside .aside_util .sideNav__branchGrid li a,
    #aside .aside_util .sideNav__branchGrid li span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        min-height: 38px;
        padding: 20px 2px;
        border: 0;
        border-radius: var(--radius-8);
        color: var(--font-color-base);
        background: transparent;
        box-sizing: border-box;
        font-size: 14px;
        font-weight: 500;
        /* 줄 높이를 지정하지 않습니다. 모바일과 같아야 타일 높이도 같아집니다(58px → 56px). */
        line-height: normal;
        text-align: center;
        word-break: keep-all;
    }

    /*
        현재 보고 있는 지점은 모바일처럼 노란 글씨로 표시합니다.
        전에는 칸 전체를 노랗게 칠했는데, 타일 사이가 벌어진 지금은
        노란 덩어리 하나가 튀어 보여 글자 색으로만 알립니다.
    */
    #aside .aside_util .sideNav__branchGrid .sideNav__branchItem--active {
        background: transparent;
    }

    #aside .aside_util .sideNav__branchGrid .sideNav__branchItem--active a {
        color: var(--point-color-primary);
        background: transparent;
        font-weight: 700;
    }

    /*
        오픈예정 글자색. 모바일과 같은 값입니다(side_navigation.css).
        위 li a 규칙이 #aside 를 끼고 있어 셈이 더 세므로 여기서도 한 번 더 적어야 이깁니다.
        여백은 따로 주지 않습니다. 다른 지점 타일과 크기가 같아야 줄이 흐트러지지 않습니다.
    */
    #aside .aside_util .sideNav__branchGrid .sideNav__branchItem--soon a,
    #aside .aside_util .sideNav__branchGrid .sideNav__branchItem--soon span {
        color: var(--mono-2-95);
    }

    #aside .aside_util .sideNav__bookingBtn {
        min-height: 48px;
        height: 48px;
        /* 지점 그리드의 하단 여백을 그대로 사용합니다. */
        margin: 0;
        padding: 0 12px;
        border-radius: 10px;
        color: var(--font-color-base, #000000);
        font-size: 14px;
        font-weight: 700;
    }

    /*
        지점 블록과 메뉴를 나누는 구분선.
        폭을 322px 로 못 박아 뒀는데, 카드 안쪽 여백을 좌우 같게 바꾸면서
        선이 한쪽으로 치우쳤습니다. 좌우 20px 를 띄우고 남는 만큼 늘어나게 합니다.
    */
    #aside nav::before {
        content: "";
        position: absolute;
        top: 0;
        right: 20px;
        left: 20px;
        height: 1px;
        background: var(--side-dock-border);
    }

    #aside nav {
        position: relative;
    }

    #aside .aside_nav::before {
        display: none;
    }

    #aside .sideNav__link {
        height: 49px;
        min-height: 49px;
        margin: 0;
        padding: 0;
        color: var(--font-color-base);
        background: transparent;
        font-size: 14px;
        font-weight: 600;
        line-height: normal;
        text-decoration: none;
        border-radius: 0;
        transform: none;
        transition: color 200ms ease;
    }

    #aside .sideNav__link::after {
        display: none;
    }

    #aside .sideNav__link[aria-current="page"] {
        color: var(--side-dock-nav-active);
        font-weight: 700;
    }

    #aside .sideNav__link:focus-visible,
    #aside .aside_util .sideNav__branchGrid a:focus-visible,
    #aside .aside_util .sideNav__bookingBtn:focus-visible {
        position: relative;
        z-index: 2;
        outline: 2px solid var(--point-color-primary);
        outline-offset: -2px;
    }

    #aside .sideNav__link:active {
        background: transparent;
        text-decoration: none;
        transform: none;
    }

    /* 누르는 순간 표시. 판 색과 같은 회색은 안 보이므로 모바일과 같은 값을 씁니다. */
    #aside .aside_util .sideNav__branchGrid li:not(.sideNav__branchItem--active) a:active {
        background: rgba(0, 0, 0, 0.06);
    }

    /* 번역 시 글자가 길어지는 경우 기존 3열 정책을 유지합니다. */
    html.translated-ltr #aside .aside_util .sideNav__branchGrid,
    html.translated-rtl #aside .aside_util .sideNav__branchGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/*
    1360~1405px 구간을 따로 손볼 필요가 없어졌습니다.
    지점 칸이 1fr 로 남는 폭을 나눠 갖고, 구분선도 좌우 20px 기준으로 늘어나므로
    카드가 좁아져도 저절로 맞습니다.
*/

@media (min-width: 1360px) and (hover: hover) and (pointer: fine) {
    #aside .sideNav__link:hover {
        color: var(--point-color-primary);
        background: transparent;
        text-decoration: none;
        transform: none;
    }

    /* 모바일과 같이 글자만 노랗게. 판과 같은 회색 배경은 표시가 안 됩니다. */
    #aside .aside_util .sideNav__branchGrid li:not(.sideNav__branchItem--active) a:hover {
        color: var(--point-color-primary);
        background: transparent;
    }
}

@media (min-width: 1360px) and (prefers-reduced-motion: reduce) {
    #aside,
    #aside * {
        scroll-behavior: auto;
        transition-duration: 0.01ms !important;
    }
}