/* ==========================================================================
   고래싸움에 성장하는 새우들 - AI 마케팅 솔루션
   common.css — design tokens & shared layout
   ========================================================================== */

:root{
  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe; --blue-400:#60a5fa;
  --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8; --blue-800:#1e40af; --blue-900:#1e3a8a;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-150:#eef1f5; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f172a;
  --rose-50:#fff1f2; --rose-100:#ffe4e6; --rose-500:#f43f5e; --rose-600:#e11d48; --rose-800:#9f1239;
  --emerald-50:#ecfdf5; --emerald-100:#d1fae5; --emerald-500:#10b981; --emerald-600:#059669; --emerald-700:#047857;
  --purple-50:#faf5ff; --purple-100:#f3e8ff; --purple-600:#9333ea; --purple-700:#7e22ce;
  --orange-50:#fff7ed; --orange-100:#ffedd5; --orange-600:#ea580c; --orange-700:#c2410c;
  --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-200:#fde68a; --amber-600:#d97706; --amber-700:#b45309; --amber-800:#92400e; --amber-900:#78350f;
  --yellow-400:#facc15;
  --green-50:#f0fdf4; --green-100:#dcfce7; --green-600:#16a34a; --green-800:#166534;
  --indigo-700:#4338ca; --indigo-950:#1e1b4b;
  --red-50:#fef2f2; --red-100:#fee2e2; --red-500:#ef4444; --red-700:#b91c1c;
  --radius-xl:0.75rem; --radius-2xl:1rem; --radius-3xl:1.5rem;
  --shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md:0 4px 12px -2px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.05);
  --shadow-lg:0 10px 25px -5px rgba(15,23,42,.10), 0 4px 6px -4px rgba(15,23,42,.05);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--slate-50);
  color:var(--slate-900);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
button{font-family:inherit;cursor:pointer;background:none;border:none;}
input,textarea,select{font-family:inherit;}
h1,h2,h3,h4,h5,p{margin:0;}
strong{font-weight:700;}

/* ---------------- Header ---------------- */
.header{
  height:64px; background:#fff; border-bottom:1px solid var(--slate-200);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.5rem; position:sticky; top:0; z-index:50; box-shadow:var(--shadow-sm);
}
.header-left{display:flex; align-items:center; gap:2rem;}
.logo-btn{display:flex; align-items:center; gap:.75rem; transition:transform .15s;}
.logo-btn:active{transform:scale(.98);}
.logo-svg{width:2.25rem; height:2.25rem; color:var(--blue-600); flex-shrink:0;}
.logo-text{display:flex; flex-direction:column; line-height:1.2; text-align:left;}
.logo-eyebrow{font-size:.7rem; font-weight:700; color:var(--slate-400); letter-spacing:.03em;}
.logo-title{font-size:1rem; font-weight:800; color:var(--slate-900);}
.logo-title .accent{color:var(--blue-600);}

.nav-desktop{display:none; gap:2rem; height:64px;}
@media(min-width:768px){.nav-desktop{display:flex;}}
.nav-link{
  font-weight:600; font-size:.9rem; color:var(--slate-500); height:100%;
  display:flex; align-items:center; position:relative; transition:color .15s;
}
.nav-link:hover{color:var(--slate-800);}
.nav-link.active{color:var(--blue-600);}
.nav-link.active::after{
  content:""; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:var(--blue-600); border-radius:2px 2px 0 0;
}

.user-badge{
  display:flex; align-items:center; gap:.5rem; background:var(--slate-50);
  border:1px solid rgba(226,232,240,.6); border-radius:.75rem; padding:.375rem .875rem; box-shadow:var(--shadow-sm);
}
.user-icon{
  width:26px; height:26px; border-radius:50%; background:var(--blue-50); color:var(--blue-600);
  display:flex; align-items:center; justify-content:center; border:1px solid var(--blue-100);
}
.user-name{font-size:.8rem; font-weight:600; color:var(--slate-700);}
@media(max-width:640px){.user-name{display:none;}}

/* ---------------- Mobile nav ---------------- */
.nav-mobile{
  display:flex; background:#fff; border-bottom:1px solid var(--slate-200);
  justify-content:space-around; padding:.625rem 1rem; position:sticky; top:64px; z-index:40; box-shadow:var(--shadow-sm);
}
@media(min-width:768px){.nav-mobile{display:none;}}
.nav-mobile-btn{
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  padding:.25rem .75rem; border-radius:.75rem; color:var(--slate-500); transition:all .15s;
}
.nav-mobile-btn span{font-size:.65rem;}
.nav-mobile-btn.active{background:var(--blue-50); color:var(--blue-600); font-weight:700;}

/* ---------------- Main / layout ---------------- */
.main{max-width:1280px; width:100%; margin:0 auto; padding:1.5rem 1rem;}
@media(min-width:640px){.main{padding:1.5rem;}}
@media(min-width:1024px){.main{padding:2rem;}}

