@charset "utf-8";

/*
    PC 오른쪽 고정 영역

    구성
      연한 B 워터마크를 뒤에 깔고, 그 위에 BAROG 글자와 슬로건을 얹습니다.
      마크업은 templates/partials/pc_right.html, 문구는 site/data/site.json 의 slogan 입니다.

    바꿀 만한 값
      아래 :root 블록의 --pc-right-* 여섯 개만 고치면 배치와 크기가 모두 조절됩니다.
      B 크기(--pc-right-watermark) 하나만 바꿔도 글자가 같은 비율로 따라갑니다.
*/

.pc_right {
    position: fixed;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc((100vw - clamp(var(--width-min), var(--width), var(--width-max))) / 2);
    height: 100vh;
    padding: 0 20px;
    box-sizing: border-box;
    /* 워터마크가 이 상자 밖으로 나가면 잘라 냅니다. 본문 쪽으로 넘치면 안 됩니다. */
    overflow: hidden;
}

.pcRight {
    /*
        글자를 워터마크 위에 겹쳐 놓기 위한 기준 상자입니다.
        워터마크는 자리를 차지하지 않게 띄우고(absolute), 글자만 흐름에 남깁니다.
        가로는 justify-content 로, 세로는 align-items 로 가운데에 놓습니다.
    */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    min-height: var(--pc-right-watermark);
}

/*
    배치 값은 전부 B 로고 크기(--pc-right-watermark)에 대한 비율입니다.
    화면 폭이 바뀌어 B 가 커지거나 작아져도 글자와의 관계가 그대로 유지됩니다.

    아래 숫자는 시안 이미지(정사각)를 실제로 재서 옮긴 값입니다.
      글자묶음 중심   : B 중심에서 오른쪽 5.8%, 위로 2.4%
      BAROG 폭        : B 폭의 41.5%
      슬로건 글자크기 : B 폭의 8.6%, 줄높이 1.30
      BAROG 아래 여백 : B 폭의 2.7%

    B 는 왼쪽 사선과 오른쪽 배가 비대칭이라, 자를 대고 정확히 가운데에 놓으면
    눈에는 왼쪽으로 쏠려 보입니다. 시안이 오른쪽으로 조금 밀어 둔 이유입니다.
*/
:root {
    --pc-right-watermark: clamp(220px, 22vw, 340px);
    --pc-right-shift-x: calc(var(--pc-right-watermark) * 0.058);
    --pc-right-shift-y: calc(var(--pc-right-watermark) * -0.024);
    --pc-right-wordmark: calc(var(--pc-right-watermark) * 0.415);
    --pc-right-wordmark-gap: calc(var(--pc-right-watermark) * 0.027);
    --pc-right-slogan: calc(var(--pc-right-watermark) * 0.086);
}

.pcRight__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: var(--pc-right-watermark);
    height: auto;
    transform: translate(-50%, -50%);
    /* 배경 장식이라 마우스에 반응하지 않습니다. 글자 선택을 방해하지 않게 합니다. */
    pointer-events: none;
    user-select: none;
}

.pcRight__copy {
    position: relative;
    z-index: 1;
    /*
        상자 폭을 글자 폭에 딱 맞춥니다.
        100% 로 두면 상자는 320px 인데 글자는 그 안 왼쪽에 몰려서,
        상자를 가운데 놓아도 글자는 왼쪽으로 쏠려 보입니다.
        max-content 는 줄바꿈(<br>)으로 나뉜 줄 가운데 가장 긴 줄에 맞춰집니다.
    */
    width: max-content;
    max-width: 100%;
    /*
        상자 폭은 가장 긴 줄에 맞춰집니다. 그래서 그보다 짧은 줄과 BAROG 글자는
        가운데로 모아 줘야 합니다. 안 그러면 왼쪽 변에 붙어 삐뚤어져 보입니다.
    */
    text-align: center;
    transform: translate(var(--pc-right-shift-x), var(--pc-right-shift-y));
}

.pcRight__wordmark {
    display: block;
    width: var(--pc-right-wordmark);
    height: auto;
    /* 이미지는 text-align 이 듣지 않으므로 좌우 auto 여백으로 가운데에 둡니다. */
    margin: 0 auto var(--pc-right-wordmark-gap);
}

.pcRight__slogan {
    margin: 0;
    color: var(--mono-00);
    font-size: var(--pc-right-slogan);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

/* 슬로건에서 강조할 낱말. site.json 에서 <b> 로 감싼 부분입니다. */
.pcRight__slogan b {
    font-weight: 800;
}

/*
    좌우 표시 기준 통일 (1360px)

    왼쪽 지점 선택 카드(#aside)는 side_dock.css 에서 1360px 이상일 때만 고정으로 붙고,
    그보다 좁으면 햄버거 서랍으로 돌아갑니다. 오른쪽도 같은 값을 쓰게 해서
    화면을 확대·축소할 때 한쪽만 남아 보이는 일이 없도록 맞췄습니다.

    기준을 바꾸려면 아래 값과 side_dock.css 의 min-width 1360px 을 함께 고쳐야 합니다.
*/
@media (max-width: 1359px) {
    .pc_right {
        display: none;
    }
}