*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#fff;color:#222}
body{font-family:Arial,"Helvetica Neue","Noto Sans KR","Noto Sans JP",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* HOME: approved artwork is used as-is. No added decoration. */
.home-page{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  background:#222;
}
.home-stage{
  position:relative;
  width:min(100vw, 1163px);
  aspect-ratio:1163 / 1352;
  background:#fff;
}
.home-art{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.lang-hit{
  position:absolute;
  top:48.0%;
  height:4.0%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:transparent;
  font-size:0;
  border-radius:4px;
}
.lang-hit:focus-visible{
  outline:2px solid #e9899f;
  outline-offset:2px;
}
.eng-hit{left:40.3%;width:8.5%}
.ja-hit{left:51.0%;width:12.5%}


/* HOME FOOTER: replaces only the footer text baked into the approved artwork. */
.home-footer{
  position:absolute;
  left:16.5%;
  right:16.5%;
  bottom:4.7%;
  height:13.8%;
  background:#fff;
  text-align:center;
  color:#8f8f8f;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:1.2%;
}
.home-footer-email{
  font-size:clamp(10px,1.55vw,18px);
  line-height:1.2;
  font-weight:400;
  letter-spacing:.01em;
  color:#8f8f8f;
}
.home-footer-email:hover{color:#e9899f}
.home-footer-line{
  width:100%;
  height:1px;
  background:#aeb0b1;
  margin:2.4% 0 2.1%;
}
.home-footer-units,
.home-footer-copy{
  margin:0;
  font-size:clamp(10px,1.45vw,17px);
  line-height:1.25;
  font-weight:400;
  color:#8f8f8f;
}
.home-footer-units span{padding:0 .55em}
.home-footer-copy{margin-top:2.4%}

/* CONTENT PAGES: user's text-free page is the common page base. */
.content-page{
  min-height:100vh;
  background:#fff;
}
.page-shell{
  width:min(100%, 980px);
  min-height:100vh;
  margin:0 auto;
  background-color:#fff;
  background-image:url("assets/page-base.jpg");
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% auto;
  position:relative;
  display:flex;
  flex-direction:column;
  padding:0 8.5%;
}
.mini-nav{
  padding-top:150px;
  text-align:right;
  font-size:11px;
  letter-spacing:.14em;
  color:#9b9b9b;
}
.mini-nav a{padding:6px 8px}
.mini-nav a:hover,.mini-nav a.active{color:#222}
.mini-nav span{color:#c8c8c8}

.content-wrap{
  width:min(100%, 650px);
  margin:120px auto 100px;
  text-align:center;
}
.eyebrow{
  margin:0 0 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  color:#222;
}
.intro h1{
  margin:0;
  font-size:24px;
  letter-spacing:.22em;
  font-weight:500;
  color:#555;
}
.short-line{
  width:130px;
  height:1px;
  margin:28px auto 42px;
  background:#d7d7d7;
}
.intro p{
  margin:0 auto 18px;
  max-width:610px;
  font-size:15px;
  line-height:2;
  color:#555;
}
.work{
  margin-top:68px;
}
.work h2,.contact-block h2{
  margin:0 0 24px;
  font-size:12px;
  letter-spacing:.22em;
  font-weight:500;
  color:#888;
}
.work ul{
  list-style:none;
  margin:0;
  padding:0;
}
.work li{
  padding:7px 0;
  font-size:14px;
  color:#444;
}
.contact-block{
  margin-top:68px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.contact-block a{
  font-size:14px;
  color:#666;
}
.contact-block a:hover{color:#e9899f}

.site-footer{
  margin-top:auto;
  padding:0 0 42px;
  text-align:center;
  color:#999;
  font-size:11px;
}
.footer-line{
  height:1px;
  background:#bdbdbd;
  margin-bottom:22px;
}
.site-footer p{margin:8px 0}
.site-footer span{padding:0 8px}

@media (max-width:700px){
  .home-page{background:#fff}
  .home-stage{width:100vw}
  .page-shell{
    width:100%;
    padding:0 7%;
  }
  .mini-nav{padding-top:105px}
  .content-wrap{margin:95px auto 80px}
  .intro h1{font-size:20px}
  .intro p{font-size:14px;line-height:1.9}
}


/* CHANNELS: approved three-channel artwork, kept intact. */
.section-nav{
  width:min(100%,650px);
  margin:38px auto 0;
  text-align:center;
  font-size:12px;
  letter-spacing:.16em;
  color:#8f8f8f;
}
.section-nav a:hover{color:#e9899f}

.channels-wrap{
  width:min(100%,650px);
  margin:48px auto 90px;
  text-align:center;
}
.channels-art{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
}

@media (max-width:700px){
  .section-nav{margin-top:30px;font-size:11px}
  .channels-wrap{margin:38px auto 70px}
}

/* CHANNEL LINKS: invisible full-card hit areas over the approved artwork. */
.channels-art-box{position:relative;width:100%}
.channel-hit{position:absolute;left:2%;right:2%;display:block;border-radius:8px}
.channel-hit:focus-visible{outline:2px solid #e9899f;outline-offset:3px}
.hit-sitte{top:8%;height:25%}
.hit-showa{top:38%;height:25%}
.hit-dokoka{top:68%;height:25%}
.section-nav span{color:#c8c8c8}
.section-nav a.active{color:#555}

/* CHARACTERS: sketch on white → straight-edged completed sheet. */
.characters-wrap{width:min(100%,760px);margin:62px auto 100px;text-align:center}
.character-group{margin:0 auto 82px}
.character-kicker{margin:0 0 10px;font-size:11px;letter-spacing:.22em;color:#aaa}
.character-group h1{margin:0;font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;font-size:28px;font-weight:400;letter-spacing:.12em;color:#666}
.character-note{margin:10px 0 32px;font-size:11px;letter-spacing:.16em;color:#b2b2b2}
.character-sketch,.character-final{display:block;width:100%;height:auto;margin:0 auto;background:#fff}
.character-sketch{margin-bottom:30px}
.character-final{border-radius:0;box-shadow:0 12px 28px rgba(0,0,0,.08)}
.character-divider{width:78%;height:1px;background:#d7d7d7;margin:0 auto 82px}
.supporting-characters h1{font-family:Arial,"Helvetica Neue","Noto Sans JP",sans-serif;font-size:23px;letter-spacing:.16em}
.character-stack{display:flex;flex-direction:column;gap:38px;margin-top:34px}
@media(max-width:700px){
  .characters-wrap{margin:48px auto 75px}
  .character-group{margin-bottom:60px}
  .character-group h1{font-size:23px}
  .character-sketch{margin-bottom:20px}
  .character-divider{margin-bottom:60px}
  .character-stack{gap:26px}
}

/* v9 final character archive layout */
.character-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px 28px;
  align-items:start;
}
.character-grid .character-final{
  width:100%;
  margin:0;
}
@media (max-width:620px){
  .character-grid{gap:16px 14px;}
}


/* v11 — CHANNELS / CHARACTERS typography normalization
   기준: 기존 회사 소개 페이지의 24px 제목 + 15px 본문.
   영문/일문 동일 크기, 기존의 가늘고 여백 많은 톤 유지. */
.channel-list{
  width:min(100%,650px);
  margin:62px auto 90px;
}
.channel-block{
  margin:0 auto 48px;
}
.channel-block h1{
  margin:0 0 8px;
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:24px;
  line-height:1.45;
  font-weight:400;
  letter-spacing:.12em;
  color:#666;
}
.channels-en-page .channel-block h1{
  letter-spacing:.08em;
}
.channel-block p{
  margin:0 0 22px;
  font-size:15px;
  line-height:2;
  font-weight:400;
  letter-spacing:.02em;
  color:#555;
}
.channel-art-link,
.channel-art-link img{
  display:block;
  width:100%;
}
.channel-art-link img{
  height:auto;
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.16));
}
.channel-divider{
  width:78%;
  height:1px;
  margin:42px auto 46px;
  background:#d7d7d7;
}

/* 캐릭터 제목도 사이트 공통 제목 크기 24px로 통일 */
.character-group h1{
  font-size:24px;
}
.supporting-characters h1{
  font-size:24px;
  font-weight:400;
}

@media(max-width:700px){
  .channel-list{margin:48px auto 70px;}
  .channel-block h1,
  .character-group h1,
  .supporting-characters h1{font-size:20px;}
  .channel-block p{font-size:14px;line-height:1.9;}
  .channel-divider{margin:34px auto 38px;}
}


/* 2026-10-10 final three-point website polish — completed items left untouched. */

/* Channel art: soften the rectangular image boundary into the white page.
   No rounded-card treatment; torn artwork remains visible beneath the fade. */
.channel-art-link{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  outline-offset:4px;
}
.channel-art-link img{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 7px 9px rgba(0,0,0,.09));
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at center,#000 76%,rgba(0,0,0,.96) 84%,rgba(0,0,0,.62) 92%,transparent 100%);
  mask-image:radial-gradient(ellipse 100% 100% at center,#000 76%,rgba(0,0,0,.96) 84%,rgba(0,0,0,.62) 92%,transparent 100%);
}
/* Showa color correction retained exactly from the approved v12 result. */
.channel-block:nth-of-type(2) .channel-art-link img{
  filter:sepia(.12) saturate(.68) brightness(1.045) contrast(.96) drop-shadow(0 7px 9px rgba(0,0,0,.09));
}

/* Subpage footer retained exactly from the approved v12 result; no email. */
.site-footer{
  margin-top:auto;
  padding:0 0 42px;
  text-align:center;
  color:#8f8f8f;
  font-size:clamp(10px,1.45vw,17px);
  line-height:1.25;
  font-weight:400;
}
.site-footer .footer-line{
  width:100%;
  height:1px;
  background:#aeb0b1;
  margin:0 0 2.1%;
}
.site-footer p{margin:0;color:#8f8f8f}
.site-footer p+p{margin-top:2.4%}
.site-footer span{padding:0 .55em}

/* Loose sakura petals: visible but sparse; mixed large/small petals with irregular spacing. */
.page-shell::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url("assets/sakura-petals.svg");
  background-repeat:repeat-y;
  background-position:top center;
  background-size:100% auto;
  opacity:.92;
}
.page-shell::after{content:none}
.page-shell > *{position:relative;z-index:1}


/* 2026-10-10 channel art final:
   artwork edge only — no shadow, rounded card, CSS fade or mask. */
.channel-art-link{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.channel-art-link img,
.channel-block:nth-of-type(2) .channel-art-link img{
  display:block;
  width:100%;
  height:auto;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}


/* 2026-10-10 final cleanup: remove loose pink petal/dot decorations. */
.petal, .petals, .sakura-petal, .sakura-petals,
[class*="petal"]{
  display:none !important;
}


/* Loose pink petal/dot decorations: remove completely. */
.petal, .petals, .sakura-petal, .sakura-petals,
[class*="petal"],
[class*="sakura-fall"],
.floating-sakura{
  display:none !important;
}


/* 2026-10-10 FINAL FINAL:
   1) remove the actual loose pink-dot/petal overlay
   2) keep Dokokade width fixed and increase ONLY its vertical height */
.page-shell::before,
.page-shell::after{
  content:none !important;
  display:none !important;
  background-image:none !important;
}

.channel-block:nth-of-type(3) .channel-art-link img{
  width:100% !important;
  height:auto !important;
  transform:scaleY(1.34) !important;
  transform-origin:center center !important;
}

/* keep extra vertical room below the third image without pushing into its text */
.channel-block:nth-of-type(3) .channel-art-link{
  margin-top:0 !important;
  margin-bottom:4.5% !important;
}





/* v22: Dokokade top blank space physically cropped from the PNG.
   Keep width fixed; vertical enlargement grows downward so the text above stays clear. */
.channel-block:nth-of-type(3) .channel-art-link{
  margin-top:0 !important;
  margin-bottom:5% !important;
  overflow:visible !important;
}
.channel-block:nth-of-type(3) .channel-art-link img{
  width:100% !important;
  height:auto !important;
  transform:scaleY(1.18) !important;
  transform-origin:top center !important;
}


/* v24 — final channel art set: all three source images already share the intended flat banner height.
   Do not stretch or crop any channel image in CSS. */
.channel-block:nth-of-type(3) .channel-art-link{
  margin-top:0 !important;
  margin-bottom:0 !important;
  overflow:visible !important;
}
.channel-block:nth-of-type(3) .channel-art-link img{
  width:100% !important;
  height:auto !important;
  transform:none !important;
}

/* 2026-10-11 — exact reference petal treatment.
   Positions, scale and petal shapes are taken directly from the approved reference image.
   No newly designed/reinterpreted petals. */
.content-page .page-shell::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background-image:url("assets/sakura-petals-reference.png") !important;
  background-repeat:repeat-y !important;
  background-position:top center !important;
  background-size:100% auto !important;
  opacity:1 !important;
}
.content-page .page-shell > *{
  position:relative;
  z-index:1;
}

/* Channel page footer repair: retain all original artwork and links. */
.channels-page .page-shell { overflow:visible; }
.channels-page .channel-list { display:flow-root; margin-bottom:64px; }
.channels-page .site-footer { position:relative; display:block; clear:both; flex-shrink:0; width:100%; margin-top:0; padding-top:0; padding-bottom:42px; overflow:visible; }
.channels-page .site-footer .footer-line { display:block !important; visibility:visible !important; width:100% !important; height:1px !important; min-height:1px; background:#aeb0b1 !important; opacity:1 !important; margin:0 0 22px !important; }

/* Channel character profiles: compact, responsive, original artwork preserved */
.channel-profiles{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin:26px auto 12px;max-width:760px}
.channel-profile{flex:1 1 200px;max-width:310px;text-align:center;color:#666}
.channel-profile img{display:block;width:168px;height:168px;object-fit:cover;object-position:center 30%;border-radius:50%;margin:0 auto 13px;border:5px solid #eee8df;box-shadow:0 3px 14px #00000016}
.channel-profile-name{font-family:"Noto Serif JP",serif;font-size:21px;letter-spacing:.08em}
.channel-profile-meta{font-size:12px;color:#9b8a77;margin-top:5px}
.channel-profile p{font-size:13px;line-height:1.75;max-width:270px;margin:9px auto 0}
@media(max-width:600px){.channel-profiles{gap:20px}.channel-profile{flex-basis:155px}.channel-profile img{width:130px;height:130px}}

/* v15: portraits at left, biography text at right; banners remain below */
.channel-profiles{display:flex;justify-content:center;align-items:stretch;gap:24px;flex-wrap:wrap;margin:25px auto 20px;max-width:960px}
.channel-profile{display:flex;flex:1 1 330px;max-width:460px;align-items:center;gap:22px;text-align:left;color:#666}
.channel-profile img{flex:0 0 152px;width:152px;height:152px;object-fit:cover;object-position:center 30%;border-radius:50%;margin:0;border:5px solid #eee8df;box-shadow:0 3px 14px #00000016}
.channel-profile-info{flex:1;min-width:0}
.channel-profile p{margin:9px 0 0;max-width:none}
@media(max-width:600px){.channel-profiles{gap:24px;max-width:100%}.channel-profile{flex:1 1 100%;max-width:420px;gap:15px}.channel-profile img{flex-basis:112px;width:112px;height:112px}.channel-profile-name{font-size:19px}}