/* root */
:root {
    --black: #000;
    --beige: #f6f4f2;
    --beige-dark: #eeebe7;
    --beige-dark-deep: #e2ded8;
    --white: #fff;

    --content-width: 420px;

    transition: background-color .31s ease-out;

    --safe-bottom: env(safe-area-inset-bottom, 0px); 
}

/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{ border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
ol,ul,li{ list-style: none; padding: 0; margin: 0; }

/* layout */
html, body { background: transparent; width: 100%; font-size: 16px; line-height: 1.6; letter-spacing: 0.048em; color: var(--black); margin: 0; padding: 0; font-family: 'Orbit', Arial, Helvetica, 'Pretendard', '애플SD 고딕네오', 'Apple SD Gothic Neo', '맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', sans-serif; word-break: keep-all; cursor: default; transition: background-color .31s ease-out; }
html.is-ios, html.is-ios body { overscroll-behavior-y: contain; }
body::before { content: ''; position: fixed; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.2); background: var(--beige-dark); z-index: 1; pointer-events: none; transition: background-color .31s ease-out; }
body.active-information::before { background: var(--beige-dark); }

.vv-lock { width: 100%; overscroll-behavior: none; }
body.active-timemachine #area-information .header { padding-bottom: calc(12px + var(--safe-bottom)); }

.paint-lock, .paint-lock body {overflow: hidden !important; }
.paint-lock #area-timemachine,
.paint-lock #area-information { pointer-events: none !important; }
.serif { font-family: 'Gowun Batang', 'Times New Roman', 'Times', 'Batang', Serif; }

::selection { color: var(--black); background: var(--beige-dark);}
* { box-sizing: border-box; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color: transparent; }
*:focus { outline: none; }

a,
button { cursor: pointer; text-decoration: none; transition: all 0.1s ease-out; border: 0; outline: none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color: transparent; background-color: transparent; }
a:hover,
button:hover { text-decoration: none; }
a:focus,
button:focus { outline: none; }

img { width: 100%; height: auto; max-width: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }

.pc-only { display: block; }
.mo-only { display: none !important; }

@media (max-width: 1024px) {
    body { font-size: 16px; }
    .pc-only { display: none !important; }
    .mo-only { display: block !important; }
}

/* typography */
.bold { font-weight: bold; }
.txt-h0,
.txt-h1,
.txt-h2,
.txt-h3,
.txt-h4,
.txt-h5 { line-height: 1.4; }

.txt-h0 { font-size: 40px; }
.txt-h1 { font-size: 30px; }
.txt-h2 { font-size: 28px }
.txt-h3 { font-size: 26px }
.txt-h4 { font-size: 24px }
.txt-h5 { font-size: 22px }

.txt-large { font-size: 20px; }
.txt-normal { font-size: 16px; }
.txt-small { font-size: 14px; }
.txt-xsmall { font-size: 12px; }

@media (max-width: 1024px) {
    .txt-h0 { font-size: 38px; }
    .txt-h1 { font-size: 28px; }
    .txt-h2 { font-size: 26px }
    .txt-h3 { font-size: 24px }
    .txt-h4 { font-size: 22px }
    .txt-h5 { font-size: 20px }

    .txt-large { font-size: 18px; }
    .txt-normal { font-size: 14px; }
    .txt-small { font-size: 12px; }
    .txt-xsmall { font-size: 10px; }

    .mo-txt-large { font-size: 18px !important; }
    .mo-txt-normal { font-size: 14px !important; }
    .mo-txt-small { font-size: 12px !important; }
    .mo-txt-xsmall { font-size: 10px !important; }
}

/* btn */
*[class^=btn] { display: inline-block; }

.btn-large { padding: 12px 16px; border-radius: 8px; }
.btn-medium { padding: 8px 12px; border-radius: 6px; }
.btn-small { padding: 4px 8px; border-radius: 4px; }

