@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');

:root{
  --paper:#fffaf2;
  --ink:#403831;
  --muted:#756a60;
  --coral:#b54d37;
  --peach:#f8e3d2;
  --blue:#deeff5;
  --line:#e6ddd1;
  --rose:#f6e8e2;
  --hand:'Gaegu','Malgun Gothic',cursive;
  --body:'Noto Sans KR','Malgun Gothic',sans-serif
}

*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:28px
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px/1.85 var(--body);
  -webkit-font-smoothing:antialiased
}
body:has(dialog[open]){
  overflow:hidden
}
button,input,textarea{
  font:inherit
}
button,a{
  -webkit-tap-highlight-color:transparent
}
button{
  color:inherit
}
a{
  color:inherit;
  text-decoration:none
}
button{
  cursor:pointer
}
button,a{
  touch-action:manipulation
}
img{
  display:block;
  max-width:100%;
  height:auto
}
p{
  margin:0 0 20px;
  text-wrap:pretty
}
h1,h2,h3{
  margin:0;
  font-weight:600;
  line-height:1.4;
  text-wrap:balance
}
h2{
  font-size:30px;
  letter-spacing:-1px
}
h3{
  font-size:18px
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid #317a99;
  outline-offset:5px
}
.shell{
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto
}
.section{
  padding-block:76px
}
.eyebrow{
  font-size:10px;
  letter-spacing:2px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:13px
}
.muted{
  color:var(--muted);
  font-size:13px
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  transform:translateY(-150%);
  z-index:20;
  background:var(--paper);
  padding:12px
}
.skip-link:focus{
  transform:translateY(0)
}

.site-header{
  height:104px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  font:700 38px/1 var(--hand);
  letter-spacing:1px
}
.site-header nav{
  display:flex;
  align-items:center;
  gap:38px;
  font-size:14px
}
.site-header nav>a:not(.button){
  display:flex;
  min-height:44px;
  align-items:center
}
.site-header nav>a:not(.button):hover,.text-link:hover,.footer a:hover{
  color:var(--coral)
}
.button{
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  border:0;
  border-radius:50px;
  background:var(--coral);
  color:white;
  min-height:48px;
  padding:12px 25px;
  font-size:13px;
  font-weight:500;
  transition:background .2s,transform .2s
}
.button:hover{
  background:#943e2c;
  transform:translateY(-2px)
}
.button:active{
  transform:scale(.96)
}
.button-small{
  min-height:43px;
  padding:10px 23px;
  gap:16px
}
.hero{
  width:min(1280px,calc(100% - 96px));
  position:relative;
  overflow:hidden;
  border-radius:32px;
  background:var(--blue)
}
.hero-image{
  width:100%;
  aspect-ratio:3/1;
  object-fit:cover
}
.hero-caption{
  position:absolute;
  inset:auto 30px 23px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}
.hero h1{
  min-width:0;
  font:700 21px/1.4 var(--hand);
  background:#fffaf2df;
  padding:7px 15px;
  border-radius:20px;
  letter-spacing:.4px
}
.preview-note{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  font-size:10px;
  color:var(--muted);
  padding-top:11px;
  line-height:1.5
}
.preview-dot{
  display:inline-block;
  width:6px;
  height:6px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--coral)
}

.works{
  padding-top:42px;
  padding-bottom:72px
}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:28px
}
.section-heading h2{
  font:700 36px/1.2 var(--hand);
  letter-spacing:0;
  display:flex;
  align-items:center;
  gap:14px
}
.section-heading .eyebrow{
  margin-bottom:7px
}
.section-heading p:last-child{
  margin:9px 0 0;
  font-size:13px;
  color:var(--muted)
}
.tiny-star{
  font-size:27px;
  color:#ba8052;
  display:inline-block;
  transform:rotate(10deg)
}
.hand-note{
  font:400 22px/1.15 var(--hand);
  transform:rotate(-8deg);
  padding-right:22px;
  color:#88715c;
  position:relative
}
.hand-note:after{
  content:'';
  position:absolute;
  width:70px;
  height:12px;
  border-bottom:1px solid #b9a391;
  border-radius:50%;
  right:0;
  bottom:-12px;
  transform:rotate(-5deg)
}
.project-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}
.project{
  border:0;
  background:transparent;
  padding:0;
  text-align:left;
  border-radius:15px;
  display:block;
  min-width:0
}
.project-art{
  display:block;
  position:relative;
  aspect-ratio:1.4;
  overflow:hidden;
  border-radius:14px;
  transition:transform .25s,box-shadow .25s
}
.project:hover .project-art{
  transform:translateY(-5px);
  box-shadow:0 12px 25px #4038310d
}
.project:active{
  transform:scale(.99)
}
.project-art>img{
  width:100%;
  height:100%;
  object-fit:cover
}
.blue{
  background:var(--blue)
}
.peach{
  background:var(--peach)
}
.rose{
  background:var(--rose)
}

