/* A wedding journal with a light webtoon rhythm. No animation library required. */
.wedding-story{--story-ink:#354334;--story-rose:#f3dcd5;--story-paper:#fffdf7}
.wedding-story .hero{isolation:isolate}
.wedding-story .scroll-progress{display:block}
.wedding-story .hero-photo{border:1px solid #52604a;box-shadow:7px 8px 0 #e3e7da;transform-origin:center}
.story-scroll-link:focus-visible,.story-next-link:focus-visible{outline:3px solid #7b8968;outline-offset:6px}
.story-highlight{position:relative;width:fit-content;isolation:isolate}
.story-highlight:after{content:"";position:absolute;left:1%;right:0;bottom:.05em;height:.24em;z-index:-1;background:var(--story-rose);transform:rotate(-1deg);transform-origin:left}
.story-scroll-link{display:flex;align-items:center;gap:12px;width:fit-content;margin-top:38px;padding-block:8px;color:#58634f;font-size:.875rem;line-height:1.7}
.scroll-line{display:block;width:32px;height:1px;background:currentColor;transform-origin:left}
.wedding-story .first-consultation{background:#f4f3eb;overflow:visible;padding-block:88px}
.wedding-story .consultation-intro{grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:80px}
.story-intro{position:sticky;top:110px;align-self:start;min-width:0;padding-left:8px}
.story-kicker{display:flex;align-items:center;gap:11px;color:#657259;font-size:.75rem;font-weight:600;letter-spacing:.12em;margin:0 0 22px;line-height:1.6}
.story-kicker>span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #7c876d;border-radius:50%;letter-spacing:0;background:#fffdf7}
.wedding-story .consultation-intro h2{font-size:clamp(30px,3.2vw,44px);line-height:1.45}
.wedding-story .consult-short-intro{margin-bottom:0}
.consult-story-art{position:relative;margin:25px 0 0;border:1px solid #66715b;background:#faf7f0;border-radius:7px;box-shadow:4px 5px 0 #dfe3d4;overflow:hidden}
.consult-story-art img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;display:block}
.wedding-story .consult-visual-grid{display:flex;flex-direction:column;gap:30px;padding:8px 8px 8px 0;list-style:none;counter-reset:scene}
.wedding-story .consult-visual-grid .story-panel{position:relative;padding:23px 26px 26px;margin:0;border:1.5px solid #617055;border-radius:7px;background:var(--story-paper);box-shadow:5px 6px 0 #d9dfce;scroll-margin-top:120px;min-width:0}
.wedding-story .story-panel:nth-child(even){margin-left:24px;background:#f9efeb;box-shadow:5px 6px 0 #e7d6cf}
.story-panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:15px}
.story-scene-label{font-size:.75rem;letter-spacing:.12em;font-weight:600;color:#627253}
.story-scene-dot{width:8px;height:8px;border-radius:50%;border:1px solid #88967b;background:transparent}
.story-panel.is-current .story-scene-dot{background:#657953;box-shadow:0 0 0 4px #e3e9d9}
.wedding-story .story-panel .scene-prompt{margin:0 0 18px;color:#59684e;font-size:.9375rem;font-weight:400;line-height:1.7}
.wedding-story .story-panel .consult-visual-icon{float:right;margin:0 0 12px 15px;width:48px;height:48px;border:1px solid #c3cdb7;background:transparent}
.wedding-story .story-panel h3{font-size:1.25rem;line-height:1.55;font-weight:600;word-break:keep-all}
.wedding-story .story-panel p:not(.scene-prompt){font-size:.9375rem;line-height:1.75;margin-top:9px;color:#647059;word-break:keep-all}
.story-panel:after{content:"";display:table;clear:both}
.story-next-link{display:inline-flex;gap:20px;align-items:center;margin-top:23px;padding-bottom:4px;border-bottom:1px solid #8f9c7f;font-size:.9375rem;font-weight:500;color:#3e4e32}
.wedding-story .service-card .photo{position:relative;border:1px solid #7e8872;box-shadow:4px 5px 0 #e1e5d9;overflow:hidden}
.wedding-story .service-card h3{margin-top:22px}
.wedding-story .about img{border-radius:45% 45% 4px 4px;border:1px solid #76816a;box-shadow:5px 6px 0 #e1e5d9}
.wedding-story .consultation-bottom{margin-top:46px}
@media(prefers-reduced-motion:no-preference){
  .wedding-story .story-highlight:after{animation:highlight-draw 1s .3s both}
  .story-scroll-link>span:last-child{animation:scroll-nudge 1.4s 1.5s 3}
  .story-motion .story-panel{transition:opacity .65s,transform .7s cubic-bezier(.2,.75,.2,1),box-shadow .4s,border-color .4s}
  .story-motion .story-panel:not(.is-revealed){opacity:0;transform:translateY(32px) rotate(-1.5deg)}
  .story-motion .story-panel:nth-child(even):not(.is-revealed){transform:translateY(32px) rotate(1.5deg)}
  .story-panel.is-current{border-color:#354b2a;box-shadow:7px 8px 0 #cdd7bf}
  @media(hover:hover) and (pointer:fine) and (min-width:901px){
    .wedding-story .hero-photo{transform:perspective(1100px) rotateX(var(--photo-rx,0deg)) rotateY(var(--photo-ry,0deg));transition:transform .3s ease-out,box-shadow .3s}
    .wedding-story .hero-photo:hover{box-shadow:11px 14px 0 #dde3d2}
  }
}
@keyframes highlight-draw{from{transform:rotate(-1deg) scaleX(0)}to{transform:rotate(-1deg) scaleX(1)}}
@keyframes scroll-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(max-width:1100px){.wedding-story .consultation-intro{gap:46px}.story-intro{top:105px}.wedding-story .story-panel h3{font-size:1.125rem}}
@media(min-width:901px) and (max-height:800px){.story-intro{position:static}}
@media(max-width:900px){
  .wedding-story .hero{margin-top:25px;margin-bottom:46px}
  .wedding-story .hero-photo{box-shadow:4px 5px 0 #e3e7da}
  .story-scroll-link{margin-top:20px;gap:10px;font-size:.875rem}
  .scroll-line{width:22px}
  .wedding-story .first-consultation{padding-block:52px}
  .wedding-story .consultation-intro{grid-template-columns:1fr;gap:30px}
  .story-intro{position:static}
  .story-kicker{margin-bottom:19px}
  .wedding-story .consultation-intro h2{font-size:32px}
  .consult-story-art{max-width:460px;margin-top:23px}
  .consult-story-art img{max-height:300px}
  .wedding-story .consult-visual-grid{gap:25px;padding-right:5px}
  .wedding-story .consult-visual-grid .story-panel{padding:19px 19px 23px;scroll-margin-top:94px}
  .wedding-story .story-panel:nth-child(even){margin-left:16px}
  .story-panel-top{margin-bottom:16px}
  .wedding-story .story-panel .consult-visual-icon{width:40px;height:40px;margin-left:10px}
  .wedding-story .story-panel .nuri-icon{width:22px;height:22px}
  .wedding-story .story-panel h3{font-size:1.125rem}
  .wedding-story .consultation-bottom{margin-top:32px}
  .wedding-story .service-grid{gap:35px}
}
@media(max-width:360px){.wedding-story .story-panel:nth-child(even){margin-left:9px}.wedding-story .consult-visual-grid .story-panel{padding-inline:15px}.wedding-story .story-panel .consult-visual-icon{float:none;margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){.wedding-story .hero-photo,.story-panel{animation:none!important;transition:none!important}.story-motion .story-panel:not(.is-revealed){opacity:1;transform:none}.story-highlight:after,.story-scroll-link>span:last-child{animation:none!important}}