/* /portfolio — project journey (Swiper timeline). Uses site.css tokens only. */
.pf-stats-sec{padding-block:2.5rem var(--rb-section-y-tight)}
.pf-journey{padding-top:var(--rb-section-y-tight)}
.pf-stats{margin-top:0}
.pf-stats__note{margin-top:1rem;text-align:center;color:var(--rb-muted)}

/* ===== timeline rail ===== */
.pf-rail{position:relative;margin-top:2.75rem;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent)}
.pf-rail::-webkit-scrollbar{display:none}
.pf-rail__list{position:relative;display:flex;width:max-content;min-width:100%;justify-content:center;padding-inline:2.5rem}
.pf-rail__list::before,.pf-rail__list::after{content:"";position:absolute;top:2.05rem;height:2px;border-radius:2px;pointer-events:none}
.pf-rail__list::before{inset-inline:2.5rem;background:var(--rb-line)}
.pf-rail__list::after{inset-inline-start:2.5rem;width:var(--pf-p,0px);background:var(--rb-grad-text);transition:width .6s var(--rb-ease-out)}
.pf-rail__item{display:flex;flex-direction:column;align-items:center;gap:.45rem;width:7.25rem;padding:.25rem .25rem .5rem;border:0;border-radius:var(--rb-radius-sm);background:none;color:var(--rb-muted);cursor:pointer;font-size:.8rem;line-height:1.3}
.pf-rail__date{font-size:.72rem;font-weight:700;letter-spacing:.02em}
.pf-rail__dot{position:relative;z-index:1;width:.8rem;height:.8rem;border:2px solid var(--rb-line-strong);border-radius:50%;background:#fff;transition:background-color var(--rb-dur-mid),border-color var(--rb-dur-mid),box-shadow var(--rb-dur-mid),transform var(--rb-dur-mid) var(--rb-ease-spring)}
.pf-rail__name{display:-webkit-box;max-width:6.75rem;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-weight:600;color:var(--rb-ink-2);text-align:center}
.pf-rail__item:hover .pf-rail__dot{border-color:var(--rb-accent)}
.pf-rail__item:hover .pf-rail__name{color:var(--rb-accent)}
.pf-rail__item[aria-current="true"] .pf-rail__dot{border-color:var(--rb-accent);background:var(--rb-accent);box-shadow:0 0 0 5px rgb(var(--rb-accent-rgb) / .16);transform:scale(1.15)}
.pf-rail__item[aria-current="true"] .pf-rail__name{color:var(--rb-accent-deep);font-weight:800}
.pf-rail__item[aria-current="true"] .pf-rail__date{color:var(--rb-accent)}

/* ===== controls ===== */
.pf-ctrl{display:flex;align-items:center;justify-content:center;gap:1rem;margin-block:1.25rem 1.5rem}
.pf-ctrl__btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--rb-line-strong);border-radius:50%;background:#fff;color:var(--rb-ink);cursor:pointer;box-shadow:var(--rb-shadow-card);transition:border-color var(--rb-dur),color var(--rb-dur),transform var(--rb-dur) var(--rb-ease-spring)}
.pf-ctrl__btn:hover{border-color:var(--rb-accent);color:var(--rb-accent);transform:translateY(-1px)}
.pf-ctrl__btn:disabled{opacity:.35;cursor:default;transform:none}
.pf-ctrl__btn svg{width:1.15rem;height:1.15rem}
.pf-ctrl__count{min-width:4.5rem;font-size:.95rem;font-weight:700;color:var(--rb-muted);text-align:center}
.pf-ctrl__cur{color:var(--rb-ink)}
.rb-no-js .pf-ctrl{display:none}

