*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Noto Sans JP", sans-serif; color: #1e293b; background-color: #f8fafc; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
.container { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 0.9rem; padding-right: 0.9rem; }
.container-sm { max-width: 896px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 768px) { .section { padding-top: 5rem; padding-bottom: 5rem; } }
.section-header { max-width: 1020px; margin-left: auto; margin-right: auto; margin-bottom: 2rem; }
@media (min-width: 768px) { .section-header { margin-bottom: 4rem; } }
.section-tag { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25rem 0.75rem; border-radius: 9999px; display: inline-block; }
@media (min-width: 768px) { .section-tag { font-size: 0.875rem; } }
.section-title { font-size: 1.25rem; font-weight: 900; color: #0f172a; margin-top: 0.75rem; line-height: 1.25; text-align: center; }
@media (min-width: 640px) { .section-title { font-size: 1.75rem; } }
@media (min-width: 768px) { .section-title { font-size: 2.25rem; } }
.section-description { color: #475569; margin-top: 1rem; font-size: 0.875rem; text-align: left; width: 100%; }
@media (min-width: 768px) { .section-description { font-size: 1rem; text-align: center; } }
.text-center { text-align: center; }
.text-white { color: #ffffff !important; }
.text-blue { color: #2563eb; }
.text-emerald { color: #03dd9a; }
.text-amber { color: #e15050; }
.text-purple { color: #9333ea; }
.text-slate { color: #cbd5e1; }
.text-dark { color: #334155; }
.text-red { color: #ef4444; }
.bg-white { background-color: #ffffff; }
.bg-dark { background-color: #0f172a; }
.bg-slate-light { background-color: #f8fafc; }
.bg-blue-light { background-color: #eff6ff; }
.bg-emerald-light { background-color: rgba(5, 150, 105, 0.15); }
.bg-amber-light { background-color: #fffbeb; }
.bg-purple-light { background-color: #f3e8ff; }
.bg-indigo-light { background-color: #e0e7ff; }
.bg-rose-light { background-color: #ffe4e6; }
.bg-blue { background-color: #2563eb; }
.bg-emerald { background-color: #059669; }
.border-top { border-top: 1px solid #e2e8f0; }
.font-bold { font-weight: 700; }
.is-hidden { display: none !important; }
.grid-4 { display: grid; grid-template-columns: repeat(1, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(1, 1fr); gap: 2rem; }
.form-row-2 { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; }
@media (min-width: 640px) { .form-row-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.site-header { position: sticky; top: 0; z-index: 50; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid #e2e8f0; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.header-inner { max-width: 1280px; margin: 0 auto; padding: 0 1rem; height: 4rem; display: flex; align-items: center; justify-content: space-between; }
.logo-area { display: flex; align-items: center; gap: 0.75rem; }
.logo-symbol { width: 2.5rem; height: 2.5rem; object-fit: contain; border-radius: 0.75rem; display: block; }
.logo-title { font-size: 1rem; font-weight: 700; letter-spacing: -0.025em; color: #0f172a; display: block; line-height: 1; }
@media (min-width: 768px) { .logo-title { font-size: 1.25rem; } }
.badge-sub { font-size: 0.6rem; padding: 0.125rem 0.5rem; background-color: #dbeafe; color: #1d4ed8; border-radius: 9999px; font-weight: 600; margin-left: 0.25rem; }
@media (min-width: 768px) { .badge-sub { font-size: 0.75rem; } }
.logo-sub { font-size: 0.5rem; color: #64748b; display: block; margin-top: 0.25rem; }
@media (min-width: 768px) { .logo-sub { font-size: 0.625rem; } }
.nav-desktop { display: none; align-items: center; gap: 1.5rem; font-size: 0.875rem; font-weight: 500; color: #334155; }
.nav-desktop a:hover { color: #2563eb; transition: color 0.2s; }
.nav-highlight { color: #059669 !important; font-weight: 700; display: flex; align-items: center; gap: 0.25rem; }
.cta-desktop { display: none; align-items: center; gap: 0.75rem; }
.menu-btn { background: none; border: none; font-size: 1.5rem; color: #334155; cursor: pointer; padding: 0.5rem; }
@media (min-width: 768px) { .header-inner { height: 5rem; } .nav-desktop { display: flex; } .cta-desktop { display: flex; } .menu-btn { display: none; } }
.mobile-menu { background-color: #ffffff; border-bottom: 1px solid #e2e8f0; padding: 0.5rem 1rem 1.5rem 1rem; }
.mobile-menu a { display: block; padding: 0.5rem 0; color: #334155; font-weight: 500; }
.mobile-cta-group { padding-top: 0.5rem; display: grid; gap: 0.5rem; }
.hero-section { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center 90%; color: #ffffff; overflow: hidden; padding: 1rem 0 0.5rem; z-index: 0; transition: background-image 0.8s ease-in-out; background-image: url(../img/new-hero_bg.jpg); min-height: 85svh; display: flex; flex-direction: column; }
@media (min-width: 768px) { .hero-section { padding: 6rem 0; background-position: center; min-height: unset; display: block; } }
.hero-section.slide-2 { background-image: url(../img/new-hero_bg2.jpg); }
@media (max-width: 767px) { .hero-section { background-image: url(../img/new-hero_bg-sp.jpg); } .hero-section.slide-2 { background-image: url(../img/new-hero_bg2-sp.jpg); } }
.hero-section::before { content: ""; position: absolute; inset: 0; background-color: rgba(131, 121, 121, 0.35); z-index: 1; pointer-events: none; transition: opacity 0.8s ease-in-out; }
.hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 1rem; position: relative; z-index: 10; flex: 1; display: flex; flex-direction: column; }
.hero-grid { display: flex; flex-direction: column; gap: 0; flex: 1; }
@media (min-width: 640px) { .hero-grid { display: flex; flex-direction: column; gap: 0; flex: 1; } }
@media (min-width: 768px) { .hero-grid { display: grid; grid-template-columns: 8fr 5fr; gap: 3rem; align-items: center; flex: unset; } .hero-section { padding: 6rem 0; } .hero-inner { flex: unset; display: block; } }
.hero-content { text-align: left; display: flex; flex-direction: column; flex: 1; align-items: flex-start; }
@media (min-width: 768px) { .hero-content { text-align: left; display: flex; flex-direction: column; flex: unset; align-items: flex-start; } }
.hero-visual { display: none; }
.badge-hero { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem; border-radius: 9999px; background-color: rgba(59, 130, 246, 0.2); border: 1px solid rgba(96, 165, 250, 0.3); color: #bfdbfe; font-size: 0.75rem; font-weight: 500; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .badge-hero { font-size: 0.875rem; margin-bottom: 1.5rem; } }
.pulse-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background-color: #34d399; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.hero-title { font-size: 1.69rem; font-weight: 900; line-height: 1.25; letter-spacing: -0.025em; margin-bottom: 0.75rem; color:#fff; /* text-shadow: 2px 4px 8px rgba(255, 255, 255, 0.94); */}
@media (min-width: 640px) { .hero-title { font-size: 1.875rem; margin-bottom: 1rem; } }
@media (min-width: 768px) { .hero-title { font-size: 3.5rem; margin-bottom: 1.5rem; } }
.text-gradient { background: linear-gradient(to right, #fde047, #fef08a, #6ee7b7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-description { color: #d52828; font-size: 0.9rem; line-height: 1.6; margin-top: auto; margin-bottom: 0.75rem; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(4px); padding: 0.75rem 0.75rem; border-radius: 0.75rem; }
@media (min-width: 768px) { .hero-description { font-size: 1.5rem; margin-top: 0; margin-bottom: 1.5rem; padding: 1rem 1rem; } }
.hero-description strong { color: #c13957; text-decoration: underline; text-decoration-color: #34d399; text-decoration-thickness: 2px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; padding: 0.6rem; background-color: rgba(255, 255, 255, 0.35); backdrop-filter: blur(4px); border-radius: 0.75rem; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .hero-stats { gap: 0.5rem; padding: 0.7rem; margin-bottom: 1.5rem; } }
.stat-item { text-align: center; }
@media (min-width: 768px) { .stat-item { text-align: left; } }
.stat-label { font-size: 0.75rem; color: #fff; display: block; }
.stat-value { font-size: 1.125rem; font-weight: 700; }
@media (min-width: 640px) { .stat-value { font-size: 1.25rem; } }
.stat-border { border-left: 1px solid rgba(51, 65, 85, 0.6); border-right: 1px solid rgba(51, 65, 85, 0.6); padding: 0 0.5rem; }
.hero-actions { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
@media (min-width: 640px) { .hero-actions { flex-direction: row; } }
@media (min-width: 768px) { .hero-actions { justify-content: flex-start; } }
.interactive-card { background-color: rgba(30, 41, 59, 0.8); backdrop-filter: blur(12px); border-radius: 1rem; padding: 1.5rem; border: 1px solid rgba(51, 65, 85, 0.8); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); display: none;}
.card-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: 1rem; margin-bottom: 1rem; }
.window-controls { display: flex; gap: 0.5rem; }
.dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; display: inline-block; }
.dot-red { background-color: #ef4444; }
.dot-yellow { background-color: #eab308; }
.dot-green { background-color: #22c55e; }
.card-tag { font-size: 0.75rem; font-family: monospace; color: #94a3b8; }
.card-body { display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; }
.input-preview-box { background-color: rgba(15, 23, 42, 0.9); border-radius: 0.75rem; padding: 0.75rem; border: 1px solid rgba(51, 65, 85, 0.6); }
.box-label { font-size: 0.6875rem; font-weight: 700; display: block; margin-bottom: 0.25rem; }
.box-code { color: #cbd5e1; font-family: monospace; font-size: 0.75rem; }
.transform-indicator { display: flex; justify-content: center; align-items: center; gap: 0.5rem; color: #34d399; font-weight: 700; font-size: 0.75rem; margin: 0.25rem 0; }
.icon-bounce { animation: bounce 1s infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }
.output-preview-box { background-color: rgba(23, 37, 84, 0.8); border-radius: 0.75rem; padding: 0.875rem; border: 1px solid rgba(59, 130, 246, 0.4); color: #f8fafc; }
.box-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.6875rem; margin-bottom: 0.5rem; }
.badge-micro { background-color: #1e40af; color: #bfdbfe; font-size: 0.625rem; padding: 0.125rem 0.5rem; border-radius: 0.25rem; }
.preview-title { font-weight: 700; color: #fde047; font-size: 0.75rem; margin-bottom: 0.375rem; }
.preview-text { font-size: 0.6875rem; line-height: 1.6; color: #e2e8f0; }
.card-footer { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid rgba(51, 65, 85, 0.8); display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; color: #94a3b8; }
.footer-highlight { color: #34d399; font-weight: 700; }
.card-problem { background-color: #f8fafc; border-radius: 1rem; padding: 1.5rem; border: 1px solid rgba(226, 232, 240, 0.8); position: relative; transition: box-shadow 0.3s; }
.card-problem:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.num-badge { width: 3rem; height: 3rem; background-color: #fee2e2; color: #dc2626; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.25rem; margin-bottom: 1rem; }
.card-problem h3 { font-size: 1rem; font-weight: 700; color: #0f172a; margin-bottom: 0.5rem; }
@media (min-width: 768px) { .card-problem h3 { font-size: 1.125rem; } }
.card-problem p { color: #475569; font-size: 0.875rem; line-height: 1.6; text-align: left; }
.solution-banner { margin-top: 3rem; background: linear-gradient(to right, #0c4a6e, #0f172a); color: #ffffff; border-radius: 1rem; padding: 2rem; text-align: center; position: relative; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.badge-solution { background-color: #10b981; color: #0f172a; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 9999px; text-transform: uppercase; display: inline-block; margin-bottom: 0.75rem; }
.solution-banner h3 { font-size: 1.25rem; font-weight: 900; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .solution-banner h3 { font-size: 1.5rem; } }
.solution-banner p { color: #cbd5e1; font-size: 0.875rem; line-height: 1.6; max-width: 48rem; margin: 0 auto; text-align: left;}
.tag-emerald { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.75rem; border-radius: 9999px; background-color: rgba(16, 185, 129, 0.2); color: #6ee7b7; font-size: 0.75rem; font-weight: 700; margin-bottom: 0.75rem; border: 1px solid rgba(16, 185, 129, 0.3); }
.text-gradient-emerald { background: linear-gradient(to right, #34d399, #99f6e4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.demo-container { background-color: #1e293b; border-radius: 1rem; border: 1px solid #334155; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); padding: 1.5rem; max-width: 64rem; margin: 0 auto; }
@media (min-width: 1024px) { .demo-container { padding: 2rem; } }
.sample-preset-box { background-color: rgba(15, 23, 42, 0.6); padding: 1rem; border-radius: 0.75rem; border: 1px solid rgba(51, 65, 85, 0.6); margin-bottom: 1.5rem; }
.preset-label { font-size: 0.75rem; font-weight: 700; color: #94a3b8; display: block; margin-bottom: 0.5rem; }
.preset-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.btn-sample { padding: 0.375rem 0.75rem; background-color: #1e293b; border: 1px solid #475569; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s; }
.btn-sample:hover { background-color: #334155; }
.btn-sample-blue { color: #93c5fd; }
.btn-sample-emerald { color: #6ee7b7; }
.btn-sample-amber { color: #fde047; }
.demo-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .demo-grid { grid-template-columns: 5fr 7fr; } }
.demo-input-col { display: flex; flex-direction: column; gap: 1rem; }
.demo-step-title { font-size: 0.875rem; font-weight: 700; color: #cbd5e1; display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid #334155; padding-bottom: 0.5rem; }
.step-num { width: 1.25rem; height: 1.25rem; border-radius: 9999px; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; }
.form-group { display: flex; flex-direction: column; gap: 0.25rem; }
.form-label { font-size: 0.75rem; color: #94a3b8; }
.form-input-dark, .form-select-dark, .form-textarea-dark { width: 100%; background-color: #0f172a; border: 1px solid #334155; border-radius: 0.5rem; padding: 0.625rem; color: #e2e8f0; font-size: 0.75rem; }
.form-input-dark:focus, .form-select-dark:focus, .form-textarea-dark:focus { outline: none; border-color: #2563eb; }
.radio-group-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; font-size: 0.75rem; }
.radio-card { display: flex; align-items: center; gap: 0.375rem; background-color: #0f172a; padding: 0.5rem; border-radius: 0.5rem; border: 1px solid #334155; cursor: pointer; }
.demo-output-col { background-color: rgba(15, 23, 42, 0.9); border-radius: 0.75rem; padding: 1.25rem; border: 1px solid rgba(51, 65, 85, 0.8); display: flex; flex-direction: column; justify-content: space-between; position: relative; min-height: 380px; }
.output-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1e293b; padding-bottom: 0.75rem; margin-bottom: 1rem; }
.badge-count { font-size: 0.6875rem; background-color: #1e293b; padding: 0.25rem 0.625rem; border-radius: 9999px; color: #94a3b8; font-family: monospace; }
.loading-overlay { position: absolute; inset: 0; background-color: rgba(15, 23, 42, 0.95); border-radius: 0.75rem; z-index: 20; display: flex; flex-direction: column; items-center; justify-content: center; gap: 0.75rem; backdrop-filter: blur(4px); }
.spinner { width: 2.5rem; height: 2.5rem; border: 4px solid #10b981; border-top-color: transparent; border-radius: 9999px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 0.75rem; color: #34d399; font-weight: 700; }
.output-content { display: flex; flex-direction: column; gap: 1rem; }
.output-title { font-size: 1rem; font-weight: 700; color: #fde047; line-height: 1.375; }
.output-body { font-size: 0.75rem; line-height: 1.625; color: #e2e8f0; background-color: rgba(2, 6, 23, 0.6); padding: 1rem; border-radius: 0.5rem; border: 1px solid #1e293b; display: flex; flex-direction: column; gap: 0.75rem; }
.output-sns-box { background-color: rgba(30, 41, 59, 0.8); border-radius: 0.5rem; padding: 0.75rem; border: 1px solid rgba(51, 65, 85, 0.8); }
.sns-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.6875rem; color: #94a3b8; margin-bottom: 0.375rem; }
.sns-text { font-size: 0.6875rem; color: #cbd5e1; font-family: monospace; }
.output-footer { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid #1e293b; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; font-size: 0.75rem; gap: 0.5rem; }
.note-text { color: #94a3b8; font-size: 0.6875rem; }
.btn-copy { padding: 0.375rem 0.75rem; background-color: #1e293b; color: #e2e8f0; border-radius: 0.25rem; border: 1px solid #334155; font-size: 0.75rem; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; gap: 0.25rem; }
.btn-copy:hover { background-color: #334155; }
.card-feature { background-color: #ffffff; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); border: 1px solid #e2e8f0; transition: box-shadow 0.2s; }
.card-feature:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.icon-box { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 1rem; }
.card-feature h3 { font-size: 1rem; font-weight: 700; color: #0f172a; margin-bottom: 0.5rem; }
@media (min-width: 768px) { .card-feature h3 { font-size: 1.125rem; } }
.card-feature p { color: #475569; font-size: 0.875rem; line-height: 1.625; text-align: left; }
.card-step { background-color: #f8fafc; padding: 1.5rem; border-radius: 1rem; border: 1px solid #e2e8f0; position: relative; text-align: center; }
.step-badge { width: 2.5rem; height: 2.5rem; color: #ffffff; border-radius: 9999px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem auto; font-size: 1.125rem; }
.card-step h3 { font-weight: 700; color: #0f172a; margin-bottom: 0.5rem; font-size: 1rem; }
.card-step p { color: #475569; font-size: 0.75rem; line-height: 1.625; text-align: left;}
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: stretch; }
@media (min-width: 768px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.card-pricing { background-color: #1e293b; border-radius: 1rem; border: 1px solid #334155; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; transition: border-color 0.2s; }
.card-pricing:hover { border-color: #64748b; }
.card-pricing-popular { border: 2px solid #3b82f6; position: relative; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
@media (min-width: 768px) { .card-pricing-popular { transform: translateY(-0.5rem); } }
.popular-ribbon { position: absolute; top: -0.875rem; left: 50%; transform: translateX(-50%); background-color: #2563eb; color: #ffffff; font-size: 0.6875rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.plan-label { font-size: 0.75rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.1em; display: block; }
.card-pricing h3 { font-size: 1rem; font-weight: 700; color: #ffffff; margin-top: 0.25rem; }
@media (min-width: 768px) { .card-pricing h3 { font-size: 1.25rem; } }
.plan-desc { color: #94a3b8; font-size: 0.75rem; margin-top: 0.5rem; }
.price-box { margin: 1.5rem 0; }
.price-value { font-size: 1.875rem; font-weight: 900; color: #ffffff; }
.card-pricing-popular .price-value { font-size: 2.25rem; }
.price-unit { font-size: 0.75rem; color: #94a3b8; }
.price-sub { display: block; font-size: 0.6875rem; color: #94a3b8; margin-top: 0.25rem; }
.plan-features { list-style: none; border-top: 1px solid #334155; padding-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.75rem; color: #cbd5e1; }
.plan-features li { display: flex; align-items: center; gap: 0.5rem; }
.profile-card { background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
@media (min-width: 640px) { .profile-card { padding: 3rem; } }
.profile-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .profile-grid { grid-template-columns: 4fr 8fr; } }
.profile-col-avatar { text-align: center; }
.avatar-wrapper { width: 9rem; height: 9rem; margin: 0 auto 1rem auto; border-radius: 9999px; background-color: #cbd5e1; overflow: hidden; border: 4px solid #ffffff; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); position: relative; display: none;}
.avatar-image { width: 100%; height: 100%; object-fit: cover; }
.profile-label { font-size: 0.75rem; font-weight: 700; color: #2563eb; text-transform: uppercase; letter-spacing: 0.1em; display: block; }
.profile-name { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin-top: 0.25rem; }
.profile-title { font-size: 0.75rem; color: #64748b; margin-top: 0.25rem; }
.profile-col-text { display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; color: #475569; line-height: 1.625; }
.profile-heading { font-size: 1rem; font-weight: 700; color: #0f172a; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.5rem; }
@media (min-width: 768px) { .profile-heading { font-size: 1.125rem; } }
.profile-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.5rem; }
.profile-tag { padding: 0.25rem 0.75rem; background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; color: #334155; }
.tag-blue { background-color: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.faq-list { display: flex; flex-direction: column; gap: 1rem; }
.faq-item { background-color: #ffffff; border-radius: 0.75rem; border: 1px solid #e2e8f0; overflow: hidden; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.faq-question { width: 100%; padding: 1rem 1.5rem; text-align: left; font-weight: 700; color: #0f172a; display: flex; justify-content: space-between; align-items: center; background: none; border: none; cursor: pointer; transition: background-color 0.2s; }
.faq-question:hover { background-color: #f8fafc; }
.faq-icon { color: #94a3b8; transition: transform 0.2s; }
.faq-icon.rotate { transform: rotate(180deg); }
.faq-answer { padding: 0 1.5rem 1rem 1.5rem; font-size: 0.875rem; color: #475569; line-height: 1.625; border-top: 1px solid #f1f5f9; padding-top: 0.75rem; }
.contact-form { background-color: #f8fafc; border-radius: 1rem; padding: 1.5rem; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
@media (min-width: 640px) { .contact-form { padding: 2.5rem; } }
.form-body-group { display: flex; flex-direction: column; gap: 1.5rem; }
.form-input-light, .form-textarea-light { width: 100%; background-color: #ffffff; border: 1px solid #cbd5e1; border-radius: 0.75rem; padding: 0.75rem; font-size: 0.875rem; outline: none; }
.form-input-light:focus, .form-textarea-light:focus { box-shadow: 0 0 0 2px #2563eb; }
.checkbox-group { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: #475569; }
.form-success-box { padding: 2rem 0; text-align: center; display: flex; flex-direction: column; gap: 1rem; }
.icon-success { width: 4rem; height: 4rem; background-color: #d1fae5; color: #059669; border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 1.5rem; }
.form-success-box h3 { font-size: 1.25rem; font-weight: 700; color: #0f172a; }
.form-success-box p { color: #475569; font-size: 0.875rem; }
.site-footer { background-color: #020617; color: #94a3b8; padding: 3rem 0; font-size: 0.75rem; border-top: 1px solid #1e293b; }
.footer-top { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .footer-top { flex-direction: row; } }
.footer-logo-area { display: flex; align-items: center; gap: 0.75rem; }
.footer-logo-text { color: #ffffff; font-weight: 700; font-size: 1rem; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; color: #94a3b8; }
.footer-nav a:hover { color: #ffffff; transition: color 0.2s; }
.footer-disclaimer { font-size: 0.6875rem; color: #64748b; text-align: center; line-height: 1.625; max-width: 56rem; margin: 0 auto 1.5rem auto; text-align: left;}
.footer-bottom { text-align: center; color: #475569; padding-top: 1rem; border-top: 1px solid #0f172a; }
.btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; border-radius: 0.75rem; transition: all 0.2s; border: none; cursor: pointer; text-align: center; }
.btn-primary-sm { padding: 0.625rem 1.25rem; font-size: 0.875rem; color: #ffffff; background-color: #2563eb; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.btn-primary-sm:hover { background-color: #1d4ed8; }
.btn-secondary-sm { padding: 0.5rem 1rem; font-size: 0.875rem; color: #2563eb; background-color: #eff6ff; }
.btn-secondary-sm:hover { background-color: #dbeafe; }
.btn-primary-block { padding: 0.625rem; font-size: 0.875rem; color: #ffffff; background-color: #2563eb; width: 100%; }
.btn-secondary-block { padding: 0.625rem; font-size: 0.875rem; color: #2563eb; background-color: #eff6ff; width: 100%; }
.btn-emerald-lg { padding: 1rem 2rem; background: linear-gradient(to right, #10b981, #0d9488); color: #ffffff; font-weight: 900; font-size: 1rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); gap: 0.75rem; }
.btn-emerald-lg:hover { transform: translateY(-2px); }
.btn-outline-lg { padding: 1rem 2rem; background-color: rgba(255, 255, 255, 0.1); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3); font-size: 1rem; gap: 0.5rem; backdrop-filter: blur(4px); }
.btn-outline-lg:hover { background-color: rgba(255, 255, 255, 0.2); }
.btn-emerald-full { width: 100%; padding: 0.875rem; background: linear-gradient(to right, #10b981, #0d9488); color: #ffffff; font-size: 0.875rem; gap: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.btn-slate-full { width: 100%; padding: 0.75rem; background-color: #334155; color: #ffffff; font-size: 0.75rem; margin-top: 2rem; }
.btn-slate-full:hover { background-color: #475569; }
.btn-blue-full { width: 100%; padding: 0.875rem; background-color: #2563eb; color: #ffffff; font-size: 0.75rem; margin-top: 2rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.btn-blue-full:hover { background-color: #1d4ed8; }
.btn-blue-submit { width: 100%; padding: 1rem; background-color: #2563eb; color: #ffffff; font-size: 1rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.btn-blue-submit:hover { background-color: #1d4ed8; }
.scroll-to-top { position: fixed; bottom: 16px; right: 16px; width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 50%; cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 999; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); tap-highlight-color: transparent; }
.scroll-to-top.show { display: flex; }
.scroll-to-top:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
.scroll-to-top:active { transform: translateY(-2px); }
.scroll-to-top::before { content: "↑"; color: white; font-size: 20px; font-weight: bold; line-height: 1; }
@media (min-width: 768px) { .scroll-to-top { width: 50px; height: 50px; bottom: 20px; right: 20px; } .scroll-to-top::before { font-size: 24px; } }
#ai-demo { background-color: #f1f5f9 !important; border-top: 1px solid #cbd5e1; border-bottom: 1px solid #cbd5e1; }
#pricing { background-color: #f8fafc !important; }
#pricing.bg-dark { background-color: #f8fafc !important; }
#pricing.section { background-color: #f8fafc !important; }
#pricing .tag-emerald { background-color: transparent; color: #0d9488; }
#pricing .section-title { color: #1e293b !important; }
#pricing .section-description { color: #1e293b !important; }
#pricing .card-pricing { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; color: #1e293b !important; }
#pricing .card-pricing h3 { color: #1e293b !important; }
#pricing .plan-label { color: #64748b !important; }
#pricing .plan-desc { color: #475569 !important; }
#pricing .price-value { color: #1e293b !important; }
#pricing .price-unit { color: #64748b !important; }
#pricing .price-sub { color: #64748b !important; }
#pricing .price-box { background-color: #f1f5f9 !important; color: #1e293b !important; }
#pricing .plan-features { color: #1e293b !important; }
#pricing .plan-features li { color: #1e293b !important; }
#pricing .btn-slate-full { background-color: #475569 !important; color: #ffffff !important; }
#pricing .btn-blue-full { background-color: #3b82f6 !important; color: #ffffff !important; }
section#pricing { background-color: #f8fafc !important; }
section#pricing.section { background-color: #f8fafc !important; }
section#pricing.bg-dark { background-color: #f8fafc !important; }
#pricing.bg-dark { background-color: #f8fafc !important; }
#pricing.section.bg-dark { background-color: #f8fafc !important; }

/* === CONSULT FORM MESSAGE STYLES === */
.form-message-new {
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
  display: none;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.form-message-success { background-color:#dcfce7;border:1px solid #86efac;color:#166534; }
.form-message-error   { background-color:#fee2e2;border:1px solid #fca5a5;color:#991b1b; }
.form-message-info    { background-color:#dbeafe;border:1px solid #93c5fd;color:#1e40af; }

/* === CONSULT FORM STEP & CONFIRM STYLES === */
.cf-steps { display:flex;align-items:center;gap:.5rem;justify-content:center;margin-bottom:1.5rem;font-size:.85rem;font-weight:600; }
.cf-step { padding:.25rem .75rem;border-radius:20px;background:#e2e8f0;color:#64748b; }
.cf-step.active { background:#2563eb;color:#fff; }
.cf-step-arrow { color:#94a3b8; }
.cf-err { display:block;color:#ef4444;font-size:.8rem;margin-top:.25rem; }
.cf-confirm-table { background:#f8fafc;border-radius:8px;overflow:hidden;border:1px solid #e2e8f0; }
.cf-confirm-row { display:grid;grid-template-columns:130px 1fr;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid #e2e8f0; }
.cf-confirm-row:last-child { border-bottom:none; }
.cf-confirm-label { font-weight:600;color:#475569;font-size:.875rem; }
.cf-confirm-val { color:#1e293b;font-size:.875rem;word-break:break-all; }

/* === DESIGN SAMPLES GALLERY === */
.gallery-container{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;}
.gallery-item{border-radius:12px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.08);cursor:pointer;transition:transform .25s ease,box-shadow .25s ease;background:#fff;border:1px solid rgba(0,0,0,.06);}
.gallery-item:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.14);}
.gallery-item img{width:100%;height:auto;display:block;}
@media(max-width:900px){.gallery-container{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.gallery-container{grid-template-columns:1fr;}}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.85);z-index:9999;align-items:center;justify-content:center;padding:24px;}
.modal-overlay.show{display:flex;}
.modal-content{position:relative;max-width:900px;width:100%;}
.modal-close{position:absolute;top:-40px;right:0;background:none;border:none;color:#fff;font-size:32px;line-height:1;cursor:pointer;padding:0;}
.modal-image{width:100%;height:auto;border-radius:8px;display:block;}
/* === DEMO FORM STYLES === */
.dfg-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:0;}
.dfg{display:flex;flex-direction:row;align-items:center;gap:8px;}
.dfg .form-label{font-size:12px;font-weight:600;color:#334155;margin-bottom:0;min-width:140px;flex-shrink:0;}
.demo-loading{display:none;text-align:center;padding:48px 20px;}
.demo-loading.show{display:block;}
.ld-dots{display:flex;justify-content:center;gap:10px;margin-bottom:14px;}
.ld-dot{width:12px;height:12px;border-radius:50%;background:#10b981;animation:ld-b 1.2s ease-in-out infinite;}
.ld-dot:nth-child(2){animation-delay:.2s;}
.ld-dot:nth-child(3){animation-delay:.4s;}
@keyframes ld-b{0%,80%,100%{transform:scale(.6);opacity:.4;}40%{transform:scale(1);opacity:1;}}
.ld-txt{color:#475569;font-size:13px;}
.demo-output{display:none;}
.demo-output.show{display:block;}
.doh{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.dob-wrap{display:flex;gap:6px;flex-wrap:wrap;}
.dob{padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;}
.dob-or{background:rgba(232,93,38,.2);border:1px solid rgba(232,93,38,.4);color:#fb923c;}
.dob-bl{background:rgba(59,130,246,.2);border:1px solid rgba(59,130,246,.4);color:#60a5fa;}
.dob-gr{background:rgba(16,185,129,.2);border:1px solid rgba(16,185,129,.4);color:#34d399;}
.copy-btn{background:#e5e7eb;border:1px solid #cbd5e1;color:#334155;padding:7px 14px;border-radius:8px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .2s;}
.copy-btn:hover{background:#d1d5db;}
.btn-outline-sm{background:transparent;border:1px solid #cbd5e1;color:#334155;padding:8px 16px;border-radius:8px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .2s;}
.btn-outline-sm:hover{background:#f3f4f6;}
.btn-emerald-full{width:100%;background:#10b981;color:#fff;border:none;border-radius:8px;padding:14px 20px;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .2s;}
.btn-emerald-full:hover{background:#059669;}
.comp-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:16px;}
.comp-card{border-radius:10px;padding:12px 14px;}
.comp-card.bef{display:none;background:#f1f5f9;border:1px solid #cbd5e1;}
.comp-card.aft{background:#ecfdf5;border:1px solid #a7f3d0;}
.comp-lbl{font-size:11px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:5px;}
.comp-lbl.bef{color:#64748b;}
.comp-lbl.aft{color:#059669;}
.comp-txt{font-size:13px;line-height:1.8;color:#1e293b;}
.comp-stats{margin-top:10px;display:flex;flex-direction:column;gap:4px;}
.cs{font-size:11px;padding:3px 8px;border-radius:10px;display:inline-block;}
.cs-or{background:rgba(249,115,22,.15);color:#fb923c;}
.cs-bl{background:rgba(96,165,250,.15);color:#93c5fd;}
.cs-gr{background:rgba(52,211,153,.15);color:#6ee7b7;}
.sns-prev{display:none;background:#f8fafc;border:1px solid #cbd5e1;border-radius:10px;padding:14px;}
.sns-prev-ttl{font-size:12px;font-weight:700;color:#475569;margin-bottom:10px;}
.sns-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sns-card{background:#ffffff;border:1px solid #cbd5e1;border-radius:8px;padding:10px;}
.sns-hd{font-size:11px;font-weight:700;color:#334155;margin-bottom:6px;display:flex;align-items:center;gap:5px;}
.sns-body{font-size:12px;color:#475569;line-height:1.7;}
.demo-err{display:none;background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.3);border-radius:10px;padding:14px;color:#991b1b;}
.demo-err.show{display:block;}
.form-err-new{display:none;background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.3);border-radius:8px;padding:10px 14px;color:#991b1b;font-size:13px;margin-top:10px;}
.form-err-new.show{display:block;}
.demo-gen-row-new{margin-top:18px;}
.demo-note-new{font-size:11px;color:#94a3b8;margin-bottom:8px;}
.demo-grid{display:grid;grid-template-columns:1fr;gap:20px;}
.demo-input-col{padding:20px;background:#f8fafc;border:1px solid #cbd5e1;border-radius:12px;}
.demo-input-col.is-hidden{display:none;}
.demo-output-col{display:flex;flex-direction:column;}
.demo-output-inner{padding:20px;background:#f8fafc;border:1px solid #cbd5e1;border-radius:12px;flex:1;}
.output-header{margin-bottom:16px;}
.demo-step-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:12px;margin-bottom:0;color:#334155;}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-size:14px;font-weight:700;}
.bg-blue{background:#3b82f6;color:#fff;}
.bg-emerald-light{background:#d1fae5;}
.bg-emerald-light.text-emerald{color:#059669;}
.text-emerald{color:#059669;}
.output-footer{margin-top:12px;padding-top:12px;border-top:1px solid #cbd5e1;color:#475569;}
.demo-footer-new{display:none;margin-top:16px;gap:10px;flex-wrap:wrap;justify-content:flex-end;align-items:center;}
.is-hidden{display:none;}
.voice-bar{border-radius:12px;padding:14px 16px;margin-bottom:18px;}
.voice-bar.voice-bar-dark{background:#f8fafc;border:1.5px solid #cbd5e1;}
.voice-bar-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.btn-voice{display:inline-flex;align-items:center;gap:8px;background:#1a3a6b;color:#fff;border:none;border-radius:24px;padding:10px 20px;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s,box-shadow .2s;white-space:nowrap;}
.btn-voice:hover{background:#244a8a;}
.btn-voice.recording{background:#e53e3e;animation:pulse-rec 1.2s ease-in-out infinite;}
@keyframes pulse-rec{0%,100%{box-shadow:0 0 0 0 rgba(229,62,62,.4);}50%{box-shadow:0 0 0 10px rgba(229,62,62,0);}}
.voice-hint{font-size:12px;line-height:1.5;color:#475569;}
.voice-bar-dark .voice-hint{color:#475569;}
.voice-transcript-wrap{margin-top:12px;padding-top:12px;}
.voice-bar-dark .voice-transcript-wrap{border-top:1px solid #cbd5e1;}
.voice-transcript-label{font-size:12px;margin-bottom:6px;font-weight:600;color:#334155;}
.voice-bar-dark .voice-transcript-label{color:#334155;}
.voice-transcript-box{border-radius:8px;padding:10px 14px;font-size:14px;line-height:1.8;min-height:52px;margin-bottom:10px;word-break:break-all;}
.voice-transcript-box.voice-transcript-box-dark{background:#ffffff;border:1px solid #cbd5e1;color:#1e293b;}
.voice-parse-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.btn-sm{padding:7px 14px;font-size:13px;border-radius:20px;border:none;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:opacity .2s;}
.btn-sm:disabled{opacity:.55;cursor:not-allowed;}
.btn-sm.btn-or{background:#e85d26;color:#fff;}
.btn-sm.btn-gy{background:#aaa;color:#fff;}
.voice-parse-status{margin-top:10px;padding:9px 14px;border-radius:8px;font-size:13px;line-height:1.6;}
.voice-parse-status.ok{background:#f0fff4;color:#276749;border:1px solid #9ae6b4;}
.voice-parse-status.ng{background:#fff5f5;color:#c53030;border:1px solid #feb2b2;}
.voice-bar-label{font-size:12px;font-weight:700;border-radius:20px;padding:3px 10px;color:#2563eb;background:#dbeafe;min-width:70px;text-align:center;}
.voice-bar-dark .voice-bar-label{color:#2563eb;background:#dbeafe;}
.camera-box{border-radius:12px;padding:14px 16px;margin-bottom:18px;}
.camera-box.camera-box-dark{background:#f8fafc;border:1.5px solid #cbd5e1;}
.camera-label{font-size:12px;font-weight:700;color:#334155;display:inline-block;margin-bottom:12px;}
.camera-controls{display:flex;gap:10px;flex-wrap:wrap;}
.btn-camera{display:inline-flex;align-items:center;gap:8px;background:#7c3aed;color:#fff;border:none;border-radius:24px;padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s;white-space:nowrap;}
.btn-camera:hover{background:#9d4edd;}
.btn-camera-snap{background:#10b981;}
.btn-camera-snap:hover{background:#059669;}
.btn-camera-stop{background:#dc2626;}
.btn-camera-stop:hover{background:#b91c1c;}
.camera-preview-wrap{border-radius:8px;overflow:hidden;}
.camera-snapshot-wrap{text-align:center;}
.memo-bar{border-radius:12px;padding:14px 16px;margin-bottom:18px;}
.memo-bar.memo-bar-dark{background:#f8fafc;border:1.5px solid #cbd5e1;}
.memo-bar-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.btn-memo{display:inline-flex;align-items:center;gap:8px;background:#cf123c;color:#fff;border:none;border-radius:24px;padding:10px 20px;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s;white-space:nowrap;}
.btn-memo:hover{background:#2563eb;}
.memo-hint{font-size:12px;line-height:1.5;color:#475569;}
.memo-bar-dark .memo-hint{color:#475569;}
.memo-input-wrap{margin-top:12px;padding-top:12px;}
.memo-bar-dark .memo-input-wrap{border-top:1px solid #cbd5e1;}
.memo-label{font-size:12px;margin-bottom:8px;font-weight:600;color:#334155;}
.memo-textarea{border-radius:8px;padding:10px 14px;font-size:13px;line-height:1.8;min-height:60px;width:100%;font-family:inherit;border:1px solid #cbd5e1;word-break:break-all;resize:vertical;}
.memo-textarea.memo-textarea-dark{background:#ffffff;border:1px solid #cbd5e1;color:#1e293b;}
.memo-action-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px;}
.btn-emerald-sm{background:#10b981;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .2s;}
.btn-emerald-sm:hover{background:#059669;}
.btn-emerald-sm:disabled,.btn-emerald-sm.btn-disabled{background:#94a3b8;cursor:not-allowed;pointer-events:none;}
.btn-sm:disabled,.btn-sm.btn-disabled{background:#94a3b8;color:#fff;cursor:not-allowed;pointer-events:none;}
.btn-gray-sm{background:#6b7280;color:#fff;}
.btn-gray-sm:hover{background:#4b5563;}
.memo-parse-status{margin-top:10px;padding:9px 14px;border-radius:8px;font-size:13px;line-height:1.6;}
.memo-parse-status.ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;}
.memo-parse-status.ng{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;}
.memo-bar-label{font-size:12px;font-weight:700;border-radius:20px;padding:3px 10px;color:#2563eb;background:#dbeafe;min-width:70px;text-align:center;}
@media(max-width:640px){.camera-controls{flex-direction:column;}.dfg{flex-direction:column;align-items:flex-start;}.dfg .form-label{min-width:auto;}.comp-grid{grid-template-columns:1fr;}.sns-grid{grid-template-columns:1fr;}}
.contact-form{max-width:520px;margin:0 auto;}
.contact-form .form-group select,.contact-form .form-group input,.contact-form .form-group textarea{background-color:#fafafa;border:1px solid #d1d5db;border-radius:8px;padding:12px 14px;font-size:14px;width:100%;font-family:inherit;}
.contact-form .form-group select{cursor:pointer;}
.consult-textarea-wrap{display:none;}
.consult-textarea-wrap.show{display:block;}
/* === AI-DEMO LIGHT THEME (REFINED) === */
#ai-demo .demo-container{background-color:#f1f5f9;border-color:#00387b;box-shadow:0 1px 3px rgba(0,0,0,.1); border-width: 6px;}
#ai-demo .dfg .form-label{color:#334155;}
#ai-demo .voice-bar-dark,#ai-demo .memo-bar-dark,#ai-demo .camera-box-dark{background:#f8fafc;border-color:#cbd5e1;}
#ai-demo .camera-label{color:#334155;}
#ai-demo .voice-bar-dark .voice-hint,#ai-demo .memo-bar-dark .memo-hint{color:#475569;}
#ai-demo .voice-transcript-box-dark,#ai-demo .memo-textarea-dark{background:#ffffff;border-color:#cbd5e1;color:#1e293b;}
#ai-demo .voice-bar-dark .voice-transcript-label,#ai-demo .memo-bar-dark .memo-label{color:#334155;}
#ai-demo .demo-output-inner{background:#f8fafc;border-color:#cbd5e1;}
#ai-demo .demo-step-title{color:#334155;border-bottom-color:#cbd5e1;}
#ai-demo .comp-txt{color:#1e293b;}
#ai-demo .comp-card.bef{background:#f1f5f9;border-color:#cbd5e1;}
#ai-demo .comp-lbl.bef{color:#475569;}
#ai-demo .ld-txt{color:#475569;}
#ai-demo .sns-prev{background:#f8fafc;border-color:#cbd5e1;}
#ai-demo .sns-prev-ttl{color:#475569;}
#ai-demo .sns-card{background:#ffffff;border-color:#cbd5e1;}
#ai-demo .sns-hd{color:#334155;}
#ai-demo .sns-body{color:#475569;}
#ai-demo .demo-err{background:#fef2f2;border-color:#fecaca;color:#991b1b;}
#ai-demo .copy-btn{background:#e5e7eb;border-color:#cbd5e1;color:#334155;}
#ai-demo .copy-btn:hover{background:#d1d5db;}
#ai-demo .btn-outline-sm{background:transparent;border-color:#cbd5e1;color:#334155;}
#ai-demo .btn-outline-sm:hover{background:#f3f4f6;}
#ai-demo .output-footer{border-top-color:#cbd5e1;color:#475569;}
.ai-article-body{font-size:13px;line-height:1.8;color:#1e293b;}
.ai-article-title{color:#1d4ed8;display:block;font-size:15px;font-weight:700;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid #dbeafe;}
.ai-article-conclusion{font-size:13px;font-weight:600;color:#065f46;background:#ecfdf5;border-left:3px solid #10b981;padding:8px 12px;border-radius:0 6px 6px 0;margin-bottom:10px;line-height:1.7;}
.ai-article-main{font-size:13px;line-height:1.8;color:#334155;margin:0;}
.ai-final-note{margin-top:14px;padding:12px 16px;background:#fefce8;border:1px solid #fde68a;border-radius:8px;font-size:13px;color:#713f12;line-height:1.7;}
.ai-final-note strong{color:#92400e;}
.ai-edit-section{margin-bottom:10px;}
.ai-edit-label{display:block;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;}
.ai-edit-title-input{width:100%;padding:7px 10px;font-size:15px;font-weight:700;color:#1d4ed8;border:1.5px solid #bfdbfe;border-radius:6px;background:#eff6ff;outline:none;}
.ai-edit-title-input:focus{border-color:#2563eb;background:#fff;}
.ai-edit-conclusion-textarea{width:100%;padding:8px 12px;font-size:13px;font-weight:600;color:#065f46;background:#ecfdf5;border:1.5px solid #6ee7b7;border-radius:6px;resize:none;overflow:hidden;line-height:1.7;outline:none;display:block;min-height:72px;}
.ai-edit-conclusion-textarea:focus{border-color:#10b981;background:#f0fdf4;}
.ai-edit-body-textarea{width:100%;padding:8px 12px;font-size:13px;color:#334155;background:#f8fafc;border:1.5px solid #cbd5e1;border-radius:6px;resize:none;overflow:hidden;line-height:1.8;outline:none;display:block;min-height:200px;}
.ai-edit-body-textarea:focus{border-color:#94a3b8;background:#fff;}
.ai-save-warning{font-size:12px;color:#b45309;display:none;}
.ai-post-warning{font-size:12px;color:#b45309;}
.ai-edit-hint{font-size:11px;color:#94a3b8;margin-top:5px;}
.demo-notice{font-size:14px;color:#64748b;text-align:center;margin-top:10px;padding:8px 12px;background:#f1f5f9;border-radius:8px;line-height:1.6;}
.demo-notice i{margin-right:4px;color:#94a3b8;}
.btn-outline-sm:disabled,.btn-outline-sm.btn-disabled{opacity:.45;cursor:not-allowed;pointer-events:none;}
.ld-spinner{width:40px;height:40px;border:3px solid #e2e8f0;border-top-color:#2563eb;border-radius:50%;animation:spin-ld .8s linear infinite;margin:0 auto 14px;}
@keyframes spin-ld{to{transform:rotate(360deg);}}
#ai-demo .ld-txt{color:#475569;}
.camera-video{border-radius:8px;border:1px solid #cbd5e1;max-width:100%;}
.camera-preview-note{color:#2563eb;font-size:12px;margin-top:8px;text-align:center;}
.camera-snapshot-img{border-radius:8px;max-width:100%;border:1px solid #6ee7b7;}
.camera-note{color:#059669;font-size:12px;margin-top:8px;}
.input-methods-box{background:#f8fafc; margin-bottom: 20px;}
.input-methods-box .voice-bar{border:none;padding:0;background:transparent;}
.input-methods-box .memo-bar{border:none;padding:0;background:transparent;margin-top:16px;padding-top:16px;border-top:1px solid #cbd5e1;}
.unified-input-dark { background:#f8fafc; border:1.5px solid #cbd5e1; border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.unified-input-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.unified-input-label { font-size:12px; font-weight:700; color:#2563eb; white-space:nowrap; }
.unified-hint { font-size:12px; color:#475569; }
.unified-input-row { display:flex; align-items:stretch; gap:8px; }
.unified-textarea { flex:1; padding:10px 12px; font-size:16px; line-height:1.7; color:#1e293b; background:#ffffff; border:1px solid #cbd5e1; border-radius:6px; resize:none; font-family:inherit; min-height:72px; }
.unified-textarea:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.1); }
.btn-unified-mic { flex-shrink:0; width:100px; background:#fff; border:4px solid #2563eb; border-radius:16px; color:#2563eb; font-size:50px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; align-self:stretch; }
.btn-unified-mic:hover { background:#dbeafe; border-color:#2563eb; color:#1d4ed8; }
.btn-unified-mic.recording { background:#fee2e2; border-color:#fca5a5; color:#dc2626; animation:pulse-mic .8s ease-in-out infinite alternate; }
@keyframes pulse-mic { from { box-shadow:0 0 0 0 rgba(220,38,38,.4); } to { box-shadow:0 0 0 6px rgba(220,38,38,0); } }
.unified-action-row { display:flex; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap; }
@media(max-width:640px){
  .btn-unified-mic{width:44px;font-size:22px;}
  .unified-input-dark{border:none;padding:0;}
  .unified-action-row{justify-content:center;}
  .btn-emerald-sm{width:100%;justify-content:center;}
  #saveArticleBtn{width:auto !important;}
  #revertArticleBtn{width:auto !important;flex-shrink:0;}
  .demo-container{padding:0.3rem;}
  .demo-output-col{padding:0.3rem;}
  .comp-card{padding:10px 10px;}
  .ai-edit-title-input{font-size:16px;}
  .ai-edit-conclusion-textarea,.ai-edit-body-textarea{font-size:16px;}
  .demo-footer-new{flex-direction:column;align-items:stretch;}
  .demo-footer-new .btn-emerald-sm{width:100%;justify-content:center;}
  .ai-post-warning{text-align:center;}
  .dfg-grid{gap:10px;}
  .demo-output-inner{padding: 8px;}
}