.project-info{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 3px;
  gap:10px
}
.project-info small{
  display:block;
  font-size:9px;
  letter-spacing:1.6px;
  color:var(--muted);
  margin-bottom:3px
}
.project-info strong{
  display:block;
  font-size:16px;
  font-weight:500;
  letter-spacing:-.5px
}
.round-arrow{
  width:35px;
  height:35px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  font-size:19px;
  flex-shrink:0;
  transition:background .2s
}
.project:hover .round-arrow{
  background:#f3e8dc
}

.draw-arrow{
  font:400 37px var(--hand);
  color:#9f735c
}

.about{
  display:grid;
  grid-template-columns:.8fr 1fr;
  gap:100px;
  align-items:center;
  border-top:1px solid var(--line)
}
.about-art{
  width:300px;
  aspect-ratio:1;
  border-radius:46% 48% 44% 50%;
  background:var(--blue);
  position:relative;
  justify-self:center
}
.about-art>img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left bottom;
  clip-path:circle(47%);
  transform:scale(1);
  display:none
}
.about-art{
  background-image:none;
  background-size:300% 200%;
  background-position:left bottom
}
.about-stamp{
  position:absolute;
  bottom:-18px;
  right:-30px;
  font:700 22px/1.1 var(--hand);
  transform:rotate(-13deg);
  color:#876b4d;
  background:var(--paper);
  padding:12px 17px;
  border-radius:50%
}
.about-copy h2{
  font-size:29px;
  margin-bottom:25px
}
.about-copy h2 span{
  color:var(--coral)
}
.about-copy p:not(.eyebrow){
  font-size:14px;
  color:#6b6056;
  line-height:2
}
.role-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:26px
}
.role-tags span{
  border:1px solid var(--line);
  border-radius:30px;
  padding:5px 13px;
  font-size:11px
}
.releases{
  padding-bottom:80px
}
.release-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px
}
.text-link{
  display:inline-flex;
  gap:20px;
  align-items:center;
  min-height:44px;
  font-size:13px;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-color:#c8b7a6
}
.release-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.release-item{
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:12px;
  display:block;
  position:relative;
  transition:background .2s
}
.release-item:hover{
  background:#f6eddf
}
.release-item small{
  font-size:10px;
  color:var(--muted)
}
.release-item strong{
  font-size:14px;
  font-weight:500;
  display:block;
  padding-block:4px
}
.release-item p{
  font-size:11px;
  color:var(--muted);
  margin:0
}
.release-item .external-arrow{
  position:absolute;
  right:17px;
  top:17px
}

.service-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center
}
.service-grid h2,.illustration-section h2,.contact-grid h2{
  font-size:32px;
  line-height:1.5;
  letter-spacing:-1.3px;
  margin-bottom:18px
}
.service-grid p:not(.eyebrow),.illustration-section p:not(.eyebrow),.contact-grid>div>p:not(.eyebrow){
  font-size:14px;
  line-height:2
}
.service-grid .service-subtitle,.illustration-section .service-subtitle{
  font-size:13px!important;
  color:var(--coral);
  font-weight:600;
  margin-bottom:13px
}
.class-section{
  background:#f3eee4
}
.resource-card{
  display:block;
  max-width:440px;
  width:100%;
  justify-self:end
}
.book-art{
  display:block;
  width:225px;
  height:285px;
  margin:5px auto 34px;
  position:relative;
  transform:rotate(-7deg);
  background:#f3c7ae;
  box-shadow:8px 10px 0 #fffaf1,9px 11px 0 #dec8b3,15px 20px 23px #7c644123;
  border-radius:3px 9px 9px 3px
}
.book-spine{
  position:absolute;
  inset:0 auto 0 0;
  width:15px;
  background:#b8875a1a;
  border-right:1px solid #fff5
}
.book-label{
  display:block;
  padding:28px 30px;
  font:400 16px/1.4 var(--hand);
  color:#725341
}
.book-label b{
  display:block;
  font-size:33px;
  line-height:1.2;
  padding-top:12px
}
.book-label small{
  font-size:14px
}
.book-line{
  display:block;
  width:40px;
  border-bottom:1px solid #a67659;
  margin:16px 0
}
.book-flower{
  position:absolute;
  right:20px;
  bottom:20px;
  font-size:70px;
  line-height:1;
  color:#fff8e5;
  transform:rotate(10deg)
}
.resource-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #ded4c7;
  padding:18px 0
}
.resource-info small{
  display:block;
  font-size:9px;
  letter-spacing:1.5px;
  color:var(--muted)
}
.resource-info strong{
  display:block;
  font-size:16px;
  font-weight:500
}
.resource-info span span{
  font-size:11px;
  color:var(--muted)
}
.motion-service{
  padding-block:100px
}

