/* DDAKBOX: a calm desktop workspace inspired by Apple's interface principles.
   Controls, navigation and content keep their existing DOM and behavior. */
:root{
  --dd-ink:#1d1d1f;--dd-muted:#62626a;--dd-brand:#0071e3;
  --dd-line:#e5e5ea;--dd-bg:#f5f5f7;
  --pw-blue:var(--dd-brand);--pw-border:var(--dd-line);
  --pw-ink:var(--dd-ink);--pw-muted:var(--dd-muted);
  --main:var(--dd-brand);--main-dark:#005bb5;--m:var(--dd-brand);
  --blue:var(--dd-brand);--ink:var(--dd-ink);--mu:var(--dd-muted);
  --line:var(--dd-line);--bg:var(--dd-bg);
  --dd-shadow:0 4px 24px rgb(29 29 31 / 4%);
  --dd-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Pretendard,'Malgun Gothic',sans-serif;
  --ep-bg:var(--dd-bg);--ep-paper:#fff;--ep-ink:var(--dd-ink);--ep-muted:var(--dd-muted);
  --ep-line:var(--dd-line);--ep-soft:#eeeef2;--ep-green:var(--dd-brand);--ep-green-dark:#005bb5;
  --ep-lime:#e9f2fe;--ep-shadow:var(--dd-shadow);--ep-font:var(--dd-font);
}
body{background:var(--dd-bg)!important;color:var(--dd-ink)!important;font-family:var(--dd-font)!important;letter-spacing:-.018em;line-height:1.6}
h1,h2,h3,h4{color:var(--dd-ink);font-weight:650;letter-spacing:-.035em;line-height:1.3}
button,input,select,textarea{font-family:var(--dd-font)!important}
a{color:var(--dd-brand)}
button,a,input,select,textarea,summary{outline-offset:3px}
:is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid #85bfff!important}
:is(button,a.button,.pw-btn,.pi-btn){transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease}
button:disabled{opacity:.5;cursor:not-allowed}
.dd-photo{width:24px;height:24px;margin-right:6px}
[data-dd-action-photo]>.dd-photo{width:22px!important;height:22px!important;flex-basis:22px!important}

