/* ==============================================
   TTW QR Page Styles
   리움미술관 QR 페이지 스타일 재현
   ============================================== */

/* KoPub 돋움 웹폰트 -----------------------
   (이전 niceplugin/KoPubWorldDotum CDN 경로는 전부 404 — 한글 텍스트가
   폰트를 로드하지 못하고 계속 시스템 폴백 폰트로 렌더링되고 있었음.
   font-kopubworld npm 패키지의 실제 배포 경로로 교체.) */
@font-face {
    font-family: 'KoPub Dotum';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/npm/font-kopubworld@1.0/fonts/KoPubWorld-Dotum-Light.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/npm/font-kopubworld@1.0/fonts/KoPubWorld-Dotum-Light.woff') format('woff');
}

@font-face {
    font-family: 'KoPub Dotum';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/npm/font-kopubworld@1.0/fonts/KoPubWorld-Dotum-Medium.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/npm/font-kopubworld@1.0/fonts/KoPubWorld-Dotum-Medium.woff') format('woff');
}

@font-face {
    font-family: 'KoPub Dotum';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/npm/font-kopubworld@1.0/fonts/KoPubWorld-Dotum-Bold.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/npm/font-kopubworld@1.0/fonts/KoPubWorld-Dotum-Bold.woff') format('woff');
}

/* Reset & Base ----------------------- */
*, *::after, *::before {
    box-sizing: border-box;
}

html, body {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Helvetica Neue', 'KoPub Dotum', sans-serif;
    font-size: 62.5%; /* 1rem = 10px */
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #000000;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

html {
    background-color: #FFFFFF;
}

/* Typography ----------------------- */
h1, h2, h3, h4, h5, h6 {
    clear: both;
    margin: 0;
    padding: 0;
    font-weight: 600;
}

b, strong {
    font-weight: 600;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    border-style: none;
}

a {
    color: #000000;
    text-decoration: none;
    background-color: transparent;
}

a:visited, a:hover, a:active, a:focus {
    color: #000000;
    text-decoration: none;
}

/* Container ----------------------- */
.container {
    width: 100%;
    min-height: 100vh;
    background-color: #FFFFFF;
}

.contents {
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: 0;
}

.detail-wrap {
    padding: 4rem 0 3rem;
}

.cont-box {
    width: 100%;
    padding: 0 6rem;
}

@media screen and (max-width: 767px) {
    .cont-box {
        padding: 0 3rem;
    }

    .detail-wrap {
        padding: 3rem 0 2rem;
    }
}

/* Editor Wrap ----------------------- */
.editor-wrap {
    display: flex;
    flex-flow: column;
    row-gap: 0;
}

/* Block ----------------------- */
.ce-block {
    margin-bottom: 3rem;
}

/* Header area compact spacing ----------------------- */
.ce-block.block-title {
    margin-bottom: 0.8rem;
}

.ce-block.block-date {
    margin-bottom: 1.5rem;
}

.ce-block.block-delimiter-top {
    margin-bottom: 2.5rem;
}

/* Artwork Title / Artist Info ----------------------- */
.ce-title {
    margin-bottom: 0.3rem;
}

.ce-artist {
    margin-bottom: 1.2rem;
}

.ce-meta {
    color: #57575C;
}

/* Header Styles ----------------------- */
.editor-wrap h1 {
    font-size: 2.8rem;
    line-height: 3.8rem;
    font-weight: 600;
}

.editor-wrap h2 {
    font-size: 2rem;
    line-height: 3.2rem;
    font-weight: 700;
}

.editor-wrap h3 {
    font-size: 1.8rem;
    line-height: 2.6rem;
    font-weight: 600;
}

@media screen and (max-width: 767px) {
    .editor-wrap h1 {
        font-size: 2.6rem;
        line-height: 3.2rem;
    }

    .editor-wrap h2 {
        font-size: 1.8rem;
        line-height: 2.6rem;
    }

    .editor-wrap h3 {
        font-size: 1.6rem;
        line-height: 2.4rem;
    }
}

/* Paragraph Styles ----------------------- */
.editor-wrap p,
.editor-wrap .ce-paragraph {
    font-size: 1.6rem;
    line-height: 2.8rem;
    word-break: break-word;
    margin: 0;
    padding: 0;
}

.editor-wrap .font-small {
    font-size: 1.3rem;
    line-height: 2.4rem;
}

.editor-wrap p a,
.editor-wrap .ce-paragraph a {
    text-decoration: underline;
    text-underline-offset: 0.6rem;
}

@media screen and (max-width: 767px) {
    .editor-wrap p,
    .editor-wrap .ce-paragraph {
        font-size: 1.4rem;
        line-height: 2.6rem;
    }

    .editor-wrap .font-small {
        font-size: 1.2rem;
        line-height: 2.2rem;
    }

    .editor-wrap p a,
    .editor-wrap .ce-paragraph a {
        text-underline-offset: 0.4rem;
    }
}

/* Delimiter (Line) ----------------------- */
.editor-wrap hr,
.ce-delimiter {
    width: 100%;
    border: 0;
    border-top: 1px solid #D2D2D2;
    margin: 0 auto;
    padding: 0;
}

/* Image ----------------------- */
.editor-wrap .ce-image {
    display: flex;
    flex-flow: column;
    row-gap: 1rem;
    align-items: center;
    justify-content: center;
}

.editor-wrap .ce-image img {
    width: 100%;
    display: block;
}

.editor-wrap .ce-image .ce-image-caption {
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.9rem;
    padding: 0;
    color: #57575C;
}

@media screen and (max-width: 767px) {
    .editor-wrap .ce-image .ce-image-caption {
        font-size: 1.2rem;
        line-height: 1.8rem;
    }
}

/* Alignment ----------------------- */
.ce-tune-alignment--left {
    text-align: left;
}

.ce-tune-alignment--center {
    text-align: center;
}

.ce-tune-alignment--right {
    text-align: right;
}

/* Italic ----------------------- */
.editor-wrap i {
    display: unset;
    font-style: italic;
}

/* Sponsor Info ----------------------- */
.sponsor-info {
    color: #57575C;
}

/* Font Color (gray for reference/credit text) ----------------------- */
.text-gray {
    color: rgb(158, 158, 158);
}

/* Language Toggle ----------------------- */
.lang-toggle {
    position: fixed;
    top: 4.18rem;
    right: 3rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    background-color: #EEEEEE;
    border-radius: 0.6rem;
    padding: 0.4rem;
    border: none;
    font-family: 'Helvetica Neue', 'KoPub Dotum', sans-serif;
}

.lang-toggle-thumb {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    width: 2.6rem;
    height: calc(100% - 0.8rem);
    background-color: #FFFFFF;
    border-radius: 0.35rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.08);
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 1;
}

