/* L-1 ② 체류 중 관광: an Instagram-like feed inside the section's two big photo frames.
   Frame 1 (wide): F-1 post cards over the Han River photo, one card in front, moving on by itself (fp.js).
   Frame 2 (tall): F-3 profile phone on mint with polaroids around it.
   Photos in the user's order: LANDMARK, CAFE, K-BEAUTY, FOOD, K-POP (K-POP is our own collage graphic).
   Everything inside a frame is sized from the frame itself (container units), so the canvas, a scrolling window and
   a phone all show the same composition. The strip's own motion (slide + blur-in) is untouched. */

.kf-wide, .kf-tall { container-type: size; }
/* l1.css stretches every <img> in a frame over the whole frame; inside the feed images take their own boxes */
.l1-photo .kf1 img, .l1-photo .kf3 img { position: static; inset: auto; display: block; width: 100%; height: auto; max-width: none; object-fit: cover; transition: none; scale: none; }

/* ---------- frame 1: post cards ---------- */
.kf1 {
  --u: min(calc(100cqh / 720), calc(100cqw / 560));
  --fp-x1: calc(252 * var(--u)); --fp-x2: calc(444 * var(--u));
  position: absolute; inset: 0; z-index: 2;
}
.kf1__stage { position: absolute; inset: 0; }
.kf1 .fp-post {
  position: absolute; left: 50%; top: calc(50% - 240 * var(--u)); box-sizing: border-box;
  width: calc(300 * var(--u)); margin-left: calc(-150 * var(--u)); padding: calc(11 * var(--u)) calc(11 * var(--u)) calc(14 * var(--u));
  border-radius: calc(26 * var(--u)); background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 calc(34 * var(--u)) calc(60 * var(--u)) calc(-28 * var(--u)) rgba(6, 30, 26, 0.6);
  transform-origin: 50% 100%;
  transform: translateX(var(--cx, 0px)) translateY(var(--cy, 0px)) scale(var(--cs, 1)) rotate(var(--cr, 0deg));
  z-index: var(--cz, 1); opacity: var(--co, 1);
  transition: transform 0.8s var(--l-ease), opacity 0.5s ease;
  cursor: pointer; color: var(--l-ink); font-family: var(--l-sans);
}
.kf1 .fp-post:focus-visible { outline: 3px solid var(--l-mint); outline-offset: 3px; }
.kf-ph { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: calc(16 * var(--u)); background: var(--l-mint-shape); }
.l1-photo .kf-ph img, .l1-photo .kf-ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kf-cat {
  position: absolute; left: calc(11 * var(--u)); bottom: calc(11 * var(--u)); z-index: 2;
  display: inline-flex; align-items: center; gap: calc(5 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(11 * var(--u)) 0 calc(8 * var(--u));
  border-radius: 999px; background: #ffffff; color: var(--l-deep);
  font: 700 calc(11.5 * var(--u))/1 var(--l-display); letter-spacing: 0.03em; white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgba(14, 84, 70, 0.55);
}
.kf-cat svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); fill: none; stroke: var(--l-orange); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kf-act { display: flex; align-items: center; gap: calc(13 * var(--u)); padding: calc(12 * var(--u)) calc(3 * var(--u)) calc(6 * var(--u)); }
.kf-act .kf-save { margin-left: auto; display: flex; }
.kf-ic { width: calc(21 * var(--u)); height: calc(21 * var(--u)); flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kf-ic--on { fill: var(--l-orange); stroke: var(--l-orange); }
.kf-cap { margin: 0; padding: 0 calc(3 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-cap b { margin-right: calc(5 * var(--u)); font-weight: 700; color: var(--l-deep); }
.kf-tags { margin: calc(2 * var(--u)) 0 0; padding: 0 calc(3 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.45; font-weight: 600; color: var(--l-sky-strong); white-space: nowrap; overflow: hidden; }

.kf1__chips {
  position: absolute; left: 0; right: 0; bottom: calc(22 * var(--u)); z-index: 12; width: max-content; margin-inline: auto;
  display: flex; gap: calc(8 * var(--u)); padding: calc(5 * var(--u)); border-radius: 999px;
  background: rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.kf1 .fp-chip {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(5 * var(--u));
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--l-deep);
  font: 700 calc(12 * var(--u))/1 var(--l-display); letter-spacing: 0.03em; white-space: nowrap;
  cursor: pointer; transition: background 0.3s ease, color 0.3s ease;
}
.l1-photo .kf1 .fp-chip img { width: calc(28 * var(--u)); height: calc(28 * var(--u)); object-fit: contain; }
.kf1 .fp-chip.is-on { background: var(--l-deep); color: #ffffff; }
.kf1 .fp-chip:focus-visible { outline: 3px solid var(--l-mint); outline-offset: 2px; }
@container (max-width: 640px) {
  .kf1 .fp-chip { padding: 0 calc(5 * var(--u)); }
  .kf1 .fp-chip span { display: none; }
  .kf-wide .l1-photo__cap { display: none; }
}

/* ---------- frame 2: the profile phone on mint ---------- */
.l1-photo.kf-tall {
  background:
    radial-gradient(60% 40% at 50% 36%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #dcf5ee 0%, #e9f6f6 60%, #e4eefc 100%);
}
.l1-photo.kf-tall::after { display: none; }
.kf3 { --v: min(calc(100cqh / 760), calc(100cqw / 600)); position: absolute; inset: 0; font-family: var(--l-sans); }
@container (max-width: 480px) { .kf3 { --v: min(calc(100cqh / 690), calc(100cqw / 340)); } }
.kf3__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 100%); }

.kf3__pol {
  position: absolute; z-index: 1; margin: 0; box-sizing: border-box; width: calc(150 * var(--v));
  padding: calc(8 * var(--v)) calc(8 * var(--v)) calc(32 * var(--v)); border-radius: calc(5 * var(--v)); background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 calc(24 * var(--v)) calc(36 * var(--v)) calc(-20 * var(--v)) rgba(14, 60, 50, 0.45);
  transform: rotate(var(--r, 0deg));
}
.l1-photo .kf3__pol img { aspect-ratio: 4 / 5; border-radius: calc(3 * var(--v)); }
.kf3__pol figcaption { position: absolute; left: 0; right: 0; bottom: calc(10 * var(--v)); display: flex; justify-content: center; align-items: baseline; gap: calc(5 * var(--v)); white-space: nowrap; }
.kf3__pol figcaption b { font: 700 calc(12 * var(--v))/1 var(--l-display); letter-spacing: 0.03em; color: var(--l-deep); }
.kf3__pol figcaption span { font-size: calc(9.5 * var(--v)); color: var(--l-ink-3); }
.l1-photo .kf3 img.kf3__prop { position: absolute; z-index: 5; height: auto; pointer-events: none; filter: drop-shadow(0 calc(12 * var(--v)) calc(12 * var(--v)) rgba(10, 40, 34, 0.16)); }

.kf3__phone {
  position: absolute; left: 50%; top: 50%; z-index: 3; box-sizing: border-box;
  width: calc(300 * var(--v)); height: calc(632 * var(--v)); padding: calc(10 * var(--v));
  border-radius: calc(50 * var(--v)); background: linear-gradient(145deg, #1c2a48 0%, #0d1830 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14), 0 calc(46 * var(--v)) calc(84 * var(--v)) calc(-38 * var(--v)) rgba(14, 40, 80, 0.55), 0 calc(16 * var(--v)) calc(28 * var(--v)) calc(-16 * var(--v)) rgba(14, 40, 80, 0.4);
  transform: translate(-50%, -50%) rotate(-4deg);
}
.kf3__screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(40 * var(--v)); background: #ffffff; color: var(--l-ink); font-family: var(--l-ui); }
.kf3__island { position: absolute; left: 50%; top: calc(9 * var(--v)); z-index: 2; width: calc(84 * var(--v)); height: calc(24 * var(--v)); margin-left: calc(-42 * var(--v)); border-radius: calc(18 * var(--v)); background: #0d1830; }
.kf3__status { display: flex; justify-content: space-between; align-items: center; height: calc(42 * var(--v)); padding: calc(6 * var(--v)) calc(24 * var(--v)) 0 calc(27 * var(--v)); font-size: calc(12 * var(--v)); font-weight: 600; }
.kf3__status i { position: relative; display: inline-block; width: calc(20 * var(--v)); height: calc(9 * var(--v)); border: calc(1.4 * var(--v)) solid var(--l-ink); border-radius: calc(3 * var(--v)); }
.kf3__status i::after { content: ""; position: absolute; inset: calc(1 * var(--v)) calc(4 * var(--v)) calc(1 * var(--v)) calc(1 * var(--v)); border-radius: 1px; background: var(--l-ink); }
.kf3__nav { display: flex; align-items: center; gap: calc(4 * var(--v)); height: calc(36 * var(--v)); padding: 0 calc(14 * var(--v)); font-size: calc(15.5 * var(--v)); font-weight: 700; }
.kf3__nav .kf3__navr { margin-left: auto; display: flex; gap: calc(14 * var(--v)); }
.kf3 .kf-ic { width: calc(18 * var(--v)); height: calc(18 * var(--v)); }
.kf3__prof { display: flex; align-items: center; gap: calc(12 * var(--v)); padding: calc(4 * var(--v)) calc(14 * var(--v)) 0; }
.kf3__ring { flex: none; box-sizing: border-box; width: calc(68 * var(--v)); height: calc(68 * var(--v)); padding: calc(3 * var(--v)); border-radius: 50%; background: linear-gradient(135deg, var(--l-mint) 0%, var(--l-teal) 45%, var(--l-sky) 100%); }
.kf3__ring span { display: grid; place-items: center; box-sizing: border-box; width: 100%; height: 100%; border: calc(3 * var(--v)) solid #ffffff; border-radius: 50%; background: var(--l-deep); color: #ffffff; font: 700 calc(18 * var(--v))/1 var(--l-display); letter-spacing: 0.02em; }
.kf3__ring span { background: #ffffff; }
.l1-photo .kf3 .kf3__ring img { width: 80%; height: auto; }
.kf3__who b { display: block; font-size: calc(13.5 * var(--v)); }
.kf3__who small { display: block; margin-top: calc(3 * var(--v)); font-size: calc(10.5 * var(--v)); color: var(--l-ink-3); }
.kf3__bio { margin: calc(8 * var(--v)) calc(14 * var(--v)) 0; font-size: calc(11.2 * var(--v)); line-height: 1.5; }
.kf3__bio span { display: block; font-weight: 600; letter-spacing: 0.01em; color: var(--l-sky-strong); text-wrap: balance; }
.kf3__btns { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6 * var(--v)); margin: calc(9 * var(--v)) calc(14 * var(--v)) 0; }
.kf3__btns span { display: grid; place-items: center; height: calc(27 * var(--v)); border-radius: calc(8 * var(--v)); background: var(--l-cell); font-size: calc(11.2 * var(--v)); font-weight: 600; }
.kf3__btns span:first-child { background: var(--l-deep); color: #ffffff; }
.kf3__hl { display: flex; gap: calc(8 * var(--v)); padding: calc(10 * var(--v)) calc(14 * var(--v)) 0; }
.kf3__hl figure { flex: none; width: calc(44 * var(--v)); margin: 0; text-align: center; }
.kf3__hl figure > span { display: block; box-sizing: border-box; width: calc(44 * var(--v)); height: calc(44 * var(--v)); padding: calc(2 * var(--v)); border: calc(1.4 * var(--v)) solid var(--l-line); border-radius: 50%; background: #ffffff; }
.l1-photo .kf3__hl img { width: 100%; height: 100%; border-radius: 50%; }
.kf3__hl figure > span:empty { background: #eef5f2; border-color: #e3eeea; }
.kf3__hl figcaption { margin-top: calc(4 * var(--v)); font: 600 calc(8.2 * var(--v))/1 var(--l-display); letter-spacing: 0.01em; color: var(--l-ink-2); white-space: nowrap; }
.kf3__tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: calc(10 * var(--v)); border-bottom: 1px solid var(--l-line); color: var(--l-ink-3); }
.kf3__tabs span { display: grid; place-items: center; height: calc(31 * var(--v)); }
.kf3__tabs span:first-child { color: var(--l-ink); box-shadow: inset 0 calc(-1.5 * var(--v)) 0 var(--l-ink); }
.kf3__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(2 * var(--v)); }
.l1-photo .kf3__grid img, .kf3__grid i { aspect-ratio: 4 / 5; }
.kf3__grid i { display: block; background: #f1f6f4; }
.kf3__bar {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; align-items: center;
  height: calc(52 * var(--v)); padding-bottom: calc(7 * var(--v)); background: rgba(255, 255, 255, 0.95); border-top: 1px solid var(--l-line);
}
.kf3__bar .kf-ic { width: calc(20 * var(--v)); height: calc(20 * var(--v)); }
.l1-photo .kf3 .kf3__me img { width: 86%; height: auto; }
.kf3__me { display: grid; place-items: center; overflow: hidden; width: calc(22 * var(--v)); height: calc(22 * var(--v)); border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 calc(1.4 * var(--v)) #ffffff, 0 0 0 calc(2.8 * var(--v)) var(--l-ink); }

/* ---------- motion: the cards, chips, phone and polaroids come in the way the chat bubbles did ---------- */
@supports (animation-timeline: view()) {
  html[data-l1-motion="on"] .kf1__stage { animation: l1-bubble-in linear both; animation-timeline: --l1-strip; animation-range: entry 40% entry 85%; }
  html[data-l1-motion="on"] .kf1__chips { animation: l1-bubble-in linear both; animation-timeline: --l1-strip; animation-range: entry 70% entry 100%; }
  html[data-l1-motion="on"] .kf3__phone { animation: kf-phone-in linear both; animation-timeline: --l1-strip; animation-range: entry 50% entry 95%; }
  html[data-l1-motion="on"] .kf3__pol, html[data-l1-motion="on"] .l1-photo .kf3 img.kf3__prop { animation: l1-bubble-in linear both; animation-timeline: --l1-strip; animation-range: entry 65% contain 6%; }
}
@keyframes kf-phone-in { from { opacity: 0; translate: 0 56px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 767px) {
  .l1-strip .l1-photo--wide.kf-wide { height: 500px; }
  .l1-strip .l1-photo--tall.kf-tall { height: 600px; }
}
@media (prefers-reduced-motion: reduce) {
  .kf1 .fp-post { transition: none; }
}