/* The chrome stays separate from the opaque content cards. */
.pw-studio header,.site-header,.top{
  background:rgba(250,250,252,.94)!important;
  border-bottom:1px solid rgb(29 29 31 / 8%)!important;
  box-shadow:none!important;
}
@supports(backdrop-filter:blur(16px)){
  .pw-studio header,.site-header,.top{background:rgba(250,250,252,.84)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .sidebar,.mobile-nav{background:rgba(246,246,248,.9)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
}
.pw-studio header{padding:14px 26px!important;gap:18px;align-items:center}
.pw-studio header h1{font-size:23px!important;font-weight:700!important;letter-spacing:-.8px}
.pw-studio header h1 small{color:#86868b;font-size:11px;font-weight:500}
.pw-studio .h13sub{font-size:12px!important;color:var(--dd-muted)!important;margin-top:4px}
.pw-studio header>span{gap:8px!important}
.pw-studio header>span>:is(button,a,select){
  border:1px solid rgb(29 29 31 / 10%)!important;border-radius:12px!important;
  background:rgba(255,255,255,.9)!important;color:var(--dd-ink)!important;
  font-size:12px!important;font-weight:500!important;height:38px!important;min-height:38px!important;
}
.pw-studio header>span>.pi-lang{order:100}
.site-header .header-inner{gap:24px;min-height:72px}
.brand,.top .logo{color:var(--dd-ink)!important;font-weight:700;letter-spacing:-.8px}
.brand-dot{color:var(--dd-brand)}
.site-header nav a{color:#515158;font-size:13px;font-weight:500}
.sidebar{border-right:1px solid var(--dd-line);border-radius:16px;padding:18px 10px}
.sidebar .nav-item{border-radius:10px;min-height:44px;color:#515158;font-weight:500}
.sidebar .nav-item.active{background:#e6eefb!important;color:#0066cc!important;font-weight:650}
.mobile-nav{border-top:1px solid var(--dd-line)!important}
.mobile-nav button.active{color:var(--dd-brand)!important}

/* Workspace structure: deliberate gaps instead of nested colored boxes. */
.pw-studio .wrap{max-width:1660px;margin-inline:auto;padding:24px!important}
.pw-intro{padding:8px 0 24px!important;gap:24px!important}
.pw-intro h2,.workspace-heading h1{font-size:clamp(26px,2.4vw,34px)!important;font-weight:700;letter-spacing:-1.2px}
.pw-intro p,.workspace-heading p{font-size:13px!important;color:var(--dd-muted)!important;line-height:1.7}
.workspace-heading{margin-bottom:24px}
.eyebrow{color:#74747c;letter-spacing:.08em;font-weight:600}
.pw-studio .panel,.pw-studio .card,.panel,.card,.pw-x-card{
  background:#fff!important;border:1px solid var(--dd-line)!important;
  border-radius:20px!important;box-shadow:var(--dd-shadow)!important;
}
.pw-studio .panel{padding:24px!important;margin-bottom:20px}
.pw-studio .panel h2,.panel-heading h2{font-size:18px!important;font-weight:650!important;margin-bottom:16px!important}
.panel-heading>div h2{margin-bottom:0!important}
.workspace-grid{gap:24px}
.step-dot{background:#e9f2fe!important;color:#0066cc!important;font-weight:700}
.phead{background:#f5f5f7!important;border-color:var(--dd-line)!important}
.phead h1{font-size:clamp(28px,3vw,42px);letter-spacing:-1.3px}
.phead-img{border-radius:22px!important}

/* Quiet controls and one clear primary action. */
.pw-btn,.button,.pi-btn,.pw-studio .btn,.b{border-radius:12px!important;font-weight:550!important}
.pw-btn,.button:not(.primary),.pi-btn:not(.pri),.pw-studio .btn.sub{
  background:#fff!important;color:var(--dd-ink)!important;border:1px solid var(--dd-line)!important;box-shadow:none!important;
}
.pw-studio .btn:not(.sub),.pw-btn.pw-primary,.button.primary,.pi-btn.pri,.b.pri{
  background:var(--dd-brand)!important;color:#fff!important;border-color:var(--dd-brand)!important;
  box-shadow:0 2px 5px rgb(0 113 227 / 12%)!important;
}
:is(.pw-btn,.button,.pi-btn):not(:disabled):hover{border-color:#b8c5d8!important;box-shadow:0 2px 8px rgb(29 29 31 / 5%)!important}
:is(.pw-btn.pw-primary,.button.primary,.pi-btn.pri):not(:disabled):hover{background:#0077ed!important}
.pw-studio input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]),
.pw-studio select,.pw-studio textarea,.field input,.field select,.pi-input{
  border:1px solid #d8d8df!important;border-radius:10px!important;
  color:var(--dd-ink)!important;background:#fff!important;min-height:40px;box-shadow:none;
}
.field input,.field select{min-height:46px}
.field label,.dimensions-label{font-size:12px;font-weight:600;color:#515158}
input::placeholder,textarea::placeholder{color:#85858e}
.pw-studio #itemTable :is(input,select){min-height:40px!important}
.pw-studio table{font-size:13px;border-color:var(--dd-line)}
.pw-studio table th{background:#fafafa!important;color:#62626a!important;font-size:12px;font-weight:600;padding:12px 10px}
.pw-studio table td{border-color:#ededf1!important;padding:12px 10px}

/* Segmented navigation mirrors familiar desktop app controls. */
.pw-studio .t13Tabs,.pw-result-groups,#pwpModeBar,.pwbf-seg{
  background:#eeeef2!important;border:1px solid #e5e5ea!important;border-radius:14px!important;
  padding:4px!important;gap:4px!important;box-shadow:none!important;
}
.pw-result-groups{margin:4px 0 16px!important}
.pw-result-groups button,.pw-studio .t13Tabs button,#pwpModeBar>button,.pwbf-seg button{
  background:transparent!important;border:1px solid transparent!important;color:#62626a!important;
  border-radius:10px!important;min-height:40px;box-shadow:none!important;font-size:13px;font-weight:550;
}
.pw-result-groups button.on,.pw-studio .t13Tabs button.on,#pwpModeBar>button.on,.pwbf-seg button.on{
  background:#fff!important;color:var(--dd-ink)!important;border-color:rgb(29 29 31 / 6%)!important;
  box-shadow:0 2px 5px rgb(29 29 31 / 9%)!important;font-weight:650!important;
}
.pw-result-subtabs{gap:8px;margin-bottom:16px}
.pw-result-subtabs button{border-radius:10px;color:#62626a;background:#fff;border:1px solid var(--dd-line)}
.pw-result-subtabs button.on{color:#0066cc;background:#e9f2fe;border-color:#c7defb}
.pwp-tools{border:1px solid var(--dd-line)!important;border-radius:16px!important;background:#fafafa!important;padding:12px!important}
#pwpModeBar #ddAiSuggestButton{border-left:0!important;color:#0066cc!important}
.v3bar,.stepbar{gap:8px!important;background:#f8f8fa!important;border-color:var(--dd-line)!important;border-radius:12px!important}
.v3grid{gap:20px}
.viewer,.v3view,.gview,.pwp-view{background:#f2f2f5;border-radius:16px;overflow:hidden}

/* Keep real product visuals prominent, details secondary. */
.pw-category,.category-card,.catCard{border:1px solid var(--dd-line)!important;border-radius:16px!important;background:white!important;box-shadow:none!important}
.pw-category:hover,.category-card:hover{border-color:#9ec7f3!important;background:#f8fbff!important}
.pw-category.on,.category-card.selected{border-color:#80b8ef!important;background:#f2f8ff!important}
.pwbf,.pwbf-plan,.pwbf-ice-add,.pws-custom,.pw-extras{background:#fafafa!important;border-color:var(--dd-line)!important;border-radius:16px!important}
.pwbf-pick{background:#f4f8fd!important;border-color:#d5e5f7!important;border-radius:15px!important}
.pwbf-flow li{background:#fff!important;border-color:var(--dd-line)!important;border-radius:12px!important}
.pwbf-flow li.fee{background:#1d1d1f!important;border-color:#1d1d1f!important;color:white!important}
.pws-node,.pws-card,.s13OptC,.s13Card{border:1px solid var(--dd-line)!important;border-radius:18px!important;box-shadow:none!important;background:#fff!important}
.pws-node{padding:20px!important}
.pws-node .pws-ic{margin-bottom:12px}
.pws-node .pws-ic .dd-photo{width:52px!important;height:52px!important}
.pws-node .pws-title{color:var(--dd-ink)!important}
.pws-kpi,.d13K{border-radius:14px!important;background:#fafafa!important;border-color:var(--dd-line)!important}
.pws-kpi strong,.d13K strong,.result-dimensions{font-variant-numeric:tabular-nums;color:var(--dd-ink)!important}
.dd-card-cost{color:var(--dd-ink);font-size:24px}
.dd-card-hint{color:#0066cc}
.dd-help{background:#fafafa;border-color:var(--dd-line);border-radius:12px}
.dd-help>summary{padding:12px 14px;color:#62626a}
.dd-ai-section{background:#f2f7fd;border-color:#d3e4f7;border-radius:18px;padding:18px}
.dd-ai-head strong{color:#005bb5}.dd-ai-head small{color:var(--dd-muted)}
.dd-ai-actions button{border-color:#d3e4f7;color:#005bb5;background:#fff}
.dd-ai-section .pwa-card{border-radius:17px;border-color:var(--dd-line);padding:18px}
.dd-ai-section .pwa-ct{color:#515158;font-weight:650}
.dd-ai-section .pwa-sum{border-radius:13px;background:#f4f9f5;border-color:#d8e8dd}
#gSteps .gstep,.pwp-guide .gstep{border-radius:14px!important;border-color:var(--dd-line)!important;background:#fff!important}
#gSteps .gstep.on{border-color:#8cb9ee!important;background:#f5f9ff!important}
#gSteps .gn{background:#edf2f8!important;color:#515158!important}
#gSteps .gstep.on .gn{background:#0071e3!important;color:white!important}

/* The same visual system follows records, account and help screens. */
.pw-dialog,dialog,.pi-modal,.pkr-dlg{border-radius:22px!important;border:1px solid var(--dd-line)!important;box-shadow:0 24px 80px rgb(29 29 31 / 18%)!important}
dialog::backdrop,.pw-dialog::backdrop{background:rgb(29 29 31 / 30%);backdrop-filter:blur(5px)}
.saved-card,.steps-grid article,.faq-section details{border-radius:18px!important;border-color:var(--dd-line)!important;background:#fff}
.toast{background:#1d1d1f!important;border-radius:14px;box-shadow:0 8px 24px rgb(29 29 31 / 12%)}
.landing .hero{padding-top:72px;padding-bottom:76px;gap:64px}
.landing .hero h1{font-size:clamp(40px,4.5vw,68px);font-weight:700;line-height:1.15;letter-spacing:-.05em}
.landing .hero p{color:#62626a;line-height:1.8}
.landing .hero-visual{background:#eef0f3;border-radius:28px;box-shadow:0 16px 45px rgb(29 29 31 / 7%)}
.landing .hero .button{border-radius:999px!important}
.landing .section-top h2{font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-1.1px}
.landing .how-section{background:#eeeef2}
.landing .bottom-cta{background:#fff;border-radius:24px}
.site-footer{border-color:var(--dd-line);color:#62626a}

/* Business workspace: the same macOS-like sidebar and content hierarchy. */
.ep-side{background:#ededf1!important;border-right:1px solid var(--dd-line)!important}
.ep-brand,.ep-side .ep-org b{color:var(--dd-ink)!important}
.ep-side small,.ep-side-foot{color:var(--dd-muted)!important}
.ep-mark{background:#fff!important;color:var(--dd-brand)!important;border-radius:11px!important;box-shadow:0 1px 4px rgb(29 29 31 / 8%)}
.ep-nav button{border-radius:10px;color:#515158!important;font-weight:500;min-height:42px}
.ep-nav button.on{background:#dce8fa!important;color:#005bb5!important;font-weight:650}
.ep-nav button:hover{background:#e3e3e9!important}
.ep-top{background:rgba(250,250,252,.94);border-color:var(--dd-line)!important;padding-bottom:20px}
.ep-top h1{font-size:30px;font-weight:700;letter-spacing:-1px}
.ep-section,.ep-kpi,.ep-plan,.ep-mini{border-color:var(--dd-line)!important;border-radius:18px!important;box-shadow:var(--dd-shadow)!important}
.ep-section-head{padding:18px 20px;border-color:var(--dd-line)!important}
.ep-btn{border-radius:11px!important;min-height:40px;border-color:var(--dd-line)!important;font-weight:550}
.ep-add{background:var(--dd-brand)!important;border-color:var(--dd-brand)!important;color:#fff!important}
.ep-search,.ep-field input,.ep-field select,.ep-field textarea{border-radius:10px!important;background:#fff!important;border-color:#d8d8df!important}
.ep-table th{background:#fafafa!important;color:#62626a!important;font-weight:600}
.ep-table td{border-color:#ededf1!important}
.ep-privacy{border-radius:12px;box-shadow:none}
.ep-kpi strong{font-variant-numeric:tabular-nums;letter-spacing:-.035em}

@media(max-width:1000px){
  .pw-studio header{flex-wrap:wrap;gap:12px;padding:14px 20px!important}
  .pw-studio .wrap{padding:20px!important}
  .pw-intro{gap:16px!important}
  .workspace-grid{gap:18px}
}
@media(max-width:700px){
  .pw-studio header{padding:12px 16px!important}
  .pw-studio header h1{font-size:21px!important}
  .pw-studio header>span{gap:6px!important;width:100%;justify-content:flex-start!important}
  .pw-studio header>span>:is(button,a,select){min-height:44px!important;height:44px!important;padding-inline:10px!important}
  .pw-studio header>span>.pi-lang{margin-left:auto!important}
  .pw-studio .wrap{padding:14px!important}
  .pw-studio .panel{padding:18px!important;border-radius:17px!important}
  .pw-intro h2,.workspace-heading h1{font-size:27px!important}
  .pw-result-groups{display:flex!important;overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:thin}
  .pw-result-groups button{flex:1 0 auto;white-space:nowrap;min-height:44px;padding:9px 12px!important}
  #pwpModeBar{display:flex;flex-wrap:wrap;max-width:100%}
  #pwpModeBar>button{min-height:44px}
  .pwp-tools{padding:9px!important}
  .pw-btn,.pi-btn,.button{min-height:44px}
  .workspace-grid{gap:16px}
  .landing .hero{padding-top:38px;padding-bottom:44px;gap:28px}
  .landing .hero h1{font-size:44px}
  .landing .hero-visual{border-radius:22px}
  .site-header .header-inner{gap:10px}
  .dd-ai-section{padding:13px;border-radius:16px}
}
@media(prefers-reduced-transparency:reduce){
  .pw-studio header,.site-header,.top,.sidebar,.mobile-nav{background:#fafafa!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  body{background:#fff!important;color:#000!important}
  .card,.panel,.pw-studio .panel{box-shadow:none!important;border-color:#ddd!important}
  .pw-studio header,.site-header,.top{backdrop-filter:none!important;background:#fff!important}
  .pw-studio .wrap{max-width:none;padding:0!important}
  .dd-help>*{display:block!important}
}

/* Shared 3D brand lockup: crop the source image's white margins in CSS. */
body :is(a.brand,a.dh-brand,a.logo,.dd-logo-heading a)>img.dd-brand-3d{width:204px!important;height:62px!important;object-fit:cover!important;object-position:center!important;border:0!important;border-radius:9px!important;box-shadow:none!important;background:white!important;mix-blend-mode:normal!important;display:block;flex-shrink:0}
.dd-logo-heading{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.dd-logo-heading>a{display:inline-flex;text-decoration:none}
.dd-logo-heading .h13sub{flex-basis:100%}
@media(max-width:700px){body :is(a.brand,a.dh-brand,a.logo,.dd-logo-heading a)>img.dd-brand-3d{width:155px!important;height:48px!important}.dd-logo-heading .h13sub{font-size:11px!important}}

/* The content brand stays visible when an embedded workspace hides its header. */
.pw-intro .dd-app-brand{display:block!important;width:300px;height:110px;max-width:100%;object-fit:cover;object-position:center;border-radius:12px;background:#fff;margin:0 0 14px}
@media(max-width:700px){.pw-intro .dd-app-brand{width:240px;height:88px}}

/* Brand and Home belong to the same, vertically centered navigation row. */
header.top .in{gap:0}
header.top .nav{margin-left:0;flex:1;align-items:center;min-width:0}
header.top .nav>a.logo{padding:0!important;margin:0 14px 0 0!important;display:inline-flex;align-items:center;flex:0 0 auto}
body header.top .nav>a.logo>img.dd-brand-3d{width:160px!important;height:50px!important;object-fit:cover!important;object-position:center}
header.top .nav>#navAcc{margin-left:auto}
@media(max-width:700px){header.top .nav>a.logo{margin-right:8px!important}body header.top .nav>a.logo>img.dd-brand-3d{width:126px!important;height:40px!important}header.top .nav>#navAcc{margin-left:0}}

/* 2026-10-07 로고 배경 투명(흰 바탕 상자가 보이던 것) — 배경 없는 그림 img/ddak-brand/logo-site.png 로 바꿔 끼우고 바탕·둥근 모서리 제거 · 첫 화면 가운데 큰 로고 삭제. 앱(body.pw-studio)의 로고는 css/packwise-toolbar.css 가 따로 정함 */
html body:not(.pw-studio) :is(a.brand,a.dh-brand,a.logo,.dd-logo-heading a)>img.dd-brand-3d{content:url(../img/ddak-brand/logo-site.png);background:transparent!important;object-fit:contain!important;border-radius:0!important}
html body img.dh-logo-showcase{display:none!important}