/* ===== slides ===== */
.pf-swiper{overflow:hidden;padding-bottom:.5rem}
.rb-no-js .pf-swiper .swiper-wrapper{display:grid;gap:2rem}
.pf-slide{height:auto}
.pf-card{display:grid;gap:2rem;padding:1.25rem;border:1px solid var(--rb-line);border-radius:var(--rb-radius-2xl);background:#fff;box-shadow:var(--rb-shadow-card);grid-template-areas:"stage" "info" "story" "chat"}
.pf-card > *{min-width:0}
@media (min-width:640px){.pf-card{padding:2rem}}
@media (min-width:1024px){.pf-card{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"stage info" "story chat";column-gap:3rem;row-gap:2.5rem;padding:2.5rem}}
.pf-card__stage{grid-area:stage}
.pf-card__info{grid-area:info;display:flex;flex-direction:column;align-items:flex-start}
.pf-card__story{grid-area:story}
.pf-card__chat{grid-area:chat}

/* device stage */
.pf-stage{position:relative;padding-inline-end:clamp(2.5rem,9%,5rem);padding-bottom:1.75rem}
.pf-browser{overflow:hidden;border:1px solid var(--rb-line);border-radius:var(--rb-radius-lg);background:var(--rb-surface-2);box-shadow:var(--rb-shadow-device)}
.pf-browser__bar{display:flex;align-items:center;gap:.375rem;padding:.55rem .85rem;border-bottom:1px solid var(--rb-line);background:var(--rb-surface-2)}
.pf-browser__url{flex:1;min-width:0;margin-inline-start:.6rem;padding:.2rem .75rem;overflow:hidden;border-radius:var(--rb-radius-pill);background:#fff;color:var(--rb-muted);font-size:.72rem;font-weight:600;line-height:1.4;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:start}
.pf-browser__shot,.pf-phone__shot{width:100%;height:auto;transition:opacity .25s var(--rb-ease-std)}
.pf-browser__shot{aspect-ratio:960/600;object-fit:cover;object-position:top;background:var(--rb-grad-media)}
.pf-browser__empty{display:grid;place-items:center;aspect-ratio:960/600;color:var(--rb-muted);background:var(--rb-grad-media)}
.pf-phone{position:absolute;inset-inline-end:0;bottom:0;width:clamp(5.75rem,24%,9.75rem);overflow:hidden;border:5px solid var(--rb-ink);border-radius:1.5rem;background:var(--rb-ink);box-shadow:var(--rb-shadow-device)}
.pf-phone__notch{position:absolute;top:.3rem;left:50%;z-index:1;width:32%;height:.45rem;border-radius:var(--rb-radius-pill);background:var(--rb-ink);transform:translateX(-50%)}
.pf-phone__shot{display:block;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:1.1rem;background:var(--rb-grad-media)}
.pf-card.is-swapping :is(.pf-browser__shot,.pf-phone__shot){opacity:.25}

/* language switcher */
.pf-langs{margin-top:1.25rem}
.pf-langs__label{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;color:var(--rb-accent-deep)}
.pf-langs__list{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.6rem}
.pf-lang{display:inline-flex;align-items:center;min-height:2rem;padding:.4rem .8rem;border:1px solid var(--rb-line-strong);border-radius:var(--rb-radius-pill);background:#fff;color:var(--rb-ink-2);font-size:.8rem;font-weight:600;line-height:1.15;white-space:nowrap;cursor:pointer;transition:border-color var(--rb-dur-fast),background-color var(--rb-dur-fast),color var(--rb-dur-fast)}
.pf-lang:hover{border-color:var(--rb-accent);color:var(--rb-accent)}
.pf-lang[aria-pressed="true"]{border-color:var(--rb-accent);background:var(--rb-accent);color:#fff}

/* info */
.pf-date{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-size:.9rem;font-weight:700;color:var(--rb-muted)}
.pf-name{margin-top:.75rem;font-size:clamp(1.55rem,1.2rem + 1.2vw,2.15rem);font-weight:800;line-height:1.2;color:var(--rb-ink)}
.pf-tagline{margin-top:.5rem;font-size:1.05rem;line-height:1.55;color:var(--rb-ink-2)}
.pf-meta{display:grid;gap:.5rem;width:100%;margin-top:1.25rem;padding:.9rem 1rem;border:1px solid var(--rb-line);border-radius:var(--rb-radius-md);background:var(--rb-surface)}
.pf-meta > div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem}
.pf-meta dt{font-size:.8rem;font-weight:700;color:var(--rb-muted)}
.pf-meta dd{margin:0;font-size:.92rem;font-weight:700;color:var(--rb-ink)}
.pf-meta__days{display:inline-flex;align-items:center;margin-inline-start:.35rem;padding:.2rem .55rem;border-radius:var(--rb-radius-pill);background:var(--rb-accent-soft);color:var(--rb-accent-deep);font-size:.75rem;line-height:1.2}
.pf-highlight{display:flex;align-items:flex-start;gap:.5rem;width:100%;margin-top:1rem;padding:.8rem 1rem;border-radius:var(--rb-radius-md);background:linear-gradient(100deg,var(--rb-accent-soft),#FBEFFA);color:var(--rb-accent-deep);font-weight:700;line-height:1.45}
.pf-highlight svg{margin-top:.2em;color:var(--rb-orchid)}
.pf-feats{display:grid;gap:.55rem;margin-top:1.25rem}
.pf-feats li{display:flex;align-items:flex-start;gap:.55rem;font-size:.95rem;line-height:1.5;color:var(--rb-ink-2)}
.pf-feats svg{margin-top:.25em;color:var(--rb-accent)}
.pf-visit{margin-top:1.5rem}

/* story */
.pf-sub{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.95rem;font-weight:800;color:var(--rb-ink)}
.pf-steps{position:relative;display:grid;gap:1.1rem;margin-top:1.1rem;padding-inline-start:1.6rem}
.pf-steps::before{content:"";position:absolute;inset-inline-start:.38rem;top:.5rem;bottom:.5rem;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--rb-accent),var(--rb-orchid) 60%,var(--rb-line))}
.pf-step{position:relative}
.pf-step__dot{position:absolute;inset-inline-start:-1.6rem;top:.3rem;width:.8rem;height:.8rem;border:2px solid var(--rb-accent);border-radius:50%;background:#fff}
.pf-step--launch .pf-step__dot{background:var(--rb-accent);box-shadow:0 0 0 4px rgb(var(--rb-accent-rgb) / .18)}
.pf-step--aftercare .pf-step__dot{border-color:var(--rb-mint-deep);background:var(--rb-mint)}
.pf-step__date{font-size:.75rem;font-weight:700;color:var(--rb-muted)}
.pf-step__title{margin-top:.1rem;font-weight:800;color:var(--rb-ink)}
.pf-step__text{margin-top:.15rem;font-size:.9rem;line-height:1.55;color:var(--rb-ink-2)}

/* chat (messenger thread, anonymized roles) */
.pf-chat{margin-top:1.1rem;padding:.9rem;border-radius:var(--rb-radius-xl);background:linear-gradient(180deg,#EFEAFA,#F6F2FC)}
.pf-chat__head{display:flex;align-items:center;gap:.45rem;margin:-.1rem .1rem .9rem;padding-bottom:.7rem;border-bottom:1px solid rgb(var(--rb-accent-rgb) / .12);font-size:.8rem;font-weight:700;color:var(--rb-accent-deep)}
.pf-chat__list{display:flex;flex-direction:column;gap:.8rem}
.pf-msg{display:grid;max-width:88%;column-gap:.4rem;row-gap:.2rem;align-items:end}
.pf-msg--h{align-self:flex-start;grid-template-columns:minmax(0,auto) auto;grid-template-areas:"who who" "bubble time"}
.pf-msg--r{align-self:flex-end;grid-template-columns:auto minmax(0,auto);grid-template-areas:"who who" "time bubble"}
.pf-msg__who{grid-area:who;font-size:.72rem;font-weight:700;color:var(--rb-muted)}
.pf-msg--r .pf-msg__who{text-align:end;color:var(--rb-accent-deep)}
.pf-msg__bubble{grid-area:bubble;padding:.6rem .85rem;border-radius:1.1rem;font-size:.9rem;line-height:1.5;overflow-wrap:anywhere;box-shadow:0 1px 2px rgb(24 21 35 / .06)}
.pf-msg--h .pf-msg__bubble{border-start-start-radius:.3rem;background:#fff;color:var(--rb-ink)}
.pf-msg--r .pf-msg__bubble{border-start-end-radius:.3rem;background:var(--rb-accent);color:#fff}
.pf-msg__time{grid-area:time;font-size:.68rem;color:var(--rb-muted);white-space:nowrap}
.pf-chat__note{margin-top:.6rem;font-size:.75rem;color:var(--rb-muted)}
.pf-tr{font-size:.7rem}

/* languages section */
.pf-langsec .rb-hbar.is-accent .rb-hbar__label{color:var(--rb-accent-deep);font-weight:800}

/* motion on slide change (only when the visitor allows motion) */
@media (prefers-reduced-motion:no-preference){
  .rb-js .swiper-slide-active .pf-stage{animation:pf-stage .7s var(--rb-ease-out) both}
  .rb-js .swiper-slide-active .pf-phone{animation:pf-phone .8s var(--rb-ease-spring) .15s both}
  .rb-js .swiper-slide-active .pf-step{animation:pf-rise .5s var(--rb-ease-out) both;animation-delay:calc(.2s + var(--i,0) * .08s)}
  .rb-js .swiper-slide-active .pf-msg{animation:pf-pop .45s var(--rb-ease-out) both;animation-delay:calc(.35s + var(--i,0) * .22s)}
}
@keyframes pf-stage{from{opacity:.4;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes pf-phone{from{opacity:0;transform:translate3d(0,24px,0) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes pf-rise{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes pf-pop{from{opacity:0;transform:translate3d(0,8px,0) scale(.96)}to{opacity:1;transform:none}}

/* rounded boxes: equal ink space above / below the text (measured after render; Hangul / CJK glyphs sit high) */
:is(.pf-date,.pf-sub) .rb-tag{padding-top:calc(.25rem + 1px);padding-bottom:calc(.25rem - 1px)}
.pf-lang:lang(ko){padding-top:calc(.4rem + 1px);padding-bottom:calc(.4rem - 1px)}
.pf-highlight:is(:lang(ja),:lang(zh-cn),:lang(zh-tw)){padding-block:.9rem .7rem}