.plain-button{
  border:0;
  background:transparent;
  padding:8px;
  min-height:40px;
  font-size:11px;
  text-decoration:underline;
  text-underline-offset:4px
}

.steps{
  list-style:none;
  margin:22px 0;
  padding:0
}
.steps li{
  font-size:12px;
  padding:6px 0
}
.steps span{
  display:inline-block;
  width:28px;
  color:#a17751;
  font-size:10px;
  font-variant-numeric:tabular-nums
}
.illustration-section{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:80px;
  border-top:1px solid var(--line);
  align-items:center;
  padding-block:90px
}

.contact-section{
  background:#eeeae0
}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}
.contact-status{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  margin-top:30px
}
.contact-disclaimer{
  font-size:12px!important;
  margin-top:8px
}
fieldset{
  padding:0;
  margin:0 0 23px;
  border:0;
  min-width:0
}
legend,form>label{
  font-size:12px;
  font-weight:500;
  margin-bottom:10px;
  display:block
}
.service-options{
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.service-options label{
  cursor:pointer
}
.service-options input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}
.service-options span{
  display:block;
  padding:9px 17px;
  border:1px solid #cabdab;
  border-radius:30px;
  font-size:12px;
  min-height:42px;
  transition:background .2s
}
.service-options input:checked+span{
  background:var(--ink);
  color:white;
  border-color:var(--ink)
}
.service-options input:focus-visible+span{
  outline:3px solid #317a99;
  outline-offset:3px
}
textarea{
  display:block;
  width:100%;
  resize:vertical;
  min-height:150px;
  max-height:500px;
  border:1px solid #c9bcae;
  border-radius:13px;
  background:#fffaf2;
  padding:17px 18px;
  color:var(--ink);
  font-size:13px;
  line-height:1.8
}
textarea::placeholder{
  color:#82766a
}
.draft-note{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:10px;
  margin-block:4px 12px
}
.copy-button{
  width:100%
}
.copy-status{
  font-size:12px;
  color:var(--coral);
  min-height:24px;
  margin:8px 0 0
}
.footer{
  padding-block:38px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:20px
}
.footer .brand{
  font-size:28px
}
.footer>span{
  font-size:11px;
  color:var(--muted)
}
.footer>div{
  margin-left:auto;
  display:flex;
  gap:25px;
  font-size:11px
}
.footer small{
  width:100%;
  font-size:10px;
  color:var(--muted)
}
dialog{
  padding:0;
  border:0;
  border-radius:22px;
  background:var(--paper);
  color:var(--ink);
  width:min(630px,calc(100% - 32px));
  max-height:85dvh;
  box-shadow:0 25px 100px #0003
}
dialog::backdrop{
  background:#2b251fcc;
  backdrop-filter:blur(5px)
}
dialog>img{
  width:100%;
  max-height:330px;
  object-fit:cover
}
.dialog-close{
  position:absolute;
  top:14px;
  right:14px;
  border:0;
  border-radius:50%;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  font-size:27px;
  background:var(--paper);
  box-shadow:0 2px 12px #0001
}
.dialog-copy{
  padding:30px
}
.dialog-copy h2{
  font-size:25px;
  margin-bottom:15px
}
.dialog-copy>p:not(.eyebrow){
  font-size:14px;
  line-height:1.9
}
.dialog-copy .eyebrow{
  font-size:10px;
  letter-spacing:1px
}

.pose,.about-art{
  background-image:none
}

.resource-demo-label{
  display:block;
  text-align:center;
  color:var(--muted);
  font-size:10px;
  margin-bottom:12px
}

@media(min-width:1500px){
  .hero-image{
  aspect-ratio:3.05
}

}