.page-head{margin-bottom:1.5rem;}
.eyebrow{
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--blue-600);
  background:var(--blue-50); padding:.25rem .625rem; border-radius:.375rem;
  display:inline-flex; align-items:center; gap:.3rem;
}
.page-title{font-size:1.5rem; font-weight:800; color:var(--slate-900); margin-top:.5rem; letter-spacing:-.01em;}
@media(min-width:640px){.page-title{font-size:1.85rem;}}
.page-desc{font-size:.875rem; color:var(--slate-500); margin-top:.375rem;}

.panel{display:none;}
.panel.active{display:block; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

.grid-12{display:grid; grid-template-columns:1fr; gap:2rem; align-items:start;}
@media(min-width:1024px){.grid-12{grid-template-columns:repeat(12,1fr);}}
.col-5{grid-column:span 12;}
.col-7{grid-column:span 12;}
@media(min-width:1024px){
  .col-5{grid-column:span 5;}
  .col-7{grid-column:span 7;}
}

/* ---------------- Cards ---------------- */
.card{
  background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-sm); padding:1.5rem;
}
@media(min-width:640px){.card{padding:2rem;}}
.form-card .card-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem;
}
.form-card .card-head.no-btn{padding-bottom:1rem; border-bottom:1px solid var(--slate-100); margin-bottom:1.5rem;}
.form-card h2{font-size:1.15rem; font-weight:700; display:flex; align-items:center; gap:.5rem; color:#111827;}
@media(min-width:640px){.form-card h2{font-size:1.3rem;}}
.icon-blue{color:var(--blue-600);}
.demo-btn{
  font-size:.7rem; font-weight:700; padding:.375rem .75rem; border-radius:.5rem;
  background:var(--blue-50); color:var(--blue-700); border:1px solid var(--blue-200); transition:background .15s;
}
.demo-btn:hover{background:var(--blue-100);}

/* ---------------- Form fields ---------------- */
.field{margin-bottom:1.25rem;}
.field label{
  display:flex; align-items:center; font-size:.85rem; font-weight:600; color:#374151; margin-bottom:.375rem; gap:.2rem;
}
.field label.label-between{justify-content:space-between; font-weight:700; color:var(--slate-700); font-size:.8rem;}
.hint-inline{font-size:.7rem; color:var(--blue-600); font-weight:500;}
.char-count{font-size:.7rem; color:var(--slate-400); font-weight:400;}
.req{color:var(--rose-500);}
.field input[type=text], .field textarea, .field select{
  width:100%; padding:.75rem 1rem; border-radius:.75rem; border:1px solid var(--slate-200);
  color:#111827; font-size:.9rem; transition:border-color .15s, box-shadow .15s;
}
.field textarea{resize:none; line-height:1.6;}
.field textarea.mono{font-family:'SFMono-Regular',Consolas,monospace; font-size:.82rem;}
.field select{background:#fff; padding:.65rem .75rem; font-size:.85rem;}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:transparent; box-shadow:0 0 0 2px var(--blue-500);
}
.field input::placeholder, .field textarea::placeholder{color:#9ca3af;}
.field-row{display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:1.25rem;}
@media(min-width:640px){.field-row{grid-template-columns:1fr 1fr;}}
.field-row .field{margin-bottom:0;}

.tip-btn{
  width:16px; height:16px; border-radius:50%; color:var(--slate-400); font-size:.65rem; font-weight:700;
  border:1px solid var(--slate-300); display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-left:.3rem; transition:all .15s;
}
.tip-btn:hover{color:var(--blue-600); border-color:var(--blue-400); background:var(--blue-50);}

.tooltip-popup{
  position:fixed; z-index:999; max-width:260px; background:var(--slate-800); color:#fff;
  font-size:.72rem; font-weight:400; line-height:1.6; padding:.75rem; border-radius:.75rem;
  box-shadow:var(--shadow-lg); display:none; pointer-events:none;
}

.tone-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem;}
.tone-opt{
  display:flex; align-items:center; justify-content:center; padding:.625rem .75rem; border-radius:.75rem;
  border:1px solid var(--slate-200); cursor:pointer; font-weight:500; font-size:.85rem; color:#4b5563; transition:all .15s;
}
.tone-opt:hover{border-color:var(--slate-300); background:var(--slate-50);}
.tone-opt.active{border-color:var(--blue-600); background:var(--blue-50); color:var(--blue-800); box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.tone-opt input{display:none;}

.submit-btn{
  width:100%; padding:1rem 1.5rem; border-radius:.75rem; font-weight:700; color:#fff; font-size:1rem;
  display:flex; align-items:center; justify-content:center; gap:.625rem; transition:all .15s;
  background:var(--blue-600); box-shadow:var(--shadow-md); margin-top:.25rem;
}
.submit-btn:hover{background:var(--blue-700); box-shadow:0 8px 20px -4px rgba(37,99,235,.35);}
.submit-btn:active{transform:scale(.98);}
.submit-btn.loading{background:#93c5fd; cursor:not-allowed;}
.submit-btn.loading:hover{background:#93c5fd; box-shadow:var(--shadow-md);}
.spin{animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------------- Result column / empty state ---------------- */
.result-col{display:flex; flex-direction:column; min-height:420px;}
.empty-state{
  flex-grow:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(239,246,255,.4); border:1px dashed var(--blue-200); border-radius:var(--radius-2xl);
  padding:2.5rem 2rem; text-align:center;
}
.empty-icon{
  width:64px; height:64px; border-radius:1rem; background:#fff; border:1px solid var(--blue-100);
  box-shadow:var(--shadow-sm); color:var(--blue-600); display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.empty-state h3{font-size:1.05rem; font-weight:700; color:#1f2937; margin-bottom:.5rem;}
.empty-state p{font-size:.85rem; color:#6b7280; max-width:26rem; line-height:1.7;}
.pill-legend{
  margin-top:1rem; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; align-items:center;
  font-size:.72rem; font-weight:600; color:var(--slate-500); background:#fff; padding:.625rem 1.125rem;
  border-radius:1rem; border:1px solid var(--slate-200); box-shadow:var(--shadow-sm);
}
.pill-legend .sep{color:var(--slate-300);}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:.25rem;}
.dot-blue{background:var(--blue-500);} .dot-emerald{background:var(--emerald-500);}
.dot-purple{background:var(--purple-600);} .dot-orange{background:var(--orange-600);}

/* Loading skeleton */
.skeleton{background:#fff; border:1px solid var(--slate-100); border-radius:var(--radius-2xl); box-shadow:var(--shadow-sm); padding:2rem; flex-grow:1;}
.sk-bar{background:var(--slate-100); border-radius:.375rem; height:1rem;}
.sk-bar.blue{background:var(--blue-100);}
.sk-pulse{animation:pulse 1.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}

/* Error box */
.error-box{
  padding:1.125rem; background:var(--rose-50); border:1px solid var(--rose-100); border-radius:var(--radius-2xl);
  display:flex; gap:.875rem; color:var(--rose-800); margin-bottom:1.5rem; box-shadow:var(--shadow-sm);
}
.error-box h4{font-weight:700; font-size:1.05rem; margin-bottom:.25rem;}
.error-box p{font-size:.85rem; line-height:1.6;}

/* Success banner */
.success-banner{
  padding:1rem; background:var(--blue-50); border:1px solid var(--blue-100); border-radius:.75rem;
  display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem;
}
.ping-badge{position:relative; width:12px; height:12px; flex-shrink:0;}
.ping-badge::before{
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--blue-400); opacity:.75; animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite;
}
.ping-badge::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--blue-500);}
@keyframes ping{75%,100%{transform:scale(2.2); opacity:0;}}
.success-banner p{font-size:.82rem; font-weight:700; color:var(--blue-800);}

/* Result cards (Naver) */
.result-card{
  background:#fff; border-radius:var(--radius-2xl); border:1px solid #f3f4f6; box-shadow:var(--shadow-sm);
  padding:1.5rem; margin-bottom:1.5rem; transition:border-color .15s;
}
.result-card:hover{border-color:var(--blue-200);}
.result-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem;}
.result-card-head h3{font-size:1rem; font-weight:700; color:#111827; display:flex; align-items:center; gap:.5rem;}
.copy-btn{
  font-size:.72rem; font-weight:700; padding:.375rem .75rem; border-radius:.5rem; display:flex; align-items:center; gap:.375rem;
  background:#f3f4f6; color:#374151; transition:all .15s;
}
.copy-btn:hover{background:#e5e7eb;}
.copy-btn.copied{background:var(--blue-600); color:#fff;}
.result-text-box{background:rgba(249,250,251,.7); padding:1.125rem; border-radius:.75rem; border:1px solid #f3f4f6;}
.result-text-box p{color:#1f2937; font-size:.9rem; line-height:1.7; white-space:pre-wrap;}
.kw-hint{font-size:.72rem; color:#6b7280; margin-bottom:.875rem;}
.kw-list{display:flex; flex-wrap:wrap; gap:.5rem;}
.kw-chip{
  padding:.375rem .875rem; background:rgba(239,246,255,.7); color:var(--blue-800); font-size:.85rem; font-weight:600;
  border-radius:9999px; border:1px solid rgba(219,234,254,.6); box-shadow:var(--shadow-sm);
}
.faq-item{background:rgba(239,246,255,.3); padding:1rem; border-radius:.75rem; border:1px solid rgba(239,246,255,.8); margin-bottom:1rem;}
.faq-item:last-child{margin-bottom:0;}
.faq-q{display:flex; gap:.5rem; margin-bottom:.5rem;}
.faq-q b{color:var(--blue-700); font-size:.9rem;}
.faq-q p{font-weight:700; color:#111827; font-size:.9rem;}
.faq-a{display:flex; gap:.5rem; padding-left:1rem; border-left:2px solid var(--blue-100);}
.faq-a b{color:var(--blue-600); font-size:.9rem;}
.faq-a p{color:#374151; font-size:.9rem; line-height:1.7; white-space:pre-wrap;}

.download-banner{
  background:linear-gradient(90deg,var(--blue-600),var(--indigo-700)); border-radius:var(--radius-2xl); padding:1.5rem; color:#fff;
  display:flex; flex-direction:column; gap:1rem; box-shadow:var(--shadow-md);
}
@media(min-width:640px){.download-banner{flex-direction:row; align-items:center; justify-content:space-between;}}
.download-banner h4{font-weight:800; font-size:1rem; display:flex; align-items:center; gap:.5rem;}
.download-banner p{font-size:.72rem; color:#dbeafe; margin-top:.25rem;}
.download-btn{
  background:#fff; color:var(--blue-700); font-weight:800; padding:.75rem 1.25rem; border-radius:.75rem;
  box-shadow:var(--shadow-md); font-size:.8rem; white-space:nowrap; transition:all .15s;
}
.download-btn:hover{background:var(--blue-50);}
.download-btn:active{transform:scale(.95);}

/* ---------------- Meta ads: tabs ---------------- */
.variant-tabs{display:flex; border-bottom:1px solid var(--slate-200); overflow-x:auto; margin-bottom:1.5rem; gap:0;}
.variant-tab{
  padding:.75rem 1.25rem; font-weight:700; font-size:.82rem; color:var(--slate-500); white-space:nowrap;
  position:relative; margin-bottom:-1px; flex-shrink:0; transition:color .15s;
}
.variant-tab:hover{color:#374151;}
.variant-tab.active{color:var(--blue-600); border-bottom:2px solid var(--blue-600);}

.variant-card{background:#fff; border-radius:var(--radius-2xl); border:1px solid #e2e8f0cc; box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column;}
.variant-head{padding:1.25rem; background:var(--slate-50); border-bottom:1px solid var(--slate-150); display:flex; flex-direction:column; gap:1rem;}
@media(min-width:640px){.variant-head{flex-direction:row; align-items:center; justify-content:space-between;}}
.variant-strategy{display:inline-block; background:var(--blue-100); color:var(--blue-800); font-size:.62rem; font-weight:800; padding:.125rem .625rem; border-radius:9999px; margin-bottom:.25rem;}
.variant-head h3{font-size:1.05rem; font-weight:700; color:#1e293b;}
.copy-full-btn{
  font-size:.72rem; font-weight:700; padding:.65rem .9rem; border-radius:.75rem; display:flex; align-items:center; justify-content:center; gap:.375rem;
  background:var(--blue-600); color:#fff; box-shadow:var(--shadow-sm); flex-shrink:0; align-self:flex-start;
}
.copy-full-btn:hover{background:var(--blue-700);}
.copy-full-btn.copied{background:var(--emerald-600);}

.subtabs{background:rgba(241,245,249,.5); padding:.375rem; display:flex; gap:.25rem; border-bottom:1px solid var(--slate-200); overflow-x:auto;}
.subtab-btn{
  flex:1; padding:.5rem .75rem; font-size:.72rem; font-weight:700; border-radius:.5rem; color:var(--slate-600); white-space:nowrap; transition:all .15s;
}
.subtab-btn:hover{color:#1e293b; background:rgba(226,232,240,.5);}
.subtab-btn.active{background:#fff; box-shadow:var(--shadow-sm); border:1px solid var(--slate-200);}
.subtab-btn.active[data-sub="meta"]{color:var(--blue-600);}
.subtab-btn.active[data-sub="daangn"]{color:var(--emerald-600);}
.subtab-btn.active[data-sub="shortform"]{color:var(--purple-600);}
.subtab-btn.active[data-sub="photosetup"]{color:var(--orange-600);}

.subtab-body{padding:1.5rem;}
.subtab-content{display:none;}
.subtab-content.active{display:block; animation:fadeIn .2s ease;}

.sec-block{margin-bottom:1.25rem;}
.sec-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem;}
.sec-label{font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; display:flex; align-items:center; gap:.375rem;}
.sec-label.blue{color:var(--blue-700);}
.sec-label.emerald{color:var(--emerald-700);}
.sec-label.purple{color:var(--purple-700);}
.sec-label.orange{color:var(--orange-700);}
.icon-mini-btn{color:var(--slate-400); transition:color .15s;}
.icon-mini-btn:hover{color:var(--blue-600);}
.sec-box{padding:1rem; background:var(--slate-50); border:1px solid var(--slate-150); border-radius:.75rem;}
.sec-box p{color:#1e293b; font-size:.9rem; line-height:1.7; white-space:pre-wrap;}
.sec-box.headline p{font-weight:800; font-size:1rem;}
.sec-box.scroll{max-height:250px; overflow-y:auto;}

.cta-tag-grid{display:grid; grid-template-columns:1fr; gap:1rem;}
@media(min-width:640px){.cta-tag-grid{grid-template-columns:1fr 1fr;}}
.cta-box{padding:.875rem; background:rgba(239,246,255,.5); border:1px solid var(--blue-100); border-radius:.75rem; display:flex; align-items:center; justify-content:space-between;}
.cta-box span{font-weight:700; color:#1e293b; font-size:.85rem;}
.tag-box{padding:.875rem; background:var(--slate-50); border:1px solid var(--slate-150); border-radius:.75rem; display:flex; flex-wrap:wrap; gap:.25rem;}
.tag-chip{font-size:.72rem; font-weight:600; color:var(--slate-500); background:#fff; border:1px solid var(--slate-200); padding:.125rem .5rem; border-radius:.375rem;}

.daangn-card{padding:1.25rem; background:rgba(236,253,245,.25); border:1px solid var(--emerald-100); border-radius:.75rem;}
.daangn-top{display:flex; align-items:center; gap:.5rem; padding-bottom:.625rem; border-bottom:1px solid rgba(209,250,229,.5); margin-bottom:1rem;}
.daangn-icon{width:28px; height:28px; background:var(--emerald-500); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.8rem;}
.daangn-top .t1{font-size:.72rem; font-weight:700; color:#1e293b;}
.daangn-top .t2{font-size:.62rem; color:#94a3b8;}
.daangn-card p.body{color:#1e293b; font-size:.9rem; line-height:1.7; white-space:pre-wrap;}
.daangn-foot{margin-top:.625rem; padding-top:.625rem; border-top:1px solid rgba(209,250,229,.5); display:flex; justify-content:space-between; align-items:center;}
.daangn-foot span.hint{font-size:.72rem; color:#94a3b8;}
.daangn-foot span.cta{font-size:.72rem; font-weight:700; color:var(--emerald-700); background:rgba(209,250,229,.7); padding:.25rem .625rem; border-radius:.5rem;}
.tip-box{margin-top:1rem; padding:1rem; background:var(--slate-50); border:1px solid var(--slate-200); border-radius:.75rem; display:flex; gap:.625rem; font-size:.72rem; color:#64748b; line-height:1.7;}

.timeline{display:flex; flex-direction:column; gap:0; margin-bottom:1.5rem;}
.tl-row{display:flex; gap:1rem;}
.tl-num-col{display:flex; flex-direction:column; align-items:center;}
.tl-num{width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; flex-shrink:0; background:var(--purple-100); border:1px solid #e9d5ff; color:var(--purple-700);}
.tl-num.final{background:var(--purple-600); color:#fff; border:none; box-shadow:var(--shadow-sm);}
.tl-line{width:2px; flex-grow:1; background:var(--purple-100); margin:.25rem 0;}
.tl-body{flex-grow:1; padding-bottom:1rem;}
.tl-label{font-size:.72rem; font-weight:700; color:var(--purple-600); margin-bottom:.25rem;}
.tl-box{padding:1rem; background:rgba(250,245,255,.3); border:1px solid var(--purple-100); border-radius:.75rem;}
.tl-box.final{background:rgba(250,245,255,.5); border-color:#e9d5ff;}
.tl-box p{color:#1e293b; font-size:.9rem; white-space:pre-wrap;}

.bgm-box{padding:1.125rem; background:var(--slate-50); border:1px solid var(--slate-200); border-radius:.75rem; display:flex; gap:.875rem;}
.bgm-icon{padding:.5rem; background:var(--purple-100); color:var(--purple-700); border-radius:.5rem; flex-shrink:0; display:flex;}
.bgm-box .t1{font-size:.72rem; font-weight:800; color:#1e293b; margin-bottom:.125rem;}
.bgm-box .t2{font-size:.8rem; color:#475569; line-height:1.7;}

.photo-grid{display:grid; grid-template-columns:1fr; gap:1.5rem; margin-bottom:1.5rem;}
@media(min-width:768px){.photo-grid{grid-template-columns:1fr 1fr;}}
.photo-guide-title{font-size:.72rem; font-weight:800; color:var(--orange-700); display:flex; align-items:center; gap:.25rem; margin-bottom:.75rem;}
.photo-guide-box{padding:1rem; background:rgba(255,247,237,.2); border:1px solid var(--orange-100); border-radius:.75rem; height:100%;}
.photo-guide-box p{font-size:.9rem; color:#374151; line-height:1.7; white-space:pre-wrap;}
.prompt-box{padding:1rem; background:#0f172a; color:#cbd5e1; font-family:monospace; font-size:.75rem; border-radius:.75rem; border:1px solid #1e293b; height:100%; line-height:1.7;}

.viewfinder{position:relative; overflow:hidden; border-radius:var(--radius-2xl); border:1px solid var(--slate-200); background:rgba(15,23,42,.04); aspect-ratio:16/6; display:flex; align-items:center; justify-content:center; padding:1.5rem; text-align:center;}
.viewfinder .corner{position:absolute; width:24px; height:24px; border-color:#94a3b8;}
.corner.tl{top:1rem; left:1rem; border-top:2px solid; border-left:2px solid;}
.corner.tr{top:1rem; right:1rem; border-top:2px solid; border-right:2px solid;}
.corner.bl{bottom:1rem; left:1rem; border-bottom:2px solid; border-left:2px solid;}
.corner.br{bottom:1rem; right:1rem; border-bottom:2px solid; border-right:2px solid;}
.viewfinder-tag{font-size:.6rem; text-transform:uppercase; font-weight:700; color:var(--orange-600); background:var(--orange-50); display:inline-block; padding:.125rem .625rem; border-radius:9999px; margin-bottom:.375rem;}
.viewfinder h6{font-size:.85rem; font-weight:800; color:#1e293b;}
.viewfinder .vf-sub{font-size:.68rem; color:#94a3b8; margin-top:.25rem;}

.variant-footer{padding:1.25rem; background:var(--slate-50); border-top:1px solid var(--slate-150); display:flex; flex-direction:column; gap:1rem; margin-top:auto;}
@media(min-width:640px){.variant-footer{flex-direction:row; align-items:center; justify-content:space-between;}}
.variant-footer h4{font-weight:800; font-size:.9rem; color:#1e293b; display:flex; align-items:center; gap:.375rem;}
.variant-footer p{font-size:.72rem; color:#64748b; margin-top:.125rem;}
.variant-download-btn{background:var(--blue-600); color:#fff; font-weight:800; padding:.65rem 1.25rem; border-radius:.75rem; box-shadow:var(--shadow-md); font-size:.8rem; white-space:nowrap; display:flex; align-items:center; gap:.375rem;}
.variant-download-btn:hover{background:var(--blue-700);}

/* ---------------- Mind (customer mind) ---------------- */
.mind-banner{
  background:linear-gradient(90deg,var(--blue-900),var(--slate-900) 55%,var(--indigo-950));
  color:#fff; border-radius:1.5rem; padding:1.75rem; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
@media(min-width:640px){.mind-banner{padding:2rem;}}
.mind-banner::after{content:""; position:absolute; right:-5rem; top:-5rem; width:24rem; height:24rem; background:rgba(37,99,235,.1); border-radius:50%; filter:blur(60px); pointer-events:none;}
.mind-badge{position:relative; z-index:1; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#93c5fd; background:rgba(30,58,138,.5); border:1px solid rgba(30,64,175,.8); padding:.25rem .75rem; border-radius:9999px; display:inline-flex; align-items:center; gap:.375rem; margin-bottom:1rem;}
.mind-banner h2{position:relative; z-index:1; font-size:1.5rem; font-weight:800; letter-spacing:-.01em; max-width:44rem;}
@media(min-width:640px){.mind-banner h2{font-size:1.85rem;}}
.mind-banner > p{position:relative; z-index:1; margin-top:.75rem; font-size:.9rem; color:#cbd5e1; line-height:1.75; max-width:44rem;}
.mind-tags{position:relative; z-index:1; margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; font-size:.72rem; color:#bfdbfe;}
.mind-tags span{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); padding:.25rem .625rem; border-radius:.5rem;}

.dark-card{background:var(--slate-900); color:#f1f5f9; border-radius:1rem; padding:1.5rem; border:1px solid #1e293b; box-shadow:var(--shadow-lg); margin-bottom:1.5rem;}
@media(min-width:640px){.dark-card{padding:2rem;}}
.dark-card h4{font-weight:800; font-size:1rem; color:var(--yellow-400); display:flex; align-items:center; gap:.5rem; margin-bottom:1rem;}
.dark-card > p{font-size:.85rem; color:#cbd5e1; line-height:1.7; margin-bottom:1rem;}
.numbered-list{display:flex; flex-direction:column; gap:.75rem; font-size:.75rem;}
.numbered-list > div{display:flex; gap:.625rem;}
.numbered-list .num{width:20px; height:20px; border-radius:50%; background:rgba(250,204,21,.2); color:var(--yellow-400); font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.7rem;}
.numbered-list p{color:#cbd5e1; line-height:1.6;}

.metrics-card{background:#fff; border-radius:1rem; padding:1.5rem; border:1px solid var(--slate-200); box-shadow:var(--shadow-sm);}
.metrics-card h4{font-weight:700; font-size:.82rem; color:#1e293b; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.75rem;}
.metrics-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
.metric{padding:.875rem; border-radius:.75rem; text-align:center;}
.metric-blue{background:rgba(239,246,255,.5); border:1px solid var(--blue-100);}
.metric-green{background:rgba(240,253,244,.5); border:1px solid var(--green-100);}
.metric span{font-size:1.5rem; font-weight:800;}
.metric-blue span{color:var(--blue-600);}
.metric-green span{color:var(--green-600);}
.metric p{font-size:.68rem; color:#64748b; margin-top:.25rem; font-weight:500;}

.loading-tip{margin-top:1rem; padding:1rem; background:rgba(239,246,255,.5); border:1px solid var(--blue-100); border-radius:.75rem; font-size:.8rem; color:var(--blue-800);}
.loading-tip-head{display:flex; align-items:center; gap:.5rem; font-weight:700; margin-bottom:.25rem;}
.ping-dot{width:8px; height:8px; background:var(--blue-600); border-radius:50%; animation:ping 1.4s cubic-bezier(0,0,.2,1) infinite;}
.loading-tip p{font-style:italic; color:var(--blue-600);}

/* Mind result */
.mind-result{margin-top:2rem; display:flex; flex-direction:column; gap:2rem;}
.score-card{background:#fff; border:2px solid var(--blue-500); border-radius:1.5rem; padding:1.5rem; box-shadow:var(--shadow-lg); display:grid; grid-template-columns:1fr; gap:2rem; align-items:center;}
@media(min-width:640px){.score-card{padding:2rem;}}
@media(min-width:768px){.score-card{grid-template-columns:repeat(12,1fr);}}
.score-left{grid-column:span 12; text-align:center; padding-bottom:1.5rem; border-bottom:1px solid var(--slate-200); display:flex; flex-direction:column; align-items:center; justify-content:center;}
@media(min-width:768px){.score-left{grid-column:span 4; border-bottom:none; border-right:1px solid var(--slate-200); padding-bottom:0; padding-right:2rem;}}
.score-eyebrow{font-size:.7rem; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em;}
.score-gauge{position:relative; width:9rem; height:9rem; display:flex; align-items:center; justify-content:center; margin-top:.75rem;}
.score-gauge svg{width:100%; height:100%; transform:rotate(-90deg);}
.score-num{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.score-num .n{font-size:2.25rem; font-weight:800; color:#0f172a; letter-spacing:-.02em;}
.score-num .d{font-size:.62rem; font-weight:700; color:#94a3b8; margin-top:.125rem;}
.score-badge{display:inline-flex; margin-top:1rem; padding:.25rem .75rem; border-radius:9999px; font-size:.72rem; font-weight:700;}
.score-badge.high{background:var(--green-100); color:var(--green-800);}
.score-badge.mid{background:#fef9c3; color:#854d0e;}
.score-badge.low{background:var(--red-100); color:var(--red-700);}
.score-right{grid-column:span 12;}
@media(min-width:768px){.score-right{grid-column:span 8;}}
.score-right-head{display:flex; align-items:center; gap:.5rem; margin-bottom:1rem;}
.score-right-head h4{font-weight:800; font-size:1.05rem; color:#0f172a;}
.score-summary{font-size:.9rem; color:#334155; line-height:1.7; font-weight:500; margin-bottom:1rem;}
.score-point{background:var(--slate-50); border:1px solid #e2e8f099; border-radius:.75rem; padding:1rem; display:flex; gap:.75rem;}
.score-point p{font-size:.82rem; color:#475569; line-height:1.7;}

.diag-grid{display:grid; grid-template-columns:1fr; gap:1rem;}
@media(min-width:768px){.diag-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1280px){.diag-grid{grid-template-columns:repeat(5,1fr);}}
.diag-card{background:#fff; border-radius:1rem; border:1px solid var(--slate-200); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;}
.diag-top{padding:1.25rem;}
.diag-head{display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem;}
.diag-icon{padding:.5rem; border-radius:.5rem; flex-shrink:0; display:flex;}
.diag-icon.c1{background:var(--blue-50); color:var(--blue-600);}
.diag-icon.c2{background:var(--orange-50); color:var(--orange-600);}
.diag-icon.c3{background:#fefce8; color:#ca8a04;}
.diag-icon.c4{background:var(--green-50); color:var(--green-600);}
.diag-icon.c5{background:var(--red-50); color:var(--red-500);}
.diag-head span.name{font-weight:700; font-size:.85rem; color:#1e293b;}
.diag-status{font-size:.7rem; font-weight:700; color:var(--amber-600); background:var(--amber-50); padding:.125rem .5rem; border-radius:.25rem;}
.diag-analysis{font-size:.72rem; color:#64748b; margin-top:.875rem; line-height:1.7;}
.diag-bottom{margin-top:1rem; padding:1rem; background:var(--slate-50); border-top:1px solid var(--slate-100);}
.diag-guide-label{font-size:.62rem; font-weight:700; color:var(--blue-600); display:flex; align-items:center; gap:.125rem; margin-bottom:.25rem;}
.diag-guide-text{font-size:.72rem; color:#475569; font-weight:500; line-height:1.7;}

.copy-solution{background:#fff; border-radius:1.5rem; border:1px solid #e2e8f0cc; padding:1.5rem; box-shadow:var(--shadow-md); position:relative; overflow:hidden;}
@media(min-width:640px){.copy-solution{padding:2rem;}}
.cs-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:1.25rem; border-bottom:1px solid var(--slate-100);}
.cs-head h4{font-weight:800; font-size:1.1rem; color:#0f172a; display:flex; align-items:center; gap:.5rem;}
@media(min-width:640px){.cs-head h4{font-size:1.25rem;}}
.cs-copy-btn{display:flex; align-items:center; gap:.375rem; padding:.5rem .875rem; border-radius:.75rem; border:1px solid var(--slate-200); font-size:.72rem; font-weight:700; color:#475569; transition:all .15s;}
.cs-copy-btn:hover{background:var(--slate-50);}
.cs-copy-btn.copied{color:var(--green-600);}
.cs-body{padding-top:1.5rem; display:flex; flex-direction:column; gap:1.5rem;}
.headline-box{padding:1.25rem; background:linear-gradient(90deg,var(--blue-50),#eef2ff); border:1px solid var(--blue-100); border-radius:1rem; position:relative;}
.headline-tag{position:absolute; top:.625rem; right:.75rem; font-size:.6rem; font-weight:800; color:var(--blue-500); text-transform:uppercase; letter-spacing:.03em; background:#fff; padding:.125rem .5rem; border-radius:.25rem; border:1px solid var(--blue-100);}
.headline-box p{font-size:1.05rem; font-weight:800; color:#0f172a; padding-right:3rem; line-height:1.6;}
.body-box-wrap{position:relative;}
.body-tag{position:absolute; top:0; right:.375rem; font-size:.6rem; font-weight:800; color:#6366f1; text-transform:uppercase; letter-spacing:.03em; background:#fff; padding:.125rem .5rem; border-radius:.25rem; border:1px solid #e0e7ff; z-index:1;}
.body-box{background:var(--slate-50); border:1px solid #e2e8f0cc; border-radius:1rem; padding:2rem 1.25rem 1.25rem; font-size:.85rem; color:#374151; line-height:1.8; font-family:monospace; white-space:pre-line;}
.cta-row{display:flex; flex-direction:column; gap:1rem; padding:1rem; background:#0f172a; color:#fff; border-radius:1rem;}
@media(min-width:640px){.cta-row{flex-direction:row; align-items:center; justify-content:space-between;}}
.cta-row-left{display:flex; align-items:center; gap:.75rem;}
.cta-row-left p{font-size:.82rem; font-weight:600;}
.cta-row-left strong{color:var(--yellow-400);}
.cta-ping{width:10px; height:10px; border-radius:50%; background:var(--yellow-400); flex-shrink:0; animation:ping 1.4s cubic-bezier(0,0,.2,1) infinite;}
.cta-copy-btn{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:.75rem; padding:.5rem 1rem; font-size:.72rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:.375rem; align-self:flex-start;}
.cta-copy-btn:hover{background:rgba(255,255,255,.2);}
.cta-copy-btn.copied{color:#fde047;}

.rationale-box{background:var(--amber-50); border:1px solid var(--amber-200); border-radius:1.5rem; padding:1.5rem; display:flex; flex-direction:column; gap:1rem;}
@media(min-width:640px){.rationale-box{padding:2rem;}}
.rationale-box h4{font-weight:800; font-size:1rem; color:var(--amber-900); display:flex; align-items:center; gap:.5rem;}
@media(min-width:640px){.rationale-box h4{font-size:1.1rem;}}
.rationale-box p.main{font-size:.9rem; color:var(--amber-800); line-height:1.7; font-weight:500;}
.rationale-box .foot{font-size:.72rem; color:var(--amber-700); line-height:1.7; padding-top:.5rem; border-top:1px solid rgba(253,230,138,.6); display:flex; align-items:center; gap:.375rem; font-weight:500;}

/* ---------------- Footer ---------------- */
.footer{background:#fff; border-top:1px solid var(--slate-200); padding:1.5rem 0; text-align:center; font-size:.72rem; color:#94a3b8; margin-top:auto;}
.footer-inner{max-width:1280px; margin:0 auto; padding:0 1rem; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:1rem;}
@media(min-width:640px){.footer-inner{flex-direction:row;}}
.footer-strong{font-weight:600; color:#64748b;}

/* ---------------- Misc ---------------- */
.dropzone{
  border:2px dashed var(--slate-200); background:var(--slate-50); border-radius:.75rem; padding:1.25rem;
  text-align:center; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; transition:all .15s;
}
.dropzone:hover{border-color:var(--blue-400); background:rgba(239,246,255,.2);}
.dropzone svg{color:#94a3b8;}
.dz-title{font-size:.85rem; font-weight:700; color:#475569;}
.dz-sub{font-size:.62rem; color:#94a3b8;}
.dz-preview{border:1px solid var(--slate-200); border-radius:.75rem; padding:.75rem; background:var(--slate-50); display:flex; align-items:center; justify-content:space-between; gap:.75rem; box-shadow:var(--shadow-sm);}
.dz-preview-left{display:flex; align-items:center; gap:.75rem; min-width:0;}
.dz-thumb{width:48px; height:48px; border-radius:.5rem; overflow:hidden; border:1px solid var(--slate-200); background:#fff; flex-shrink:0;}
.dz-thumb img{width:100%; height:100%; object-fit:cover;}
.dz-filename{font-size:.72rem; font-weight:700; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px;}
.dz-ready{font-size:.62rem; color:var(--emerald-600); font-weight:700;}
.dz-remove{padding:.375rem; border-radius:.5rem; color:#94a3b8; flex-shrink:0;}
.dz-remove:hover{background:var(--rose-50); color:var(--rose-600);}
.optional-tag{font-size:.7rem; font-weight:400; color:#94a3b8;}