/* Mobile-only Illustrator outro and reusable HOLIDOT editorial spacing. */
@media (max-width:1180px) {
  /* Keep scrolling headings behind the menu after the white sheet reaches it. */
  .s03-fixed-bl.is-unlocked[data-current="services"]:not(.is-services):not(.is-film) {isolation:isolate;}
  .s03-fixed-bl.is-unlocked[data-current="services"]:not(.is-services):not(.is-film)::before {
    content:"";position:absolute;left:calc((100% - 100vw)/2);top:-18px;
    width:100vw;height:49px;background:#fff;z-index:-1;pointer-events:none;
  }
  .s03-services-area.is-mobile-service-flow .svc220-item { border-top-color:transparent; }
  .s03-services-area.is-mobile-service-flow .svc220-item::before {
    content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
    background:rgba(17,17,17,.3);transform:scaleX(0);transform-origin:left center;
  }
  .s03-services-area.is-mobile-service-flow .svc220-item.is-inview::before {
    animation:svc237-rule .46s cubic-bezier(.22,1,.36,1) both;
  }
  .svc237-word { display:inline-block;white-space:nowrap; }
  .svc237-title-char { display:inline-block;opacity:0;transform:translate3d(0,17px,0) skewY(-8deg) scaleY(1.2); }
  .svc220-item.is-inview .svc237-title-char {
    animation:svc237-title-warp .43s cubic-bezier(.19,1,.22,1) both;
    animation-delay:calc(var(--char-index) * 18ms);
  }
  .s03-services-area.is-mobile-service-flow .svc237-plus-entry {
    display:block;flex:none;transform:scale(.42) rotate(-40deg);
  }
  .s03-services-area.is-mobile-service-flow .svc220-item.is-inview .svc237-plus-entry {
    animation:svc237-plus-arrive .48s cubic-bezier(.18,1.2,.35,1) .08s both;
  }
  .s03-services-area.is-mobile-service-flow .svc217-outro {
    display:block;box-sizing:border-box;width:100%;min-height:0;padding:0;
    text-align:left;color:#111;animation:none!important;
  }
  .s03-services-area.is-mobile-service-flow .svc217-outro .svc237-frame {
    position:relative;display:block;max-width:100%;overflow:hidden;margin:0 auto;
  }
  .s03-services-area.is-mobile-service-flow .svc217-outro .svc237-canvas {
    position:absolute;left:0;top:0;box-sizing:border-box;width:393px;height:852px;
    background:#fff;transform-origin:top left;overflow:hidden;
    font-family:"Pretendard Variable",Pretendard,sans-serif;
    font-size:26.73px;font-weight:700;line-height:31.996px;letter-spacing:0;
    -webkit-text-size-adjust:none;text-size-adjust:none;
  }
  .s03-services-area.is-mobile-service-flow .svc217-outro .svc237-canvas span {
    width:auto;max-width:none;white-space:nowrap;transform:none;
  }
  .s03-services-area.is-mobile-service-flow .svc217-outro .svc237-canvas .svc237-phrase {
    position:absolute;z-index:2;display:block;width:max-content;color:#111;white-space:nowrap;
    transform-origin:top left;
  }
  .s03-services-area.is-mobile-service-flow .svc217-outro .svc237-letter {
    display:inline-block;opacity:0;
  }
  .svc237-frame.is-inview .svc237-letter {
    animation:svc237-type .15s steps(1,end) both;
    animation-delay:calc(.13s + var(--char-index) * 16ms);
  }
  .svc237-phrase.is-selected::before {
    content:"";position:absolute;z-index:-1;left:-2.07px;top:-5.625px;
    width:172.919px;height:29.395px;background:#111;transform:scaleX(0);
    transform-origin:left center;
  }
  .svc237-frame.is-inview .svc237-phrase.is-selected::before {
    animation:svc237-selection .52s cubic-bezier(.2,.85,.25,1) .17s both;
  }
  .svc237-frame.is-inview .svc237-phrase.is-selected {
    animation:svc237-invert .52s steps(1,end) .39s both;
  }
  .svc237-portrait {
    position:absolute;z-index:2;display:block;width:41.553px;height:53.511px;
    object-fit:contain;transform-origin:50% 85%;opacity:0;
  }
  .svc237-frame.is-inview .svc237-portrait {
    animation:svc237-portrait .56s cubic-bezier(.18,1,.22,1) .16s both;
  }
  .svc237-guides {position:absolute;inset:0;z-index:3;width:393px;height:852px;pointer-events:none;}

  .woogi-detail-mobile {
    --woogi-detail-mobile-flow-gap:80px;
    gap:var(--woogi-detail-mobile-flow-gap);
  }
  .woogi-detail-mobile .woogi-detail-mobile-text,
  .woogi-detail-mobile .woogi-detail-mobile-image { margin-top:0;margin-bottom:0; }
  .woogi-detail-mobile .woogi-detail-mobile-image {
    width:min(100%,var(--woogi-mobile-image-width,100%));
  }
  .woogi-detail-mobile .woogi-detail-mobile-image.is-wide {width:100%;}
  .woogi-detail-mobile .woogi-detail-mobile-image.is-small {width:min(100%,420px);}
  .woogi-detail-mobile .woogi-detail-mobile-text.is-role-list {margin-top:40px;}
  .woogi-detail-mobile .woogi-detail-mobile-text.is-heading {margin-top:0;}
  .woogi-detail-mobile .woogi-detail-mobile-image.is-holidot-symbol {
    width:min(91px,100%);height:auto;align-self:center;
  }
  /* v236 measured gaps: text→text 30px, text→image 31px, image→image 39px.
     The shared 80px flow gap stays between unrelated editorial blocks. */
  .woogi-detail-mobile > [data-detail-spacing] {
    margin-top:calc(var(--detail-target-gap) - var(--woogi-detail-mobile-flow-gap))!important;
  }
  .woogi-detail-mobile > [data-detail-spacing="title-body"] {--detail-target-gap:30px;}
  .woogi-detail-mobile > [data-detail-spacing="specimen-pair"] {--detail-target-gap:31px;}
  .woogi-detail-mobile > [data-detail-spacing="specimen-next-photo"] {--detail-target-gap:160px;}
  .woogi-detail-mobile > [data-detail-spacing="flush-image-sequence"] {--detail-target-gap:0px;}
  .woogi-detail-mobile > [data-detail-spacing="section-intro-before"] {--detail-target-gap:160px;}
  .woogi-detail-mobile > [data-detail-spacing="section-intro-after"] {--detail-target-gap:31px;}
  .woogi-detail-mobile > [data-detail-spacing="photo-photo"] {--detail-target-gap:39px;}
  .woogi-detail-mobile > [data-detail-spacing="photo-body"] {--detail-target-gap:38px;}
  .woogi-detail-mobile > [data-detail-spacing="body-photo"],
  .woogi-detail-mobile > [data-detail-spacing="body-next-title"] {--detail-target-gap:160px;}
  .woogi-detail-mobile-row {display:grid;align-self:stretch;width:100%;gap:clamp(4px,1.5vw,9px);align-items:center;overflow:hidden;}
  .woogi-detail-mobile-row.is-coasters,
  .woogi-detail-mobile-row.is-everyday {grid-template-columns:repeat(3,minmax(0,1fr));}
  .woogi-detail-mobile-row.is-sns {grid-template-columns:minmax(0,.48fr) repeat(3,minmax(0,1fr)) minmax(0,.48fr);gap:clamp(2px,.7vw,5px);}
  .woogi-detail-mobile-row-image {display:block;width:100%;max-width:100%;height:auto;object-fit:contain;}
  .woogi-detail-mobile-footer {grid-template-columns:minmax(0,1fr) auto;gap:20px 12px;margin-top:0;}
  .woogi-detail-mobile-footer .woogi-detail-mobile-portrait {grid-column:2;grid-row:1;justify-self:end;}
  .woogi-detail-mobile-footer .woogi-detail-mobile-contact {
    grid-column:1/-1;grid-row:2;display:grid;
    grid-template-columns:max-content minmax(0,1fr);column-gap:clamp(9px,3vw,18px);row-gap:13px;
  }
  .woogi-detail-mobile-footer .woogi-detail-mobile-contact a {width:auto;max-width:none;white-space:nowrap;overflow-wrap:normal;}
  .woogi-detail-mobile-footer .woogi-detail-mobile-contact a[data-contact="instagram"] {grid-column:1/-1;}
}
@media (max-width:360px) {
  .woogi-detail-mobile-footer .woogi-detail-mobile-contact {font-size:11px;column-gap:8px;}
}
@keyframes svc237-rule {from {transform:scaleX(0)} to {transform:scaleX(1)}}
@keyframes svc237-title-warp {to {opacity:1;transform:translate3d(0,0,0) skewY(0) scaleY(1)}}
@keyframes svc237-plus-arrive {to {transform:scale(1) rotate(0)}}
@keyframes svc237-type {to {opacity:1}}
@keyframes svc237-selection {to {transform:scaleX(1)}}
@keyframes svc237-invert {to {color:#fff}}
@keyframes svc237-portrait {from {opacity:0;transform:scale(.42) rotate(-16deg)} to {opacity:1;transform:scale(1) rotate(0)}}
@media (prefers-reduced-motion:reduce) {
  .svc220-item::before,.svc237-title-char,.svc237-plus-entry,
  .svc237-letter,.svc237-phrase.is-selected,.svc237-phrase.is-selected::before,
  .svc237-portrait {animation:none!important;transition:none!important;}
  .s03-services-area.is-mobile-service-flow .svc220-item::before {transform:scaleX(1)!important;}
  .svc237-title-char,.svc237-letter,.svc237-portrait {opacity:1!important;transform:none!important;}
  .s03-services-area.is-mobile-service-flow .svc237-plus-entry {transform:none!important;}
  .svc237-phrase.is-selected {color:#fff!important;}
  .svc237-phrase.is-selected::before {transform:scaleX(1)!important;}
}