.lang-toggle.is-en .lang-toggle-thumb {
    transform: translateX(2.6rem);
}

.lang-toggle .lang-btn {
    position: relative;
    z-index: 2;
    width: 2.6rem;
    padding: 0.45rem 0;
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border: none;
    border-radius: 0.4rem;
    background: transparent;
    color: #9A9A9A;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.15s ease;
    line-height: 1;
    text-align: center;
}

.lang-toggle .lang-btn:active {
    transform: scale(0.92);
}

.lang-toggle .lang-btn.active {
    color: #111111;
    font-weight: 600;
}

@media screen and (max-width: 767px) {
    .lang-toggle {
        top: 2.98rem;
        right: 1.6rem;
    }

    .lang-toggle-thumb,
    .lang-toggle .lang-btn {
        width: 2.3rem;
    }

    .lang-toggle.is-en .lang-toggle-thumb {
        transform: translateX(2.3rem);
    }

    .lang-toggle .lang-btn {
        font-size: 1.05rem;
        padding: 0.4rem 0;
    }
}

/* Language Content Visibility ----------------------- */
/* 175ms out + 175ms in = 350ms, matching the toggle thumb's slide duration
   and easing so the text swap and the thumb finish together. */
.lang-ko,
.lang-en {
    transition: opacity 0.175s cubic-bezier(0.65, 0, 0.35, 1), transform 0.175s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Korean numerals/symbols should render in KoPub Dotum, not fall back to
   Helvetica Neue mid-sentence — mixing the two makes digits (e.g. a year
   next to a title) look like a different typeface than the Hangul around it. */
.lang-ko {
    font-family: 'KoPub Dotum', 'Helvetica Neue', sans-serif;
}

body.lang-fading .lang-ko,
body.lang-fading .lang-en {
    opacity: 0;
    transform: translateY(-0.4rem);
}

body.show-en .lang-ko {
    display: none;
}

body.show-ko .lang-en {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .lang-ko,
    .lang-en {
        transition: none;
    }
}

/* Venue Footer ----------------------- */
.venue-footer {
    padding: 3rem 0 0;
    text-align: right;
}

.venue-footer .venue-label {
    font-size: 1.3rem;
    line-height: 2rem;
    color: #9E9E9E;
    letter-spacing: 0.02em;
}

.venue-footer .venue-link {
    color: #57575C;
    text-decoration: none;
}

.venue-footer .venue-link:hover {
    color: #000000;
}

@media screen and (max-width: 767px) {
    .venue-footer .venue-label {
        font-size: 1.2rem;
    }
}

/* QR Scanner Page ----------------------- */
.scanner-container {
    display: flex;
    flex-flow: column;
    align-items: center;
    min-height: 100vh;
    padding: 6rem 3rem 4rem;
    text-align: center;
}

.scanner-header {
    margin-bottom: 3rem;
}

.scanner-header h3 {
    margin-bottom: 1rem;
}

.scanner-header p {
    line-height: 2rem;
}

.scanner-viewport {
    position: relative;
    width: 100%;
    max-width: 40rem;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #000000;
    border-radius: 0.6rem;
}

.scanner-viewport video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scanner-reticle {
    position: absolute;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 0.6rem;
    pointer-events: none;
}

.scanner-status {
    margin-top: 2rem;
}

@media screen and (max-width: 767px) {
    .scanner-container {
        padding: 4rem 3rem;
    }
}

/* Selection ----------------------- */
::-moz-selection {
    background: #000000;
    color: #FFFFFF;
}

::selection {
    background: #000000;
    color: #FFFFFF;
}