.btn-black { background: var(--black); color: #fff; }
.btn-black:hover { color: #eee; }
.btn-beige { background: var(--beige); color: var(--black); }
.btn-beige:hover { background: var(--beige-dark);  color: var(--black); }
.btn-white { background: #fff; color: var(--black); }
.btn-white:hover { background: var(--beige-dark); color: var(--black); }

@media (max-width: 1024px) {
    .btn-large { padding: 10px 14px; }
    .btn-medium { padding: 6px 10px; }
    .btn-small { padding: 2px 6px; }
}

/* bullet ul */
ul.bullet { padding: 4px 0; opacity: 0.9; }
ul.bullet li { position: relative; overflow: hidden; padding: 4px 0 4px 12px; line-height: 1.6; }
ul.bullet li::before { position: absolute; top: 17px; left: 0; content: ''; width: 2px; height: 2px; border-radius: 10px; background: var(--black); display: inline-block; }

@media (max-width: 1024px) {
    ul.bullet { padding: 2px 0; }
    ul.bullet li { padding: 3px 0 3px 10px; }
    ul.bullet li::before { top: 15px; }
}

/* container */
#container { position: relative; width: 100%; margin: 0 auto; padding: 0; max-width: var(--content-width); overflow: hidden; z-index: 2; }
/* #container::after { content: ''; position: absolute; width: 100%; height: 400px; bottom: 0; left: 0; transform: translateY(-399px); display: block; } */
#container-inner { position: relative; width: 100%; margin: 0; padding: 0; min-height: 100vh; overflow: hidden; }

@media (max-width: 1024px) {
    #container { }
}


/* type - iv-default */
body.iv-t0 {}

/* type - iv-1 */
body.iv-1 {}

/* type - iv-2 */
body.iv-2 {}

/* type - iv-specific */
body.iv-specific {  }


/* 
area-timeline 
*/
body.active-timemachine #area-timemachine { position: relative; cursor: default; z-index: 2; min-height: 100svh; }
@supports (min-height: 100dvh) {
  body.active-timemachine #area-timemachine { min-height: 100dvh; }
}
@supports (min-height: 100lvh) {
  body.active-timemachine #area-timemachine { min-height: 100lvh; }
}
body.active-information #area-timemachine { position: fixed; top: 0; left: 0; right: 0; height: 100vh; margin: 0 auto; cursor: pointer; z-index: 2; }
body.active-information #area-timemachine::after { opacity: 1; }

.area-timemachine-data { position: fixed; width: 100%; top: 12%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; transition: opacity .6s ease-out; z-index: 3; pointer-events: none; }
body.active-information .area-timemachine-data { opacity: 0.6; }
body.active-timemachine  .area-timemachine-data { opacity: 0.8; }

#area-timemachine { max-width: var(--content-width); margin: 0 auto; width: 100%; min-height: 2000px; transform-style: preserve-3d; isolation: isolate; transition: background-color .31s linear; }
#area-timemachine::after { opacity: 0; content: ''; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; margin: 0 auto; pointer-events: none; background: rgba(0, 0, 0, 0); transition: all 1.4s linear; }
#area-timemachine .area-timemachine-inner { position: relative; backface-visibility: hidden; will-change: transform; transform: translateZ(0); contain: layout paint style; }
#area-timemachine,
#area-timemachine .area-timemachine-inner { backface-visibility: hidden; touch-action: pan-y; }
#area-timemachine section { width: 100%; }

#area-timemachine .there-scene { display: flex; gap: 0; flex-direction: column; }
#area-timemachine .there-scene .img-wrap { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 100%; height: 100vh; max-height: 1200px; margin-top: 20px; }
#area-timemachine .there-scene .img-wrap img { display: block; width: 60%; min-width: 240px; padding: 20px; margin: 0 auto; }
#area-timemachine .there-scene .img-wrap img.vt { width: 80%; max-width: 320px; }
#area-timemachine .there-scene .img-wrap img.hr { width: 100%; min-width: 400px; }

/* 
area-information 
*/
body.active-information #area-information { position: relative; z-index: 4; background: rgba(255, 255, 255, 1);}
body.active-timemachine #area-information { position: fixed; top: 0; left: 0; right: 0; height: 100vh; margin: 0 auto; z-index: 4; }

#area-information { max-width: var(--content-width); backface-visibility: hidden; will-change: transform; transition: transform 3.2s ease-in-out; transform: translateZ(0); will-change: transform; contain: layout paint style; transform-style: preserve-3d; -webkit-font-smoothing: antialiased; margin: 40vh auto 0; border-radius: 20px 20px 0 0; box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.10); background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(8px); }
#area-information .area-information-inner { position: relative; }
#area-information section { width: 100%; }
#area-information section .section-title { display: flex; flex-direction: column; gap: 4px 0; text-align: center; }
#area-information section .section-title p span { display: inline-block; position: relative; }

@media only screen and (max-width: 1024px) {
    #area-information { margin: 40vh auto 0; }
}

/* area-information > header */
#area-information .header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; letter-spacing: 0.02em; overscroll-behavior: contain; touch-action: none; font-size: 13px; }
body.active-information #area-information .header { cursor: default; }
body.active-timemachine #area-information .header { cursor: pointer; position: sticky; top: 0; }
#area-information .header .d-day-clock { width: 40%; }
#area-information .header .toggle-btn { position: relative; width: 40px; height: 20px; padding: 6px 12px 8px; overflow: hidden; background: transparent; }
#area-information .header .toggle-btn::before,
#area-information .header .toggle-btn::after { content: ''; width: 40px; height: 11px; background: url(".././img/icons/ico-arrow-up.svg") center / auto 100% no-repeat; display: block; opacity: 1; animation: ti-opacity-pulse 2s ease-in-out infinite alternate; will-change: opacity, transform; position: absolute; top: 0px; left: 50%; transform: translate(-50%, 0); -webkit-mask: url(".././img/icons/ico-arrow-up.svg") center / auto 100% no-repeat; mask: url(".././img/icons/ico-arrow-up.svg") center / auto 100% no-repeat; background-color: var(--timeline-bg); }
#area-information .header .toggle-btn::after { top: 6px; }
body.active-information #area-information .header .toggle-btn::before,
body.active-information #area-information .header .toggle-btn::after { background-image: url(".././img/icons/ico-arrow-down.svg"); -webkit-mask-image: url(".././img/icons/ico-arrow-down.svg"); mask-image: url(".././img/icons/ico-arrow-down.svg"); }
#area-information .header .d-day-target { width: 40%; text-align: right; }

@keyframes ti-opacity-pulse { 
    0%   { opacity: 1;   transform: translate(-50%, 0); }
    50%  { opacity: 0.7; transform: translate(-50%, 2px); }
    100% { opacity: 1;   transform: translate(-50%, 0); }
}

@media only screen and (max-width: 1024px) {
    #area-information .header { font-size: 11px; }
}

/* area-information > intro */
#area-information .intro { display: flex; justify-content: space-between; align-items: center; padding: 36px 14px 48px; min-height: 320px; opacity: 1; transition: opacity 0.1s ease-in; }
body.active-timemachine #area-information .intro { opacity: 0;}
#area-information .intro .intro-pole { display: flex; align-items: center; gap: 0 4px; }
#area-information .intro .intro-pole p { display: block; word-break: break-all; writing-mode: vertical-lr; text-align: center; letter-spacing: 0.42em; opacity: 0.8; }
#area-information .intro .intro-pole p.txt-h2 {letter-spacing: 0.42em; opacity: 1; }
#area-information .intro .intro-img { width: 160px; max-width: 50%; }

/* area-information > letter */
#area-information .letter { display: flex; gap: 32px 0; justify-content: center; align-items: center; flex-direction: column; padding: 80px 32px; text-align: center; background: var(--beige); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; /* 수직 스크롤 허용, 수평/복합 제스처 억제 */ }
#area-information .letter .txt-h1 { letter-spacing: 0.04em;}
#area-information .letter .letter-inviter { display: inline-block; padding: 0 0 2px; margin-bottom: 4px; border-bottom: 1px solid; }
#area-information .letter .letter-inviter.disabled { display: none; }
#area-information .letter .letter-message { display: flex; gap: 12px 0; justify-content: center; flex-direction: column; line-height: 1.7; }
#area-information .letter .letter-img { width: 280px; max-width: 80%; margin-top: 20px; }

/* area-information > calendar */
#area-information .calendar { display: flex; gap: 24px 0; justify-content: center; flex-direction: column; padding: 80px 32px; }
#area-information .calendar .calendar-table { display: flex; gap: 0; flex-direction: column; text-align: center; padding: 6px 0; border-top: 1px solid var(--beige-dark); border-bottom: 1px solid var(--beige-dark); }
#area-information .calendar .calendar-table .row { display: flex; gap: 0; }
#area-information .calendar .calendar-table .row .cell { position: relative; display: flex; justify-content: center; align-items: center; flex: 1 0 0; padding: 6px 0; }
#area-information .calendar .calendar-table .row .cell.disabled { opacity: 0.25; }
#area-information .calendar .calendar-table .row .cell span { width: 26px; height: 26px; border-radius: 26px; display: flex; align-items: center; justify-content: center; }
#area-information .calendar .calendar-table .row .cell.birth span { background: var(--beige); cursor: pointer; }
#area-information .calendar .calendar-table .row .cell.wedding span { background: var(--black); color: var(--white); cursor: pointer; }
#area-information .calendar .calendar-table .row .cell span.toast { visibility: hidden; opacity: 0; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%); z-index: 3; width: auto; height: auto; padding: 4px 6px; border-radius: 6px; line-height: 1.4; pointer-events: none; transition: opacity 0.1s linear; }
#area-information .calendar .calendar-table .row .cell span.toast.on { visibility: visible; opacity: 1; }
#area-information .calendar .calendar-time { display: flex; gap: 4px 0; flex-direction: column; }
#area-information .calendar .calendar-time.disabled { display: none; }
#area-information .calendar .calendar-time .btn { display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
#area-information .calendar .calendar-time .btn.disabled { opacity: 0.25; background-color: transparent; color: var(--black); }
#area-information .calendar .calendar-time .btn span { width: 50%; text-align: center; display: flex; justify-content: center; align-items: center; gap: 0; }
#area-information .calendar .calendar-time .btn span > span { display: inline-block; text-align: left; padding-left: 6px; }
#area-information .calendar .calendar-notice.disabled { display: none; }
#area-information .calendar .calendar-notice .calendar-inviter { display: inline-block; }
#area-information .calendar .calendar-notice .calendar-inviter.disabled { display: none; }

@media only screen and (max-width: 1024px) {
    #area-information .calendar .calendar-table .row .cell { padding: 4px 0; }
}

/* area-information > location */
#area-information .location { display: flex; gap: 32px 0; justify-content: center; align-items: center; flex-direction: column; padding: 80px 32px; text-align: center; background: var(--beige); }
#area-information .location .section-title p span:last-child::after { content: ''; width: 12px; height: 12px; display: inline-block; position: absolute; top: 4px; right: -16px; background: url(".././img/icons/ico-copy.svg") left top / 96% auto no-repeat; }
#area-information .location .section-title .txt-h2 { cursor: pointer; }

#area-information .location .location-accordion { display: flex; gap: 8px 0; flex-direction: column; }
#area-information .location .location-accordion li { position: relative; width: 100%; text-align: left; }
#area-information .location .location-accordion li > a { display: flex; justify-content: space-between; align-items: center; position: relative; width: 100%; }
#area-information .location .location-accordion li > a::after { content: ''; width: 12px; height: 12px; display: inline-block; position: absolute; top: 50%; transform: translateY(-40%); right: 16px; background: url(".././img/icons/ico-external.svg") left top / 96% auto no-repeat; transition: all 0.3s ease-out; }
#area-information .location .location-accordion li > a.accordion-btn:hover { background: #fff; }
#area-information .location .location-accordion li > a.accordion-btn::after { background-image: url(".././img/icons/ico-direction-down.svg"); transform: translateY(-50%) rotate(180deg); }
#area-information .location .location-accordion li.on > a.accordion-btn { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
#area-information .location .location-accordion li.on > a.accordion-btn::after { transform: translateY(-40%) rotate(0deg); }
#area-information .location .location-accordion li .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.8s cubic-bezier(.2,.7,.2,1); will-change: max-height; padding: 6px 12px 0; margin-top: -6px; background: var(--white); border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; }
#area-information .location .location-accordion li.on .accordion-content { max-height: none; }
#area-information .location .location-accordion li .accordion-content img { margin: 18px auto; display: block; }
#area-information .location .location-accordion li .accordion-content .location-notice { margin: 20px auto; }
#area-information .location .location-accordion li .accordion-content .location-notice span { position: relative; display: inline-block; margin-right: 4px; border-bottom: 1px solid; padding-bottom: 1px; cursor: pointer; }
#area-information .location .location-accordion li .accordion-content .location-notice span::after { content: ''; width: 10px; height: 10px; display: inline-block; position: absolute; top: 4px; background: url(".././img/icons/ico-copy.svg") left top / 96% auto no-repeat; }

@media only screen and (max-width: 1024px) {
    #area-information .location .location-accordion li > a::after { right: 14px; }
}

/* area-information > gallery */
#area-information .gallery { position: relative; padding: 20px; }
#area-information .gallery .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
#area-information .gallery .gallery-grid li.full { grid-column: span 2; }
#area-information .gallery .gallery-grid li img { display: block; }

/* area-information > etc */
#area-information .etc { display: flex; gap: 12px 0; justify-content: center; align-items: center; flex-direction: column; position: relative; padding: 60px 32px 20px; background: var(--beige); }
body.iv-t1a #area-information .etc .etc-notice { margin-top: 12px; }
body.iv-t1a #area-information .etc .etc-notice li { padding-left: 12px; }
body.iv-t1a #area-information .etc .etc-notice li:first-child { background-color: #ffedb5; border-radius: 6px; }
body.iv-t1a #area-information .etc .etc-notice li::before { left: 4px; }
#area-information .etc .etc-btns { display: flex; flex-wrap: wrap; gap: 0; opacity: 0.9; }
#area-information .etc .etc-btns li { display: inline-flex; width: 50%; padding: 4px; }
#area-information .etc .etc-btns li button { position: relative; display: block; width: 100%; text-align: left; }
#area-information .etc .etc-btns li button::after { content: ''; width: 10px; height: 10px; display: inline-block; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: url(".././img/icons/ico-copy.svg") left top / 96% auto no-repeat; }
#area-information .etc .copyright { margin: 40px auto 0; opacity: 0.45; }