:root{
    --paper:#FBF6EE; --paper-2:#F5ECDC; --card:#FFFCF6;
    --ink:#2B211B; --ink-soft:#6E6153; --line:#E8DCC8;
    --rose:#C8415C; --rose-deep:#A8324A; --rose-soft:#F6DDE2;
    --gold:#B4863A; --sage:#7C9F86; --blue:#5E8FC0; --lav:#8C79C0;
    --amber:#D69A3F; --teal:#4FA6A0; --coral:#DD7C68;
    --serif:"Gowun Batang", serif; --sans:"Pretendard", system-ui, -apple-system, sans-serif; --hand:"Gaegu", cursive;
    --shadow:0 22px 48px -22px rgba(74,48,30,.30); --shadow-sm:0 10px 26px -14px rgba(74,48,30,.28);
    --r:22px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);line-height:1.7;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{width:min(1120px,calc(100% - 40px));margin-inline:auto}

  .serif{font-family:var(--serif)} .hand{font-family:var(--hand)}
  .eyebrow{font-family:var(--hand);font-size:19px;color:var(--rose);display:inline-flex;align-items:center;gap:9px;font-weight:700}
  .eyebrow::before{content:"";width:26px;height:2px;background:var(--rose);border-radius:2px;opacity:.7}
  h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;line-height:1.18;margin:0}

  /* nav */
  .nav{position:sticky;top:0;z-index:60;background:rgba(251,246,238,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(120,90,60,.10)}
  .nav-in{height:66px;display:flex;align-items:center;justify-content:space-between}
  .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px;letter-spacing:.14em}
  .brand b{font-family:var(--serif);letter-spacing:.10em}
  .stamp{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--rose),#E0806F);font-family:var(--serif);font-weight:700;box-shadow:0 8px 18px -6px rgba(200,65,92,.55);font-size:18px}
  .nav-menu{display:flex;gap:24px;font-size:14.5px;font-weight:600;color:#5f5346}
  .nav-menu a{position:relative;padding:4px 0}
  .nav-menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--rose);transition:right .28s ease}
  .nav-menu a:hover{color:var(--ink)} .nav-menu a:hover::after{right:0}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:13px;font-weight:700;font-size:15px;font-family:var(--sans);cursor:pointer;border:1.5px solid transparent;transition:transform .18s ease, box-shadow .18s ease, background .18s ease;white-space:nowrap}
  .btn-rose{background:var(--rose);color:#fff;box-shadow:0 12px 24px -12px rgba(200,65,92,.8)}
  .btn-rose:hover{transform:translateY(-2px);background:var(--rose-deep);box-shadow:0 16px 30px -12px rgba(200,65,92,.85)}
  .btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
  .btn-ghost:hover{transform:translateY(-2px);border-color:var(--rose);color:var(--rose)}
  .nav .btn{padding:10px 17px;font-size:14px}

  /* hero */
  .hero{padding:20px 0 26px;position:relative;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center}
  .hero h1{font-size:clamp(40px,5.4vw,64px);margin:20px 0 22px}
  .squiggle{color:var(--rose);position:relative;white-space:nowrap}
  .squiggle svg{position:absolute;left:-2%;right:-2%;bottom:-16px;width:104%;height:16px}
  .hero-lead{font-size:18px;color:var(--ink-soft);max-width:520px;margin:0 0 30px}
  .hero-cta{display:flex;gap:12px;flex-wrap:wrap}
  .hero-trust{margin-top:26px;font-size:14px;color:#8a7c6c;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .hero-trust b{color:var(--ink);font-weight:700}
  .tick{width:6px;height:6px;border-radius:50%;background:var(--sage)}
  .portrait-frame{position:relative;justify-self:center;width:min(430px,100%)}
  .portrait-frame .photo{border-radius:30px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,#F7E9DC,#FBF3E6 60%,#EFF4EC);box-shadow:var(--shadow)}
  .portrait-frame .photo img{width:100%;height:auto}
  .pin{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:8px 12px;font-size:13px;font-weight:700;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:7px}
  .pin .dot{width:8px;height:8px;border-radius:50%}
  .pin-cred{left:-14px;top:30px;font-family:var(--sans)} .pin-cred .dot{background:var(--gold)}
  .sticker{position:absolute;font-family:var(--hand);font-weight:700;font-size:20px;background:#fff;border:1.5px solid var(--ink);border-radius:20px;padding:4px 12px;box-shadow:var(--shadow-sm)}
  .sticker-1{right:-16px;top:96px;color:var(--rose);transform:rotate(6deg)}
  .sticker-2{right:-8px;bottom:60px;color:var(--blue);transform:rotate(-4deg)}
  .float-mark{position:absolute;font-size:24px;color:var(--amber);left:-26px;bottom:80px}

  /* AI band */
  .aiband{border-block:1px solid var(--line);background:linear-gradient(90deg,#FBEEF0,#F5ECDC 55%,#EEF4EE)}
  .aiband-in{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:20px 0;text-align:center}
  .aiband .chip{font-family:var(--serif);font-weight:700;color:#fff;background:var(--rose);border-radius:999px;padding:6px 16px;font-size:15px;letter-spacing:.02em;box-shadow:0 10px 20px -10px rgba(200,65,92,.7)}
  .aiband p{margin:0;font-size:15.5px;color:var(--ink-soft)}
  .aiband p b{color:var(--ink);font-weight:700}

  section{padding:20px 0}
  .head{max-width:660px;margin-bottom:42px}
  .head h2{font-size:clamp(30px,4.2vw,46px);margin:12px 0 14px}
  .head p{color:var(--ink-soft);font-size:17px;margin:0}

  /* lectures */
  .lec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
  .lec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 20px 22px;box-shadow:var(--shadow-sm);position:relative;transition:transform .2s ease, box-shadow .2s ease;overflow:hidden}
  .lec:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
  .lec .bar{position:absolute;left:0;top:0;bottom:0;width:5px}
  .lec .cat{font-family:var(--hand);font-size:15px;font-weight:700}
  .lec h3{font-size:19px;margin:7px 0 9px;line-height:1.34}
  .lec p{color:var(--ink-soft);font-size:14px;margin:0 0 14px}
  .tags{display:flex;flex-wrap:wrap;gap:6px}
  .tag{font-size:11.5px;font-weight:600;color:#6b5f51;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
  .tag.ai{color:var(--rose-deep);background:var(--rose-soft);border-color:transparent;font-weight:700}
  .senior{position:absolute;top:14px;right:14px;font-size:11px;font-weight:700;color:#fff;background:var(--coral);border-radius:999px;padding:3px 9px}
  .lec.l1 .bar{background:var(--rose)} .lec.l1 .cat{color:var(--rose)}
  .lec.l2 .bar{background:var(--blue)} .lec.l2 .cat{color:var(--blue)}
  .lec.l3 .bar{background:var(--amber)} .lec.l3 .cat{color:var(--amber)}
  .lec.l4 .bar{background:var(--lav)} .lec.l4 .cat{color:var(--lav)}
  .lec.l5 .bar{background:var(--teal)} .lec.l5 .cat{color:var(--teal)}
  .lec.l6 .bar{background:var(--coral)} .lec.l6 .cat{color:var(--coral)}
  .lec.l7 .bar{background:var(--gold)} .lec.l7 .cat{color:var(--gold)}
  .lec.l8 .bar{background:var(--sage)} .lec.l8 .cat{color:var(--sage)}

  /* process */
  .process{background:var(--paper-2);border-block:1px solid var(--line)}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .step{position:relative;padding-top:14px}
  .step .no{font-family:var(--serif);font-size:44px;font-weight:700;color:var(--rose);line-height:1}
  .step .no small{font-size:16px;color:var(--ink-soft);margin-left:4px;font-family:var(--sans);font-weight:600}
  .step h3{font-size:19px;margin:14px 0 8px}
  .step p{color:var(--ink-soft);font-size:14.5px;margin:0}
  .step:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:20px;color:var(--line);font-size:22px}

  /* resources (Google Site) */
  .res-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .res{display:flex;gap:18px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm);transition:transform .2s ease, box-shadow .2s ease, border-color .2s}
  .res:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--rose)}
  .res .ic{flex:0 0 auto;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:22px;color:#fff;background:linear-gradient(140deg,var(--blue),#7FB0DE)}
  .res.two .ic{background:linear-gradient(140deg,var(--sage),#9BC3A6)}
  .res h3{font-size:21px;margin:0 0 6px}
  .res p{color:var(--ink-soft);font-size:14.5px;margin:0 0 12px}
  .res .go{font-weight:700;color:var(--rose);font-size:14.5px}
  .res:hover .go{color:var(--rose-deep)}
  .res-note{margin-top:16px;font-size:13px;color:#9a8c7c}

  /* about */
  .about-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:48px;align-items:center}
  .about-photo{position:relative;justify-self:center;width:min(360px,100%)}
  .about-photo img{width:100%;border-radius:26px;border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(160deg,#F7E7EC,#FBF3E6)}
  .about-photo .quote{position:absolute;right:-16px;bottom:24px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow-sm);font-family:var(--hand);font-size:18px;font-weight:700;color:var(--ink);max-width:200px;transform:rotate(-2deg)}
  .about h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:18px}
  .about p{color:var(--ink-soft);font-size:16.5px;margin:0 0 16px}
  .creds{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
  .cred{font-size:13px;font-weight:700;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:9px 13px;display:flex;gap:8px;align-items:center}
  .cred i{width:7px;height:7px;border-radius:50%;background:var(--rose);font-style:normal}

  /* request */
  .request{background:linear-gradient(180deg,var(--paper),#FBEFE6)}
  .req-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:stretch}
  .req-side{position:relative;display:flex;flex-direction:column;justify-content:center}
  .req-side .head{margin-bottom:24px}
  .req-side .wave-wrap{position:relative;width:min(300px,80%)}
  .req-side .wave-wrap img{width:100%;border-radius:24px;border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(160deg,#FBEEDD,#FFF6E9)}
  .quick{margin-top:26px;display:grid;gap:10px}
  .quick a{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 16px;font-weight:600;font-size:15px;box-shadow:var(--shadow-sm);transition:transform .16s ease,border-color .16s}
  .quick a:hover{transform:translateY(-2px);border-color:var(--rose)}
  .quick .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--rose-soft);color:var(--rose-deep);font-weight:800}
  .quick small{display:block;color:#8a7c6c;font-weight:500;font-size:12.5px;margin-top:1px}
  .form{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:32px;box-shadow:var(--shadow)}
  .form h3{font-size:23px;margin-bottom:6px}
  .form .sub{color:var(--ink-soft);font-size:14.5px;margin:0 0 22px}
  .field{margin-bottom:16px}
  .field.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px;color:#5f5346}
  input,select,textarea{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .16s, box-shadow .16s}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(200,65,92,.14)}
  textarea{resize:vertical;min-height:96px}
  .form .btn-rose{width:100%;justify-content:center;padding:15px;font-size:16px;margin-top:4px}
  .form .note{font-size:12.5px;color:#9a8c7c;margin:12px 0 0;text-align:center}

  footer{background:var(--ink);color:#E9DECC;padding:46px 0}
  .foot-in{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
  .foot-brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:20px;letter-spacing:.08em}
  .foot-brand .stamp{background:linear-gradient(140deg,#E0806F,var(--rose))}
  footer small{color:#B6A88F;font-size:13px;line-height:1.9}
  .foot-links{display:flex;gap:20px;font-size:14px;flex-wrap:wrap}
  .foot-links a{color:#E9DECC;opacity:.85}
  .foot-links a:hover{opacity:1;color:#fff}

  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto}}

  @media (max-width:1000px){ .lec-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:940px){
    .nav-menu{display:none}
    .hero-grid,.about-grid,.req-grid,.res-grid{grid-template-columns:1fr}
    .hero{padding-top:44px}
    .portrait-frame{order:-1;margin-bottom:6px}
    .steps{grid-template-columns:1fr 1fr;gap:22px}
    .step:not(:last-child)::after{display:none}
    .about-photo{margin-bottom:8px}
  }
  @media (max-width:560px){
    .lec-grid{grid-template-columns:1fr}
    .field.row{grid-template-columns:1fr}
    section{padding:20px 0}
    .aiband-in{gap:10px}
    .form{padding:24px}
  }

  /* 수강생 전용 자료실 */
  .access-badge{display:inline-flex;align-items:center;gap:7px;background:#F1E9DF;border:1px solid var(--line);color:#65584B;border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:800;margin-top:14px}
  .access-badge::before{content:"🔒";font-size:13px}
  .restricted-note{margin-top:18px;padding:15px 17px;border-radius:14px;background:#FFF5F1;border:1px solid #F0D3CC;color:#705B52;font-size:13.5px;line-height:1.65}
  .restricted-note b{color:var(--rose-deep)}
  .res.private .ic{background:linear-gradient(140deg,var(--rose),#DE7C6A)}
  .res.classroom .ic{background:linear-gradient(140deg,var(--sage),#9FC3A8)}

  /* Google Form 강의 의뢰 */
  .form-cta{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:center;min-height:100%}
  .form-cta .mini{font-family:var(--hand);font-size:18px;font-weight:700;color:var(--rose);margin-bottom:6px}
  .form-cta h3{font-size:27px;margin-bottom:12px}
  .form-cta p{color:var(--ink-soft);font-size:15px;margin:0 0 22px}
  .form-points{display:grid;gap:10px;margin:0 0 22px;padding:0;list-style:none}
  .form-points li{display:flex;gap:10px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:12px 14px;font-size:14px}
  .form-points li::before{content:"✓";color:var(--rose);font-weight:900}
  .form-cta .small-note{font-size:12.5px;color:#958675;margin-top:12px;text-align:center}


  .top-btn{position:fixed;right:22px;bottom:22px;z-index:90;width:54px;height:54px;border:0;border-radius:999px;background:var(--rose);color:#fff;box-shadow:0 14px 30px -10px rgba(200,65,92,.7);font-weight:800;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:.22s ease}
  .top-btn.show{opacity:1;visibility:visible;transform:none}
  .top-btn span{display:block;font-size:16px;line-height:1}.top-btn small{display:block;font-size:10px}


  /* ABOUT 확장 영역 */
  .about{background:var(--paper)}
  .about-intro{margin-bottom:46px}
  .about-details{display:grid;gap:30px;margin-top:44px}
  .about-block{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--shadow-sm)}
  .about-block h3{font-size:23px;margin-bottom:8px}
  .about-block .block-desc{margin:0 0 20px;color:var(--ink-soft);font-size:14.5px}
  .history-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .history-item{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:16px}
  .history-item b{display:block;font-family:var(--serif);font-size:16px;margin-bottom:5px}
  .history-item span{font-size:13px;color:var(--ink-soft);line-height:1.55}
  .field-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .field-card{border:1px solid var(--line);border-radius:17px;padding:18px;background:var(--paper)}
  .field-card h4{font-family:var(--serif);font-size:18px;margin:0 0 9px}
  .field-card p{margin:0;color:var(--ink-soft);font-size:13.5px;line-height:1.75}
  .qual-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .qual-group{background:var(--paper);border:1px solid var(--line);border-radius:17px;padding:18px}
  .qual-group h4{font-family:var(--serif);font-size:17px;margin:0 0 10px;color:var(--rose-deep)}
  .qual-group ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
  .qual-group li{font-size:13px;color:#5f5346;line-height:1.45;padding-left:13px;position:relative}
  .qual-group li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--rose);position:absolute;left:0;top:.65em}
  .book-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .book-item{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:16px}
  .book-item b{font-family:var(--serif);display:block;margin-bottom:6px}
  .book-item span{font-size:13px;color:var(--ink-soft);line-height:1.7}
  .book-item strong{color:var(--rose-deep)}
  @media(max-width:940px){
    .history-grid,.qual-grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:700px){
    .history-grid,.qual-grid,.field-grid,.book-grid{grid-template-columns:1fr}
    .about-block{padding:22px}
  }


  .wave-wrap img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
    border-radius:24px;
  }


  /* CONTACT 캐릭터 영역 개선 */
  .req-side{
    position:relative;
  }
  .wave-wrap{
    position:relative;
    width:min(410px, 96%);
    margin-top:26px;
    margin-left:auto;
    margin-right:8px;
    padding:20px;
    border-radius:34px;
    background:linear-gradient(180deg,#FFF8F1 0%, #F8EFE4 100%);
    border:1px solid #E8D8C7;
    box-shadow:0 18px 40px -24px rgba(73,48,34,.30);
    overflow:visible;
  }
  .wave-wrap::before{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    right:-18px;
    top:-24px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(214,121,103,.22), rgba(214,121,103,0) 70%);
    z-index:0;
  }
  .wave-wrap::after{
    content:"✦  ✦";
    position:absolute;
    left:-8px;
    top:20px;
    color:#D87A6A;
    font-size:24px;
    letter-spacing:8px;
    opacity:.75;
    z-index:1;
  }
  .wave-wrap img{
    position:relative;
    z-index:2;
    width:min(360px, 100%);
    margin:0 auto;
    height:auto;
    display:block;
    object-fit:contain;
    border-radius:28px;
    filter:drop-shadow(0 18px 22px rgba(60,39,27,.10));
  }

  @media(max-width:980px){
    .wave-wrap{
      width:min(380px, 100%);
      margin:20px auto 0;
    }
  }
  @media(max-width:620px){
    .wave-wrap{
      width:100%;
      padding:16px;
      border-radius:26px;
    }
    .wave-wrap::before{
      width:110px;
      height:110px;
      right:-8px;
      top:-10px;
    }
    .wave-wrap::after{
      left:4px;
      top:14px;
      font-size:20px;
    }
    .wave-wrap img{
      width:min(300px, 100%);
    }
  }


  .wave-wrap{
    min-height: 520px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }
  .wave-wrap img{
    width:min(430px, 100%);
    max-height: 620px;
    object-fit:contain;
    display:block;
    margin:0 auto;
  }
  @media(max-width:980px){
    .wave-wrap{
      min-height:auto;
    }
    .wave-wrap img{
      width:min(340px, 100%);
      max-height:none;
    }
  }


  /* 모담 캐릭터 최종 표시 보정 */
  .req-side .wave-wrap{
    width:min(460px, 96%);
    min-height:500px;
    margin:24px auto 0;
    padding:12px 18px 0;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    background:radial-gradient(circle at 55% 40%, rgba(255,255,255,.96), rgba(248,239,228,.72) 58%, rgba(248,239,228,.22) 78%, transparent 100%);
    border:none;
    box-shadow:none;
    overflow:visible;
  }
  .req-side .wave-wrap::before{
    width:180px;
    height:180px;
    right:8px;
    top:34px;
    opacity:.7;
  }
  .req-side .wave-wrap::after{
    content:"✦  ✦";
    left:18px;
    top:72px;
    font-size:22px;
    opacity:.45;
  }
  .req-side .wave-wrap img{
    width:min(430px, 100%);
    max-height:560px;
    height:auto;
    object-fit:contain;
    object-position:center bottom;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:drop-shadow(0 18px 18px rgba(71,47,33,.10));
  }
  @media(max-width:980px){
    .req-side .wave-wrap{
      width:min(390px, 92%);
      min-height:auto;
      padding-top:8px;
    }
    .req-side .wave-wrap img{
      width:min(360px,100%);
      max-height:none;
    }
  }


  /* ABOUT 캐릭터 이미지 최종 수정 */
  .about-photo{
    position:relative;
    justify-self:center;
    width:min(430px, 100%);
    padding:24px 18px 0;
    border-radius:34px;
    background:
      radial-gradient(circle at 50% 28%, rgba(255,255,255,.96), rgba(251,243,230,.86) 48%, rgba(248,233,237,.70) 72%, rgba(248,233,237,.28) 88%, transparent 100%);
    overflow:visible;
  }
  .about-photo::before{
    content:"";
    position:absolute;
    inset:auto auto 22px -12px;
    width:128px;
    height:128px;
    border-radius:50%;
    background:rgba(234, 206, 181, .18);
    z-index:0;
  }
  .about-photo::after{
    content:"✦  ✦";
    position:absolute;
    right:20px;
    top:36px;
    color:#d59a38;
    font-size:24px;
    letter-spacing:10px;
    opacity:.75;
    z-index:2;
  }
  .about-photo img{
    position:relative;
    z-index:1;
    width:100%;
    max-width:400px;
    display:block;
    margin:0 auto;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    filter:drop-shadow(0 18px 26px rgba(74,50,36,.12));
  }
  .about-photo .quote{
    position:absolute;
    right:-4px;
    bottom:34px;
    z-index:3;
    background:rgba(255,255,255,.92);
    border:1px solid #ead7c6;
    border-radius:18px;
    padding:12px 16px;
    box-shadow:0 12px 28px rgba(52,36,25,.08);
    font-family:var(--hand);
    font-size:19px;
    font-weight:700;
    color:var(--ink);
    max-width:190px;
    transform:rotate(-2deg);
  }
  @media (max-width:980px){
    .about-photo{
      width:min(360px, 92%);
      padding:16px 12px 0;
    }
    .about-photo img{
      max-width:330px;
    }
    .about-photo .quote{
      right:4px;
      bottom:20px;
      font-size:17px;
    }
  }


  .about-photo{display:flex;align-items:flex-end;justify-content:center;min-height:520px;padding:12px 12px 0;position:relative;overflow:visible;}
  .about-photo img{display:block;width:min(430px,92%);height:auto;object-fit:contain;border:none;background:transparent;box-shadow:none;filter:drop-shadow(0 18px 24px rgba(60,40,30,.12));position:relative;z-index:2;}
  .about-photo::before{content:"";position:absolute;left:18px;bottom:90px;width:170px;height:170px;border-radius:50%;background:rgba(233,216,205,.45);z-index:0;}
  .about-photo::after{content:"✦ ✦";position:absolute;left:55%;bottom:110px;color:#d6a24d;font-size:28px;letter-spacing:14px;z-index:1;opacity:.9;}
  @media (max-width:980px){.about-photo{min-height:360px}.about-photo img{width:min(320px,84%)}}


  /* quick guide section */
  .guide-section{padding-top:24px}
  .guide-grid{display:grid;grid-template-columns:minmax(300px,440px) 1fr;gap:56px;align-items:center}
  .guide-visual{position:relative;min-height:480px;border-radius:36px;background:linear-gradient(180deg,#FCF8F2 0%,#F7F2EC 100%);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;padding:28px 24px 0}
  .guide-visual::before{content:"";position:absolute;left:26px;bottom:82px;width:180px;height:180px;border-radius:50%;background:rgba(233,216,205,.45);z-index:0}
  .guide-visual::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 30%,rgba(255,255,255,.9),transparent 14%),radial-gradient(circle at 82% 18%,rgba(233,196,106,.7),transparent 12%),radial-gradient(circle at 78% 78%,rgba(255,255,255,.75),transparent 10%);opacity:.85;pointer-events:none}
  .guide-visual img{position:relative;z-index:2;display:block;width:min(92%,380px);height:auto;object-fit:contain;filter:drop-shadow(0 20px 26px rgba(60,40,30,.14))}
  .guide-links{display:grid;gap:20px}
  .guide-links a{display:flex;align-items:center;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:26px 28px;box-shadow:var(--shadow-sm);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
  .guide-links a:hover{transform:translateY(-2px);border-color:var(--rose);box-shadow:0 18px 34px rgba(74,53,39,.10)}
  .guide-links .ic{flex:0 0 54px;width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:var(--rose-soft);color:var(--rose-deep);font-weight:800;font-size:18px}
  .guide-links b{display:block;font-size:18px;line-height:1.35;color:var(--ink)}
  .guide-links small{display:block;margin-top:6px;font-size:15px;line-height:1.55;color:#8a7c6c;font-weight:500}
  @media (max-width:980px){
    .guide-grid{grid-template-columns:1fr;gap:28px}
    .guide-visual{min-height:380px;max-width:440px;width:100%;margin:0 auto}
    .guide-links a{padding:22px}
  }


  /* refined quick guide section */
  .guide-section{padding:26px 0 8px;background:var(--paper)}
  .guide-composite{
    position:relative;
    width:100%;
    border-radius:24px;
    overflow:hidden;
  }
  .guide-composite img{
    display:block;
    width:100%;
    height:auto;
    border-radius:24px;
  }
  .guide-hotspot{
    position:absolute;
    display:block;
    background:transparent;
    outline:none;
    -webkit-tap-highlight-color:transparent;
  }
  .guide-hotspot:focus-visible{
    outline:2px solid rgba(200,65,92,.35);
    outline-offset:2px;
    border-radius:36px;
  }
  .guide-hotspot.top{
    left:46.7%;
    top:24.8%;
    width:50.4%;
    height:20.3%;
  }
  .guide-hotspot.bottom{
    left:46.7%;
    top:48.8%;
    width:50.4%;
    height:20.3%;
  }
  @media (max-width:700px){
    .guide-section{padding-top:18px}
    .guide-composite,
    .guide-composite img{border-radius:18px}
    .guide-hotspot:focus-visible{border-radius:24px}
  }

/* ============ 멀티페이지 확장 (디자인 토큰 그대로 사용) ============ */

/* 현재 페이지 표시 */
.nav-menu a.active{color:var(--ink)}
.nav-menu a.active::after{right:0}

/* 모바일 메뉴 토글 */
.nav-toggle{display:none;background:var(--card);border:1.5px solid var(--line);border-radius:11px;width:42px;height:40px;font-size:19px;line-height:1;cursor:pointer;color:var(--ink)}
.nav-toggle:hover{border-color:var(--rose);color:var(--rose)}

/* 서브페이지 상단 히어로 */
.page-hero{padding:44px 0 8px}
.page-hero .back{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--ink-soft);margin-bottom:16px;transition:color .16s}
.page-hero .back:hover{color:var(--rose)}
.page-hero h1{font-size:clamp(30px,4.4vw,48px);margin:10px 0 12px}
.page-hero p{color:var(--ink-soft);font-size:17px;max-width:640px;margin:0}

/* 홈 - 둘러보기 카드 */
.nav-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.nav-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;box-shadow:var(--shadow-sm);transition:transform .2s ease, box-shadow .2s ease, border-color .2s;position:relative;overflow:hidden}
.nav-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--rose)}
.nav-card .nc-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:22px;color:#fff;margin-bottom:16px}
.nav-card.c1 .nc-ic{background:linear-gradient(140deg,var(--rose),#E0806F)}
.nav-card.c2 .nc-ic{background:linear-gradient(140deg,var(--blue),#7FB0DE)}
.nav-card.c3 .nc-ic{background:linear-gradient(140deg,var(--sage),#9BC3A6)}
.nav-card.c4 .nc-ic{background:linear-gradient(140deg,var(--amber),#E7BC77)}
.nav-card h3{font-size:20px;margin:0 0 7px}
.nav-card p{color:var(--ink-soft);font-size:14px;margin:0 0 14px;line-height:1.6}
.nav-card .go{font-weight:700;color:var(--rose);font-size:14.5px}
.nav-card:hover .go{color:var(--rose-deep)}

/* CONTACT - 의뢰 CTA */
.contact-cta{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:40px;box-shadow:var(--shadow);text-align:center;max-width:760px;margin:0 auto}
.contact-cta .mini{font-family:var(--hand);font-size:19px;font-weight:700;color:var(--rose);margin-bottom:8px}
.contact-cta h3{font-size:28px;margin-bottom:14px}
.contact-cta p{color:var(--ink-soft);font-size:15.5px;margin:0 auto 26px;max-width:520px}
.contact-cta .btn-rose{padding:16px 34px;font-size:17px}
.contact-cta .small-note{font-size:12.5px;color:#958675;margin-top:16px}
.contact-points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:820px;margin:34px auto 0}
.contact-points li{list-style:none;display:flex;gap:10px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:14px;text-align:left}
.contact-points li::before{content:"✓";color:var(--rose);font-weight:900}
.contact-points{padding:0}

@media (max-width:1000px){ .nav-cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:940px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav-menu{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;background:rgba(251,246,238,.98);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:8px 20px 14px;max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .28s ease, opacity .2s ease}
  .nav-menu.open{max-height:340px;opacity:1;visibility:visible}
  .nav-menu a{padding:12px 0;border-bottom:1px solid rgba(120,90,60,.08);font-size:15.5px}
  .nav-menu a::after{display:none}
  .contact-points{grid-template-columns:1fr}
}
@media (max-width:560px){
  .nav-cards{grid-template-columns:1fr}
  .contact-cta{padding:28px}
}