@charset "utf-8";

/*
    사이드바 좌측 고정 배치 (PC 전용)

    무엇을 하나
      넓은 화면에서 #aside 를 밀려 나오는 드로어가 아니라, 본문 왼쪽 빈 자리에
      항상 붙어 있는 패널로 바꿉니다. pc_right 와 같은 방식입니다.

    왜 이렇게 하나
      기본 스킨의 slideMenu.css / header.js / side_navigation.js 는 건드리지 않습니다.
      카페24 모듈(layout_slidePackage)과 모바일 동작을 그대로 두기 위해서입니다.
      문제가 생기면 sidebar.html 의 @css 한 줄만 빼면 원래대로 돌아옵니다.

    적용 구간
      1360px 이상에서만 켭니다.
      본문이 최대 580px 이므로 한쪽 여백이 (1360 - 580) / 2 = 390px 입니다.
      이보다 좁으면 사이드바가 눌려서, 기존 드로어 방식을 그대로 씁니다.

    수정 가능
      - 켜지는 최소 폭: 아래 @media 값
      - 안쪽 콘텐츠 폭: --side-dock-inner
    수정 금지
      - #aside, .aside_util, .aside_nav 등 카페24/스킨 구조 class 이름
*/

@media (min-width: 1360px) {

    :root {
        /* 안쪽 콘텐츠 폭 */
        --side-dock-inner: 360px;
        /* 본문과 사이드바 사이 간격. 이 값만 바꾸면 붙는 정도가 조절됩니다. */
        --side-dock-gap: 20px;
    }

    /*
        본문 왼쪽 빈 자리를 그대로 차지합니다.

        폭을 100vw 로 계산하면 안 됩니다.
        100vw 는 세로 스크롤바(약 15px)를 포함하는데, 본문 #wrap 은 스크롤바를 뺀
        폭을 기준으로 가운데 정렬됩니다. 기준이 달라 사이드바가 본문을 덮습니다.
        #aside 는 position:fixed 라 50% 가 스크롤바를 뺀 뷰포트 기준으로 잡힙니다.
        본문이 쓰는 기준과 같아져 절대 겹치지 않습니다.
    */
    #aside {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 900;
        width: calc(50% - clamp(var(--width-min), var(--width), var(--width-max)) / 2);
        max-width: none;
        /* 안쪽 여백과 테두리가 폭에 더해지지 않게 합니다. 없으면 그만큼 본문을 덮습니다. */
        box-sizing: border-box;
        /* 드로어 동작 해제: 항상 보이고, 밀려 들어오지 않습니다. */
        visibility: visible;
        transform: none;
        transition: none;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* 열림 상태(body.slideM)에서도 위치가 흔들리지 않게 같은 값으로 고정합니다. */
    body.slideM #aside {
        visibility: visible;
        transform: none;
    }

    /*
        드로어일 때 필요하던 것들을 끕니다.
        - 햄버거 버튼: 사이드바가 왼쪽에 늘 펼쳐져 있으니 열 것이 없습니다.
        - 닫기 버튼: 항상 열려 있으므로 의미가 없습니다.
        - 어둡게 덮는 층: 본문을 가리면 안 됩니다.
    */
    .topArea .moBtn,
    #aside .btnClose,
    #layoutDimmed {
        display: none !important;
    }

    /*
        .topArea 는 좌(햄버거)-우(국기) 양끝 배치(space-between)입니다.
        왼쪽을 없애면 국기 묶음이 왼쪽으로 끌려오므로, 왼쪽 여백을 자동으로 채워
        제자리에 남게 합니다. 로고는 absolute 로 가운데 고정이라 영향이 없습니다.
    */
    .topArea .navi_util {
        margin-left: auto;
    }

    /*
        drawer 가 열릴 때 본문 스크롤을 잠그던 규칙을 되돌립니다.
        이게 남아 있으면 데스크톱에서 본문이 스크롤되지 않습니다.
    */
    body.slideM {
        position: static;
        height: auto;
        min-height: 0;
        overflow: visible;
        touch-action: auto;
    }

    /*
        본문(#wrap)은 좌우로 그림자를 갖고 있습니다(layout.css 의 box-shadow).
        그런데 사이드바가 흰색이라 왼쪽 그림자를 덮어, 오른쪽에만 선이 보였습니다.
        사이드바를 투명하게 두면 왼쪽 그림자가 그대로 드러나 양쪽이 같아집니다.
        page 배경도 #fff 라 겉보기 색은 달라지지 않습니다.
    */
    #aside,
    #aside .aside_util {
        background: transparent;
    }

    /* 안쪽 콘텐츠를 왼쪽 빈 자리의 한가운데에 둡니다. */
    #aside .aside_util,
    #aside nav {
        width: 100%;
        max-width: calc(var(--side-dock-inner) + 60px);
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* 좌우 여백을 같게 주어야 가운데가 실제로 가운데가 됩니다. */
    #aside {
        padding-right: var(--side-dock-gap);
        padding-left: var(--side-dock-gap);
    }

    /* 닫기 버튼이 사라졌으므로 위쪽 여백을 정리합니다. */
    #aside .aside_util {
        padding-top: 40px;
    }

    /* ================================================================
       여기부터는 배치가 아니라 "생김새" 입니다.

       드로어(눌러서 열었다 닫는 것)용으로 만들어진 디자인이라,
       항상 떠 있는 패널에는 맞지 않는 부분을 손봅니다.
       마크업과 JS 는 그대로 두고 CSS 로만 처리합니다.
    ================================================================ */

    /*
        1) 인사말을 전부 숨깁니다.
        "환영합니다 / 가장 가까운 지점을 선택해주세요"는 방금 열었을 때 어울리는 말입니다.
        항상 떠 있는 패널에서는 페이지를 넘길 때마다 같은 말을 반복하게 됩니다.
        바로 아래 "전체지점" 제목만으로 무엇인지 충분히 읽힙니다.
    */
    #aside .util_tit {
        display: none;
    }

    /*
        2) 예약 버튼은 원래 자리(전체지점 그리드 아래)에 원래 모양 그대로 둡니다.
           위로 올리고 외곽선으로 바꿔 봤지만 되돌렸습니다.
    */

    /*
        5) 지점 블록과 메뉴 사이의 구분선을 지웁니다.
           (slideMenu.css 의 .aside_util .inner border-bottom)
           선이 짧게 끊겨 어중간해 보입니다. 선 대신 여백으로 나눕니다.
    */
    #aside .aside_util .inner {
        padding-bottom: 0;
        border-bottom: 0;
    }

    #aside nav {
        padding-top: 30px;
    }

    /*
        선을 지우니 지점 블록과 메뉴가 한 덩어리로 읽힙니다.
        "전체지점"처럼 메뉴에도 제목을 붙여 서로 다른 묶음임을 알립니다.
        제목이 있으면 선보다 분명하고, 선처럼 어중간하게 끊기지도 않습니다.
        마크업은 건드리지 않고 CSS 로 글자를 넣습니다.
    */
    #aside .aside_nav::before {
        content: "바로가기";
        display: block;
        margin-bottom: 6px;
        color: var(--font-color-base);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.4;
    }

    /*
        6) 글자 크기를 마우스 기준으로 낮춥니다.
        기존 값은 390px 화면에서 손가락으로 누르는 기준이라 PC 에서는 큽니다.
        대신 hover 를 넣습니다. 드로어에는 없던 개념이라 지금은 목록이 죽어 보입니다.
    */
    /*
        메뉴가 그냥 검은 글자 다섯 줄이라 눌러야 할 것인지 안 읽힙니다.
        줄 전체가 반응하는 영역이 되도록 배경과 화살표를 붙입니다.
        마우스 기준 화면에서 "여기는 링크다"를 알려주는 가장 가벼운 방법입니다.
    */
    #aside .sideNav__link {
        justify-content: space-between;
        margin: 0 -12px;
        padding: 14px 12px;
        border-radius: var(--radius-8);
        font-size: 16px;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    /* 오른쪽 꺾쇠. 마크업을 건드리지 않고 CSS 로만 그립니다. */
    #aside .sideNav__link::after {
        content: "";
        flex: 0 0 auto;
        width: 6px;
        height: 6px;
        margin-left: 10px;
        border-top: 1.5px solid currentColor;
        border-right: 1.5px solid currentColor;
        opacity: 0.3;
        transform: rotate(45deg);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    #aside .sideNav__link:hover {
        background: var(--mono-5-f6);
    }

    #aside .sideNav__link:hover::after {
        opacity: 1;
        transform: rotate(45deg) translate(2px, -2px);
    }

    /* 지점 블록의 제목은 메뉴보다 크게 둡니다. 아래에 있어도 여기가 본진입니다. */
    #aside .aside_util .aside_util__branchLabel {
        margin: 20px 0 8px;
        font-size: 16px;
        font-weight: 700;
    }

    /* 6) 지점 목록은 원래 디자인 그대로 둡니다. (회색 상자, 14px, 현재 지점 노란 글씨) */

    /*
        7) 위아래로 가운데 정렬합니다.
        내용이 화면보다 짧아 아래가 크게 빕니다.
        내용이 길어지면 flex-start 로 돌아가 스크롤됩니다.
    */
    #aside {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #aside > * {
        flex: 0 0 auto;
    }
}