@media(max-width:1050px){
  .shell{
  width:calc(100% - 64px)
}
.hero{
  width:calc(100% - 64px)
}
.service-grid,.about,.contact-grid{
  gap:50px
}
.about-art{
  width:250px
}
.project-info strong{
  font-size:14px
}

.illustration-section{
  gap:45px
}
.site-header nav{
  gap:24px
}
.hero-caption{
  bottom:16px;
  inset-inline:22px
}
.hero h1{
  font-size:18px
}
.project-grid{
  gap:18px
}
.hero .button{
  flex-shrink:0;
  min-height:42px;
  padding:9px 20px;
  font-size:12px
}

}

@media(max-width:760px){
  body{
  font-size:14px
}
.shell{
  width:calc(100% - 40px)
}
.section{
  padding-block:52px
}
.site-header{
  height:auto;
  padding-block:18px 12px;
  gap:12px;
  flex-wrap:wrap
}
.brand{
  font-size:31px;
  gap:3px
}
.brand img{
  width:30px;
  height:30px
}
.site-header nav{
  width:100%;
  justify-content:space-between;
  gap:8px;
  font-size:12px
}
.button-small{
  padding:9px 16px;
  gap:8px;
  font-size:12px
}
.hero{
  width:calc(100% - 40px);
  border-radius:22px
}
.hero-image{
  aspect-ratio:1.5;
  object-position:58% center
}
.hero-caption{
  inset:auto 12px 14px;
  align-items:flex-end
}
.hero h1{
  font-size:15px;
  max-width:160px;
  line-height:1.4;
  padding:7px 10px
}
.hero .button{
  padding:9px 14px;
  gap:8px;
  font-size:11px
}
.preview-note{
  font-size:9px;
  justify-content:flex-start;
  align-items:flex-start;
  padding-top:12px
}
.preview-dot{
  margin-top:4px
}
.works{
  padding-top:35px
}
.section-heading{
  margin-bottom:23px
}
.section-heading h2{
  font-size:30px
}
.hand-note{
  font-size:19px;
  padding-right:0
}
.section-heading .eyebrow{
  font-size:9px
}
.section-heading p:last-child{
  font-size:12px
}
.project-grid{
  gap:22px;
  grid-template-columns:1fr
}
.project-art{
  aspect-ratio:1.55
}
.project-info{
  padding:12px 3px
}
.project-info strong{
  font-size:16px
}
.project-info small{
  font-size:9px
}

.about{
  grid-template-columns:1fr;
  gap:40px
}
.about-art{
  width:220px
}
.about-copy h2{
  font-size:26px
}
.about-copy p:not(.eyebrow){
  font-size:13px
}
.role-tags{
  gap:6px
}
.role-tags span{
  font-size:10px;
  padding:5px 11px
}
.releases{
  padding-bottom:50px
}
.release-heading{
  align-items:flex-start;
  gap:8px
}
.release-heading h3{
  font-size:15px;
  padding-top:10px
}
.release-heading .text-link{
  font-size:11px;
  gap:6px;
  white-space:nowrap
}
.release-list{
  grid-template-columns:1fr;
  gap:10px
}
.release-item{
  padding:17px 20px
}
.service-grid,.contact-grid,.illustration-section{
  grid-template-columns:1fr;
  gap:37px
}
.service-grid h2,.illustration-section h2,.contact-grid h2{
  font-size:28px
}
.service-grid p:not(.eyebrow),.illustration-section p:not(.eyebrow),.contact-grid>div>p:not(.eyebrow){
  font-size:13px
}
.resource-card{
  justify-self:center;
  max-width:360px;
  margin-top:13px
}
.book-art{
  width:205px;
  height:265px
}
.book-label b{
  font-size:30px
}
.motion-service>div:first-child{
  order:2
}

.contact-grid{
  gap:22px
}
.contact-status{
  margin-top:20px
}
.contact-disclaimer{
  margin-bottom:0
}
.footer{
  gap:13px
}
.footer>div{
  width:100%;
  margin-left:0;
  gap:25px
}
.footer small{
  margin-top:0
}
.dialog-copy{
  padding:24px
}
.dialog-copy h2{
  font-size:22px
}
.service-options{
  gap:6px
}
.service-options span{
  padding:9px 13px
}
.draft-note{
  font-size:9px
}
.text-link{
  min-height:44px
}
.preview-note .preview-dot{
  margin-top:3px
}

}

@media(max-width:450px){
  .section-heading .hand-note{
  display:none
}
.section-heading h2{
  white-space:nowrap;
  font-size:30px
}
.hero h1{
  max-width:148px;
  font-size:14px
}
.hero .button{
  padding:9px 12px;
  font-size:10px
}

}

.project-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }

@media(max-width:1100px) { .project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .project-grid { grid-template-columns: 1fr; } }
@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto
}
*,*::before,*::after{
  animation:none!important;
  transition:none!important
}
.button:hover,.project:hover .project-art{
  transform:none
}

}

/* 작품 둘러보기 : 화면 전체 쇼릴 */
dialog.reel-dialog{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#f3eee4;box-shadow:none;overflow:hidden}
dialog.reel-dialog::backdrop{background:#2b251f;backdrop-filter:none}
.reel-dialog video{display:block;width:100%;height:100%;object-fit:contain}
.reel-dialog button{position:absolute;z-index:1;min-height:44px;padding:9px 18px;border:1px solid #d9cfc3;border-radius:999px;background:#fffaf2f0;color:var(--ink);font-size:14px;cursor:pointer;box-shadow:0 4px 16px #59432c1f}
.reel-dialog button:hover{background:#f6eddf}
.reel-dialog button:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.reel-dialog{cursor:pointer}
.reel-hint{position:absolute;top:max(14px,env(safe-area-inset-top));left:0;right:0;margin:0;text-align:center;font-size:12px;color:#8a7f75;pointer-events:none}
.reel-dialog:focus{outline:none}
.reel-pause{left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom))}

/* 실제 작품 자료 (2026-09-29) */
.project-art>img.art-contain{object-fit:contain;padding:7%}
.about-art{background:var(--blue);background-image:none}
.about-art>img{display:block;width:100%;height:100%;padding:9%;object-fit:contain;clip-path:none}
.sketch-to-emoticon{display:grid;grid-template-columns:1.3fr auto 1fr;align-items:center;gap:14px;max-width:460px;margin:32px 0 0}
.sketch-to-emoticon img{display:block;width:100%;height:auto;border-radius:10px;background:#fff;box-shadow:0 4px 14px #59432c14}
.sketch-to-emoticon .draw-arrow{font-size:28px;color:#a17751}
.sketch-to-emoticon figcaption{grid-column:1/-1;font-size:11px;color:var(--muted)}
.release-item{display:grid;grid-template-columns:72px 1fr;column-gap:16px;align-items:center;padding-right:44px}
.release-item>:not(.release-art):not(.external-arrow){grid-column:2}
.release-art{grid-row:1/4;width:72px;height:72px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.emoticon-strip{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:10px;margin-top:22px}
.emoticon-strip img,.motion-gallery img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:12px;background:#fff;border:1px solid var(--line)}
.class-photos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:52px}
.class-photos figure,.illustration-applied figure,.motion-compare figure{margin:0}
.class-photos img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.class-photos figcaption,.illustration-applied figcaption{font-size:11px;line-height:1.5;color:var(--muted);margin-top:8px}
.motion-service{row-gap:44px}
.motion-compare{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:36px 26px;border-radius:22px}
.motion-compare figure{text-align:center}
.motion-compare img{display:block;width:100%;max-width:240px;height:auto;aspect-ratio:1;margin:0 auto;border-radius:16px;background:#fff;box-shadow:0 4px 14px #59432c14}
.motion-compare figcaption{margin-top:10px;font:700 21px var(--hand);color:#6b5646}
.motion-compare .draw-arrow{font-size:34px;color:#a17751}
.motion-gallery{grid-column:1/-1;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:12px}
.rights-note{grid-column:1/-1;margin:0;font-size:11px;line-height:1.75;color:#8a7f75}
.illustration-section{row-gap:44px}
.calendar-viewer img{display:block;width:100%;height:auto;aspect-ratio:1.28;object-fit:contain;border-radius:12px;background:#fff;box-shadow:0 6px 20px #59432c14}
.calendar-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}
.calendar-tabs button{min-height:40px;padding:6px 15px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font-size:12px;cursor:pointer}
.calendar-tabs button:hover{background:#f6eddf}
.calendar-tabs button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.illustration-applied{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1.3fr 1.2fr .72fr .72fr;gap:16px;align-items:end}
.illustration-applied img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 4px 14px #59432c14}
#dialog-image.is-contain{object-fit:contain;background:var(--blue);padding:18px}
@media(max-width:1050px){.emoticon-strip{grid-template-columns:repeat(5,minmax(0,1fr))}.class-photos{grid-template-columns:repeat(3,minmax(0,1fr))}.motion-gallery{grid-template-columns:repeat(5,minmax(0,1fr))}.illustration-applied{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.class-photos{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px}.motion-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.motion-service .motion-gallery{order:3}.motion-service .rights-note{order:4}.illustration-applied{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.motion-compare{padding:24px 14px}.motion-compare figcaption{font-size:17px}.sketch-to-emoticon{max-width:none}}