*{margin:0;padding:0;box-sizing:border-box;}
:root {
  /* ── Miricanvas Design Tokens (Light) ── */
  --s-color-brand-primary-default: #21AFBF;
  --s-color-brand-primary-accessible: #1C95A2;
  --s-color-brand-primary-background: #E7F9FB;
  --s-color-brand-primary-backgroundMedium: #B6ECF2;
  --s-color-brand-primary-surface: rgba(33,175,191,0.1);
  --s-color-brand-primary-opacityMedium: rgba(33,175,191,0.3);
  --s-color-brand-primary-onContainer: #FFFFFF;
  --s-color-brand-secondary-default: #405BBF;
  --s-color-brand-secondary-accessible: #364EA2;
  --s-color-brand-secondary-background: #ECEFF9;
  --s-color-brand-secondary-backgroundMedium: #C6CEEC;
  --s-color-brand-secondary-surface: rgba(64,91,191,0.1);
  --s-color-brand-secondary-opacityMedium: rgba(64,91,191,0.3);
  --s-color-brand-secondary-onContainer: #ECEFF9;
  --s-color-neutral-background-default: #FFFFFF;
  --s-color-neutral-background-sunken: #F1F2F3;
  --s-color-neutral-background-elevation01: #FFFFFF;
  --s-color-neutral-background-elevation02: #FFFFFF;
  --s-color-neutral-background-defaultInverse: #23242A;
  --s-color-neutral-background-transparent: rgba(35,36,42,0);
  --s-color-neutral-surface-extra-light: rgba(35,36,42,0.02);
  --s-color-neutral-surface-lightness: rgba(35,36,42,0.05);
  --s-color-neutral-surface-light: rgba(35,36,42,0.15);
  --s-color-neutral-surface-medium-light: rgba(35,36,42,0.3);
  --s-color-neutral-surface-medium: rgba(35,36,42,0.4);
  --s-color-neutral-surface-dark: rgba(35,36,42,0.7);
  --s-color-neutral-surface-darkness: rgba(35,36,42,0.9);
  --s-color-neutral-surface-inverse-lightness: rgba(255,255,255,0.05);
  --s-color-neutral-surface-inverse-light: rgba(255,255,255,0.15);
  --s-color-neutral-surface-inverse-medium-light: rgba(255,255,255,0.3);
  --s-color-neutral-surface-inverse-medium: rgba(255,255,255,0.4);
  --s-color-neutral-surface-inverse-dark: rgba(255,255,255,0.7);
  --s-color-neutral-surface-inverse-darkness: rgba(255,255,255,0.9);
  --s-color-neutral-contents-default: #23242A;
  --s-color-neutral-contents-sub: #515462;
  --s-color-neutral-contents-additional: #73788C;
  --s-color-neutral-contents-placeholder: #8F93A3;
  --s-color-neutral-contents-disabled: #8F93A3;
  --s-color-neutral-contents-inverse-default: #FFFFFF;
  --s-color-neutral-contents-inverse-sub: rgba(255,255,255,0.8);
  --s-color-neutral-contents-inverse-additional: rgba(255,255,255,0.6);
  --s-color-neutral-contents-inverse-placeholder: rgba(255,255,255,0.5);
  --s-color-neutral-contents-inverse-disabled: rgba(255,255,255,0.5);
  --s-color-neutral-border-default: rgba(35,36,42,0.15);
  --s-color-neutral-border-light: rgba(35,36,42,0.1);
  --s-color-neutral-border-deep: rgba(35,36,42,0.3);
  --s-color-neutral-border-transparent: rgba(35,36,42,0);
  --s-color-neutral-border-inverse-default: rgba(255,255,255,0.15);
  --s-color-neutral-border-inverse-light: rgba(255,255,255,0.1);
  --s-color-neutral-border-inverse-deep: rgba(255,255,255,0.3);
  --s-color-neutral-border-inverse-transparent: rgba(35,36,42,0);
  --s-color-neutral-divider-default: rgba(35,36,42,0.1);
  --s-color-neutral-divider-deep: rgba(35,36,42,0.15);
  --s-color-neutral-divider-inverse-default: rgba(255,255,255,0.1);
  --s-color-neutral-divider-inverse-deep: rgba(255,255,255,0.15);
  --s-color-neutral-graphic-lightness: rgba(35,36,42,0.1);
  --s-color-neutral-graphic-light: rgba(35,36,42,0.2);
  --s-color-neutral-graphic-medium: rgba(35,36,42,0.4);
  --s-color-neutral-graphic-dark: rgba(35,36,42,0.7);
  --s-color-neutral-graphic-darkness: rgba(35,36,42,0.9);
  --s-color-neutral-graphic-inverse-lightness: rgba(255,255,255,0.1);
  --s-color-neutral-graphic-inverse-light: rgba(255,255,255,0.2);
  --s-color-neutral-graphic-inverse-medium: rgba(255,255,255,0.4);
  --s-color-neutral-graphic-inverse-dark: rgba(255,255,255,0.7);
  --s-color-neutral-graphic-inverse-darkness: rgba(255,255,255,0.9);
  --s-color-neutral-static-black-lightness: rgba(0,0,0,0.1);
  --s-color-neutral-static-black-light: rgba(0,0,0,0.2);
  --s-color-neutral-static-black-medium: rgba(0,0,0,0.4);
  --s-color-neutral-static-black-dark: rgba(0,0,0,0.6);
  --s-color-neutral-static-black-darkness: rgba(0,0,0,0.8);
  --s-color-neutral-static-black-default: #000000;
  --s-color-neutral-static-white-lightness: rgba(255,255,255,0.1);
  --s-color-neutral-static-white-light: rgba(255,255,255,0.2);
  --s-color-neutral-static-white-medium: rgba(255,255,255,0.4);
  --s-color-neutral-static-white-dark: rgba(255,255,255,0.6);
  --s-color-neutral-static-white-darkness: rgba(255,255,255,0.8);
  --s-color-neutral-static-white-default: #FFFFFF;
  --s-color-neutral-static-gray-lightness: #F1F2F3;
  --s-color-neutral-static-gray-light: #D5D7DC;
  --s-color-neutral-static-gray-medium: #ABAEBA;
  --s-color-neutral-static-gray-dark: #626677;
  --s-color-neutral-static-gray-darkness: #3A3C46;
  --s-color-semantic-positive-default: #33CC95;
  --s-color-semantic-positive-accessible: #2BAD7E;
  --s-color-semantic-positive-background: #EBFAF4;
  --s-color-semantic-positive-surface: rgba(51,204,149,0.1);
  --s-color-semantic-negative-default: #E54A1A;
  --s-color-semantic-negative-accessible: #C33F16;
  --s-color-semantic-negative-background: #FCEDE8;
  --s-color-semantic-negative-surface: rgba(229,74,26,0.1);
  --s-color-semantic-warning-default: #E5C51A;
  --s-color-semantic-warning-background: #FCF9E8;
  --s-color-semantic-warning-surface: rgba(229,197,26,0.1);
  --s-color-semantic-info-default: #3355CC;
  --s-color-semantic-info-background: #EBEEFA;
  --s-color-semantic-info-surface: rgba(51,85,204,0.1);
  --s-color-semantic-normal-default: #73788C;
  --s-color-semantic-normal-background: #F1F2F3;

  /* ── Shorthand aliases ── */
  --teal: var(--s-color-brand-primary-default);
  --teal-lt: var(--s-color-brand-primary-background);
  --teal-dk: var(--s-color-brand-primary-accessible);
  --border: var(--s-color-neutral-divider-default);
  --bg: var(--s-color-neutral-background-sunken);
  --t1: var(--s-color-neutral-contents-default);
  --t2: var(--s-color-neutral-contents-sub);
  --t3: var(--s-color-neutral-contents-additional);

  /* ── Base spacing tokens ── */
  --b-spacing-40: 0.5rem;
  --b-spacing-60: 0.75rem;
  --b-spacing-70: 1rem;

  /* ── Component tokens (search) ── */
  --c-search-color-border-ghost-default: rgba(90,101,119,0.24);
  --c-search-color-background-ghost-default: rgba(255,255,255,0.00);
  --c-search-color-contents-placeholder: #70798F;

  /* ── Component tokens (dropdownField) ── */
  --c-dropdownField-size-height-M: 2.5rem;
  --c-dropdownField-spacing-itemGap-contents-M: 0.5rem;
  --c-dropdownField-radius-M: 0.5rem;
  --c-dropdownField-color-border-enabled: rgba(90,101,119,0.24);
  --c-dropdownField-color-background-enabled: #FFF;

  /* ── Base font tokens ── */
  --b-fontFamily-body-default: "Pretendard Variable";
  --b-fontSize-11: 0.688rem;
  --b-fontWeight-medium: 500;
  --b-lineHeight-rem-12: 1rem;

  /* ── Component tokens (button) ── */
  --c-button-size-container-M: 2.5rem;
  --c-button-spacing-itemGap-M: 0.375rem;
  --c-button-radius-square-M: 0.5rem;
  --c-button-borderWidth-M: 1px;
}
body{font-family:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo',sans-serif;background:var(--bg);height:100vh;display:flex;flex-direction:column;overflow:hidden;font-size:13px;color:var(--t1);}
button{font-family:inherit;cursor:pointer;border:none;background:transparent;}

/* ── TOP NAV ── */
.top-nav{width:100%;padding:0.75rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--s-color-neutral-divider-default);background:var(--s-color-neutral-background-default);flex-shrink:0;z-index:200;}
.nav-ico{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--s-color-neutral-contents-additional);font-size:14px;transition:background .15s;}
.nav-ico:hover{background:var(--s-color-neutral-surface-lightness);color:var(--s-color-neutral-contents-sub);}
.nav-ico svg{display:block;width:20px;height:20px;}
.nav-div{width:0;height:20px;border-left:1px solid var(--s-color-neutral-divider-default);margin:0 16px;flex-shrink:0;}
.logo{display:flex;align-items:center;margin-left:16px;cursor:pointer;text-decoration:none;flex-shrink:0;}
.logo svg{display:block;}
.nav-center{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;}
.file-title{border:none;outline:none;font-size:13px;color:var(--s-color-neutral-contents-sub);padding:4px 8px;border-radius:5px;background:transparent;text-align:center;min-width:140px;}
.file-title:hover{background:var(--s-color-neutral-surface-lightness);}
.size-btn{border:1px solid var(--s-color-neutral-border-light);background:var(--s-color-neutral-background-default);border-radius:16px;padding:4px 10px;font-size:11px;color:var(--s-color-neutral-contents-sub);display:flex;align-items:center;gap:3px;transition:background .15s;}
.size-btn:hover{background:var(--s-color-neutral-surface-lightness);}
.size-btn svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;}
.nav-right{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.pro-btn{display:flex;height:2.5rem;padding:0.5rem 1rem;justify-content:center;align-items:center;gap:0.375rem;border-radius:0.5rem;border:1px solid var(--s-color-neutral-background-transparent);background:var(--s-color-neutral-background-transparent);font-size:12px;font-weight:600;color:var(--s-color-neutral-contents-default);transition:background .15s;}
.pro-btn:hover{background:var(--s-color-neutral-surface-extra-light);}
.print-btn{display:flex;height:var(--c-button-size-container-M,2.5rem);padding:0.5rem 1rem;justify-content:center;align-items:center;gap:var(--c-button-spacing-itemGap-M,0.375rem);border-radius:var(--c-button-radius-square-M,0.5rem);border:var(--c-button-borderWidth-M,1px) solid var(--s-color-neutral-border-transparent,rgba(35,36,42,0));background:var(--s-color-brand-primary-surface,rgba(33,175,191,0.10));color:var(--s-color-brand-primary-accessible,#1C95A2);font-family:var(--b-fontFamily-body-default,"Pretendard Variable");font-size:var(--b-fontSize-14,0.875rem);font-style:normal;font-weight:var(--b-fontWeight-medium,500);line-height:var(--b-lineHeight-rem-14,1.25rem);transition:background .15s;}
.print-btn:hover{background:var(--s-color-brand-primary-opacityMedium);}
.dl-btn{display:flex;height:var(--c-button-size-container-M,2.5rem);padding:0.5rem 1rem;justify-content:center;align-items:center;gap:var(--c-button-spacing-itemGap-M,0.375rem);border-radius:var(--c-button-radius-square-M,0.5rem);border:var(--c-button-borderWidth-M,1px) solid var(--s-color-neutral-border-transparent,rgba(35,36,42,0));background:var(--s-color-brand-primary-default,#21AFBF);color:var(--s-color-neutral-contents-inverse-default,#FFF);font-family:var(--b-fontFamily-body-default,"Pretendard Variable");font-size:var(--b-fontSize-14,0.875rem);font-style:normal;font-weight:var(--b-fontWeight-medium,500);line-height:var(--b-lineHeight-rem-14,1.25rem);transition:background .15s;}
.dl-btn:hover{background:var(--s-color-brand-primary-accessible);}
.dl-btn svg{width:20px;height:20px;flex-shrink:0;}

/* ── MAIN AREA ── */
.main{display:flex;flex:1;overflow:hidden;}

/* ── ICON SIDEBAR ── */
.icon-sb{width:4.5rem;background:var(--s-color-neutral-background-default);border-right:1px solid var(--s-color-neutral-border-default,rgba(35,36,42,0.15));display:flex;flex-direction:column;align-items:flex-start;padding:0.25rem;gap:0.5rem;flex-shrink:0;overflow:hidden;}
.sb-item{width:4rem;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7px 4px;border-radius:8px;cursor:pointer;gap:4px;color:var(--s-color-neutral-contents-additional);transition:all .15s;}
.sb-item:hover{background:var(--s-color-neutral-surface-lightness);color:var(--s-color-neutral-contents-sub);}
.sb-item.on{background:var(--s-color-brand-primary-background);color:var(--s-color-brand-primary-accessible,#1C95A2);}
.sb-ico{width:22px;height:22px;display:flex;align-items:center;justify-content:center;}
.sb-ico svg{width:20px;height:20px;}
.sb-lbl{font-family:var(--b-fontFamily-body-default,"Pretendard Variable");font-size:var(--b-fontSize-11,0.688rem);font-weight:var(--b-fontWeight-medium,500);line-height:var(--b-lineHeight-rem-12,1rem);text-align:center;color:inherit;}
.sb-spacer{flex:1;}
.sb-more-row{display:flex;flex-direction:column;align-items:center;padding:4px 0 0;border-top:1px solid var(--s-color-neutral-divider-default);width:100%;}
.sb-collapse-btn{width:40px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--s-color-neutral-contents-placeholder);border-radius:6px;margin-bottom:6px;}
.sb-collapse-btn:hover{color:var(--s-color-neutral-contents-sub);background:var(--s-color-neutral-surface-lightness);}
.sb-collapse-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}

/* ── LEFT PANEL ── */
.left-panel{width:360px;background:var(--s-color-neutral-background-default);border-right:1px solid var(--s-color-neutral-divider-default);display:flex;flex-direction:column;flex-shrink:0;position:relative;overflow:hidden;transition:width .2s;}
.left-panel.collapsed{width:0;overflow:hidden;}

/* panel header (132px) */
.panel-header{width:22.5rem;padding:1.5rem 1.5rem 0 1.5rem;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0.5rem;}
.search-box{display:flex;align-items:center;gap:0.5rem;background:var(--c-search-color-background-ghost-default,rgba(255,255,255,0));border-radius:0.5rem;padding:0 0.5rem 0 0.75rem;border:1px solid var(--c-search-color-border-ghost-default,rgba(90,101,119,0.24));height:2.5rem;width:100%;transition:border-color .15s;}
.search-box:focus-within{border-color:var(--s-color-brand-primary-default);}
.search-box svg{flex-shrink:0;}
.search-box input{border:none;outline:none;background:transparent;font-size:14px;color:var(--s-color-neutral-contents-default);width:100%;font-family:inherit;flex:1;}
.search-box input::placeholder{color:var(--c-search-color-contents-placeholder,#70798F);}
.search-filter-area{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.search-divider{width:1px;height:20px;background:var(--c-search-color-border-ghost-default,rgba(90,101,119,0.24));flex-shrink:0;}
.filter-btn{width:28px;height:28px;border-radius:6px;background:transparent;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:background .15s;}
.filter-btn:hover{background:var(--s-color-neutral-surface-lightness);}
.filter-btn svg{width:20px;height:20px;flex-shrink:0;}
.search-row{display:flex;align-items:center;gap:8px;}
.cat-drop{display:flex;align-items:center;justify-content:space-between;background:var(--c-dropdownField-color-background-enabled,#FFF);border:1px solid var(--c-dropdownField-color-border-enabled,rgba(90,101,119,0.24));border-radius:var(--c-dropdownField-radius-M,0.5rem);padding:var(--b-spacing-40,0.5rem) var(--b-spacing-60,0.75rem) var(--b-spacing-40,0.5rem) var(--b-spacing-70,1rem);height:var(--c-dropdownField-size-height-M,2.5rem);gap:var(--c-dropdownField-spacing-itemGap-contents-M,0.5rem);width:100%;cursor:pointer;transition:border-color .15s;}
.cat-drop:hover{border-color:var(--s-color-neutral-border-default);}
.cat-label{color:var(--c-label-color-contents-text-deep,#16181D);font-family:var(--b-fontFamily-body-default,"Pretendard Variable");font-size:0.875rem;font-style:normal;font-weight:500;line-height:146%;}
.cat-drop svg{width:20px;height:20px;flex-shrink:0;}

/* panel scroll */
.panel-scroll{flex:1;overflow-y:auto;padding-bottom:16px;}
.panel-scroll::-webkit-scrollbar{width:3px;}
.panel-scroll::-webkit-scrollbar-thumb{background:var(--s-color-neutral-border-light);border-radius:4px;}

/* carousel section (148px) */
.carousel-sec{padding:12px 0 0;margin:0 24px;}
.carousel-sec:first-child{padding-top:0;}
.sec-head{display:flex;align-items:center;justify-content:space-between;height:20px;margin:12px 0 8px;}
.sec-title{font-size:13px;font-weight:500;color:var(--s-color-neutral-contents-default);line-height:1;}
.sec-more{font-size:12px;color:var(--s-color-brand-primary-default);font-weight:500;transition:opacity .15s;}
.sec-more:hover{opacity:.7;}

/* carousel track */
.carousel-wrap{position:relative;overflow:hidden;height:120px;}
.carousel-track{display:flex;gap:8px;height:120px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-fade{position:absolute;right:0;top:0;width:36px;height:120px;background:linear-gradient(to right,rgba(255,255,255,0),var(--s-color-neutral-background-default));pointer-events:none;z-index:2;}
.carousel-next{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--s-color-neutral-background-default);box-shadow:0 1px 6px var(--s-color-neutral-static-black-lightness);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;border:none;transition:box-shadow .15s;}
.carousel-next:hover{box-shadow:0 2px 10px var(--s-color-neutral-static-black-light);}
.carousel-next svg{width:11px;height:11px;fill:none;stroke:var(--s-color-neutral-contents-sub);stroke-width:2;stroke-linecap:round;}

/* thumbnail card */
.tpl-th{height:120px;flex-shrink:0;border-radius:8px;overflow:hidden;position:relative;cursor:pointer;background:var(--s-color-neutral-static-gray-light);border:1px solid var(--s-color-neutral-border-default,rgba(35,36,42,0.15));transition:transform .15s,box-shadow .15s;}
.tpl-th:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--s-color-neutral-static-black-lightness);}
.tpl-th.selected{outline:2.5px solid var(--s-color-brand-primary-default);outline-offset:1px;}
.tpl-thumb-svg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.tpl-pg{position:absolute;bottom:4px;left:4px;min-width:24px;height:16px;background:rgba(22,24,29,0.9);color:rgba(255,255,255,0.95);font-size:10px;font-weight:600;padding:0 6px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-family:'Pretendard Variable',sans-serif;box-sizing:border-box;z-index:2;}
.tpl-crown{position:absolute;bottom:4px;right:4px;min-width:24px;height:16px;background:rgba(22,24,29,0.9);border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 6px;box-sizing:border-box;z-index:2;}

/* AI input section */
.ai-sec{display:flex;flex-direction:column;align-items:flex-start;gap:0.75rem;margin:20px 1.5rem 0;}
.ai-sec-title{color:var(--c-label-color-contents-text-deep,#16181D);font-family:"Pretendard Variable";font-size:0.875rem;font-weight:500;line-height:146%;}
.ai-input-wrap{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;position:relative;}
.ai-prompt-guide{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:200;background:var(--s-color-neutral-background-elevation01,#FFF);border:1px solid var(--s-color-neutral-border-default,rgba(35,36,42,0.15));border-radius:0.75rem;padding:0.5rem;box-shadow:0 6px 10px rgba(98,102,119,0.15);}
.ai-prompt-guide.open{display:block;}
.apg-title{display:flex;align-items:center;padding:0.5rem 0.75rem;}
.apg-label{color:#70798F;font-size:0.75rem;font-weight:500;line-height:1.35;}
.apg-menu{display:flex;gap:0.5rem;align-items:center;padding:0.625rem 0.75rem;border-radius:0.5rem;cursor:pointer;transition:background .15s;}
.apg-menu:hover{background:var(--s-color-neutral-surface-lightness);}
.apg-icon{width:20px;height:20px;object-fit:contain;flex-shrink:0;}
.apg-menu-text{flex:1;font-size:0.875rem;font-weight:400;color:#16181D;line-height:1.42;}
.apg-arrow{width:20px;height:20px;object-fit:contain;flex-shrink:0;opacity:0.4;}

/* AI 디자이너 패널 */
.ai-panel-header{display:flex;align-items:center;padding:12px 16px;height:56px;flex-shrink:0;}
.ai-ph-center{display:flex;align-items:center;gap:8px;flex:1;padding-left:8px;min-width:0;}
.ai-panel-title{font-size:14px;font-weight:600;color:var(--s-color-neutral-contents-default,#23242A);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ai-beta-badge{background:rgba(160,38,217,0.1);color:#8820B8;font-size:12px;font-weight:600;line-height:16px;padding:2px 8px;border-radius:999px;white-space:nowrap;flex-shrink:0;}
.ai-ph-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.ai-opinion-btn{font-size:12px;font-weight:500;color:var(--s-color-neutral-contents-sub,#515462);padding:4px 8px;border-radius:6px;background:var(--s-color-neutral-surface-lightness);transition:background .15s;white-space:nowrap;}
.ai-opinion-btn:hover{background:var(--s-color-neutral-surface-light);}
.ai-hdr-btn{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:transparent;transition:background .15s;flex-shrink:0;}
.ai-hdr-btn:hover{background:var(--s-color-neutral-surface-lightness);}
.ai-panel-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:0 20px;overflow-y:auto;}
.ai-body-title{font-size:24px;font-weight:600;line-height:32px;text-align:center;background:linear-gradient(90deg,#1ac5ea,#ff67cb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ai-suggestions{display:flex;flex-direction:column;gap:4px;width:100%;padding:0 4px;box-sizing:border-box;}
.ai-suggest-section-label{font-size:12px;font-weight:500;color:#73788C;font-family:'Pretendard Variable',sans-serif;padding:0 12px 4px;}
.ai-suggest-btn{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;border:none;background:transparent;font-size:14px;font-weight:400;color:#16181D;font-family:'Pretendard Variable',sans-serif;text-align:left;cursor:pointer;transition:background .15s;width:100%;height:40px;position:relative;}
.ai-suggest-btn:hover{background:rgba(88,98,118,0.09);}
.ai-suggest-btn::after{content:'';display:block;width:20px;height:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M18.3332 3.95801C18.3332 3.61283 18.0533 3.33301 17.7082 3.33301C17.363 3.33301 17.0832 3.61283 17.0832 3.95801V9.58301C17.0832 10.3884 16.4302 11.0413 15.6248 11.0413L3.70134 11.0413L7.29502 7.75238C7.54966 7.51933 7.56716 7.12399 7.33412 6.86936C7.10108 6.61472 6.70574 6.59722 6.4511 6.83026L2.0049 10.8995C1.5537 11.3124 1.55371 12.0234 2.0049 12.4363L6.4511 16.5055C6.70574 16.7385 7.10108 16.721 7.33412 16.4664C7.56716 16.2118 7.54966 15.8164 7.29503 15.5834L3.69797 12.2913L15.6248 12.2913C17.1206 12.2913 18.3332 11.0788 18.3332 9.58301V3.95801Z' fill='%2373788C'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0;opacity:0;transition:opacity .15s;margin-left:auto;}
.ai-suggest-btn:hover::after{opacity:1;}
.ai-suggest-btn svg{flex-shrink:0;}
.ai-suggest-btn.highlighted{background:rgba(88,98,118,0.09);}
#pv-ai .ai-input-card{border:1px solid #21AFBF;box-shadow:0px 2px 8px rgba(98,102,119,0.15);}
/* 입력창의 좌우 인셋. 컨텍스트 배너도 같은 값을 써서 폭이 항상 입력창과 일치한다. */
#pv-ai .ai-panel-bottom{--ai-input-inset:12px;}
#pv-ai .ai-panel-bottom .ai-input-area{margin:0 var(--ai-input-inset);width:calc(100% - var(--ai-input-inset) * 2);}
.ai-panel-bottom{display:flex;flex-direction:column;align-items:center;padding:12px 12px 24px;gap:12px;flex-shrink:0;width:100%;box-sizing:border-box;}
.ai-input-area{background:var(--s-color-neutral-background-default,#FFF);border:1px solid var(--s-color-neutral-border-default,rgba(35,36,42,0.15));border-radius:12px;display:flex;flex-direction:column;width:100%;transition:border-color .15s,box-shadow .15s;}
.ai-input-area:focus-within{border-color:var(--s-color-brand-primary-default,#21AFBF);box-shadow:0 2px 4px rgba(98,102,119,0.15);}
.ai-input-area.is-loading{border-color:transparent;background:linear-gradient(#FFF,#FFF) padding-box,linear-gradient(90deg,#1AC5EA 0%,#FF67CB 100%) border-box;box-shadow:none;}
.ai-input-area.is-disabled{position:relative;background:var(--s-color-neutral-surface-lightness,rgba(35,36,42,0.05));cursor:not-allowed;}
.ai-input-area.is-disabled .ai-panel-textarea{pointer-events:none;background:transparent;color:var(--s-color-neutral-contents-placeholder,#8F93A3);}
.ai-input-area.is-disabled .ai-panel-send,.ai-input-area.is-disabled .ai-panel-add{opacity:.4;pointer-events:none;}
.ai-input-tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#23242A;color:#fff;font-size:12px;font-weight:400;padding:6px 10px;border-radius:8px;width:160px;text-align:center;line-height:16px;opacity:0;pointer-events:none;transition:opacity .15s;filter:drop-shadow(0 4px 12px rgba(98,102,119,0.15));z-index:100;font-family:'Pretendard Variable',sans-serif;}
.ai-input-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #23242A;}
.ai-input-text{display:flex;align-items:flex-start;padding:12px 12px 0;cursor:text;}
.ai-panel-textarea{flex:1;width:100%;border:none;outline:none;resize:none;font-family:var(--b-fontFamily-body-default,"Pretendard Variable",sans-serif);font-size:14px;font-weight:400;color:var(--s-color-neutral-contents-default,#23242A);line-height:20px;background:transparent;min-height:52px;max-height:240px;overflow-y:auto;padding:0 4px;box-sizing:border-box;}
.ai-panel-textarea::placeholder{color:var(--s-color-neutral-contents-placeholder,#8F93A3);}
.ai-input-foot{display:flex;align-items:center;gap:8px;padding:10px 12px;}
.ai-panel-add{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:transparent;transition:background .15s;}
.ai-panel-add:hover{background:var(--s-color-neutral-surface-lightness);}
.ai-panel-send{margin-left:auto;width:32px;height:32px;border-radius:50%;background:var(--s-color-brand-primary-default,#21AFBF);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px var(--s-color-brand-primary-opacityMedium);transition:background .15s;}
.ai-panel-send:hover{background:var(--s-color-brand-primary-accessible);}
.ai-stop-btn{margin-left:auto;width:32px;height:32px;border-radius:50%;background:var(--s-color-neutral-contents-default,#23242A);display:flex;align-items:center;justify-content:center;transition:background .15s;}
.ai-stop-btn:hover{background:var(--s-color-neutral-contents-sub);}
.ai-tpl-input{width:100%;border:none;outline:none;resize:none;font-family:var(--b-fontFamily-body-default,"Pretendard Variable");font-size:0.875rem;font-weight:400;color:var(--s-color-neutral-contents-default,#23242A);line-height:1.25rem;background:transparent;min-height:2.5rem;}
.ai-tpl-input::placeholder{color:var(--s-color-neutral-contents-placeholder,#8F93A3);}
.ai-panel-body.loading,.ai-panel-body.results{align-items:stretch;justify-content:flex-start;padding:0;gap:0;}
.ai-chat-log{display:none;flex-direction:column;width:100%;}
.ai-chat-log.has-turns{display:flex;}
.ai-panel-body.has-history{align-items:stretch;justify-content:flex-start;padding:0;gap:0;}
.ai-turn-archived{width:100%;pointer-events:none;opacity:.9;padding-bottom:8px;margin-bottom:4px;}
.ai-turn-archived button,.ai-turn-archived input,.ai-turn-archived textarea{cursor:default!important;}
.ai-body-result{display:flex;flex-direction:column;width:100%;}
.ai-body-loading-state{display:flex;flex-direction:column;width:100%;}
.ai-bubble-area{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding:12px 20px;width:100%;box-sizing:border-box;}
.ai-user-bubble{background:var(--s-color-neutral-surface-lightness,rgba(35,36,42,0.05));border-radius:10px;padding:10px 14px;font-size:14px;color:var(--s-color-neutral-contents-default,#23242A);line-height:20px;max-width:calc(100% - 56px);}
/* 발화 위에 붙는 대상 컨텍스트 줄 (Figma bubbleArea/context) — 좌측 56px는 버블과 같은 인셋 */
.ai-turn-context{display:flex;height:24px;align-items:center;justify-content:flex-end;width:100%;padding-left:56px;box-sizing:border-box;}
.ai-turn-context-inner{display:flex;align-items:center;gap:6px;overflow:hidden;max-width:100%;}
.ai-turn-context-return{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.ai-turn-context-return svg{width:16.6667px;height:13.3364px;display:block;transform:scaleX(-1);}
.ai-turn-context-type{width:24px;height:24px;border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ai-turn-context-type svg{width:14.0011px;height:16.0015px;display:block;}
.ai-turn-context-label{font-size:12px;line-height:16px;color:var(--s-color-neutral-contents-sub,#515462);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 바디 상단 경계 페이드 (Figma 🟣 gradient/single, h=24) — 디자이너 노트대로 mask-image + ease(0.25,0.1,0.25,1) */
.ai-body-fade-anchor{position:relative;height:0;width:100%;z-index:5;}
.ai-body-fade{position:absolute;top:0;left:0;right:0;height:24px;pointer-events:none;background:var(--s-color-neutral-background-default,#FFF);-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,0.86) 25%,rgba(0,0,0,0.45) 60%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,0.86) 25%,rgba(0,0,0,0.45) 60%,rgba(0,0,0,0) 100%);}
.ai-reply-area{display:flex;flex-direction:column;gap:12px;padding:12px 20px;width:100%;box-sizing:border-box;}
.ai-loading-row{display:flex;align-items:center;gap:8px;}
/* Figma loading 에셋(GIF)이 자체 애니메이션을 갖고 있어 CSS 펄스는 걸지 않는다 */
.ai-sparkle{width:20px;height:20px;flex-shrink:0;display:block;object-fit:contain;}
.ai-loading-text{font-size:14px;color:var(--s-color-neutral-contents-default,#23242A);line-height:20px;}
@keyframes igShimmerAnim{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.ig-shimmer{background:linear-gradient(135deg,rgba(247,228,255,0.95) 0%,rgba(185,233,238,0.85) 35%,rgba(220,195,255,0.9) 65%,rgba(185,233,238,0.9) 100%);background-size:300% 300%;animation:igShimmerAnim 3s ease-in-out infinite;}
.ig-edit-btn{display:flex;height:2.5rem;padding:0.5rem 1rem;justify-content:center;align-items:center;gap:0.375rem;flex:1 0 0;border-radius:0.5rem;border:1px solid var(--s-color-neutral-border-default,rgba(35,36,42,0.15));background:var(--s-color-neutral-background-default,#FFF);font-size:14px;font-weight:500;color:var(--s-color-neutral-contents-default,#23242A);cursor:pointer;transition:background .12s;}
.ig-edit-btn:hover{background:rgba(35,36,42,0.05);}
.bg-color-item{display:flex;align-items:center;gap:4px;width:100%;text-align:left;font-size:14px;line-height:20px;color:var(--s-color-neutral-contents-default,#23242A);padding:2px 4px;background:transparent;border:none;cursor:pointer;border-radius:4px;transition:background .12s;}
.bg-color-item:hover{background:rgba(35,36,42,0.06);}
.bg-color-chip{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid rgba(90,101,119,0.24);flex-shrink:0;vertical-align:middle;}
.sim-thumb{flex:1;aspect-ratio:1/1;border-radius:8px;border:1px solid rgba(90,101,119,0.15);overflow:hidden;cursor:pointer;position:relative;background:rgba(90,101,118,0.09);}
#aiBodyPhotoSearch .photo-srch-row .sim-thumb{aspect-ratio:3/4;}
.sim-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.sim-thumb.selected{border:2px solid #26C7D9;box-shadow:inset 0 0 0 2px #FFFFFF;}
.sim-thumb::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .15s;}
.sim-thumb:hover::after{background:rgba(0,0,0,0.12);}
.mds-thumb{flex:1;aspect-ratio:1/1;border-radius:8px;border:1px solid rgba(90,101,119,0.15);overflow:hidden;cursor:pointer;position:relative;background:rgba(90,101,118,0.09);}
.mds-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.mds-thumb::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .15s;}
.mds-thumb:hover::after{background:rgba(0,0,0,0.12);}
.sim-panel-btn{display:flex;width:100%;height:40px;padding:8px 16px;justify-content:center;align-items:center;gap:6px;border-radius:8px;border:1px solid rgba(35,36,42,0.15);background:#FFF;font-size:14px;font-weight:500;color:#23242A;cursor:pointer;font-family:'Pretendard Variable',sans-serif;transition:background .12s;box-sizing:border-box;}
.sim-panel-btn:hover{background:rgba(35,36,42,0.05);}
.sim-panel-btn:hover{background:var(--s-color-brand-primary-background,#E7F9FB);}
.ig-img-wrap{position:relative;width:100%;aspect-ratio:1/1;border-radius:8px;border:1px solid rgba(35,36,42,0.15);overflow:hidden;cursor:pointer;}
.ig-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.ig-img-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;transition:opacity .18s;}
.ig-img-wrap:hover .ig-img-overlay{opacity:1;}
.ig-img-overlay span{color:#FFF;font-size:14px;font-weight:500;line-height:20px;}
.ai-result-reply{display:flex;flex-direction:column;gap:12px;padding:12px 20px;align-items:flex-start;}
.ai-result-text{font-size:14px;color:var(--s-color-neutral-contents-default,#23242A);line-height:20px;margin:0;}
#decorateWorking,#decorateDone{display:flex;flex-direction:column;gap:8px;}
.ai-result-tpl-label{font-size:12px;font-weight:600;color:var(--s-color-neutral-contents-additional,#73788C);margin-top:4px;}
.ai-result-cards{display:flex;flex-direction:column;gap:8px;padding:0 20px 20px;}
.ai-result-card{border-radius:8px;overflow:hidden;position:relative;cursor:pointer;background:rgba(90,101,118,0.09);border:1px solid rgba(90,101,119,0.15);width:100%;aspect-ratio:312/176;flex-shrink:0;transition:opacity .15s;}
.ai-result-card:hover{opacity:.85;}
.ai-result-card img{width:100%;height:100%;object-fit:cover;display:block;}
.ai-result-card-badge{position:absolute;bottom:3px;left:3px;background:rgba(22,24,29,0.9);color:rgba(255,255,255,0.95);font-size:10px;font-weight:600;padding:0 6px;border-radius:999px;line-height:16px;height:16px;display:flex;align-items:center;z-index:3;}
.ai-result-card-crown{position:absolute;bottom:3px;right:3px;background:rgba(22,24,29,0.9);border-radius:999px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:9px;z-index:4;}
/* mds-selectMode: inset 0, padding 2px, radius 8px — 2px Miricle 그라디언트 링 */
.ai-result-card.selected::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;padding:2px;border-radius:8px;background:linear-gradient(90deg,#1AC5EA 0%,#FF67CB 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;}
/* innerBorder: 2px solid #FFFFFF, radius 6px */
.ai-result-card.selected::before{content:'';position:absolute;inset:2px;z-index:2;pointer-events:none;border:2px solid #FFFFFF;border-radius:6px;}
.tpl-applied-toast{box-sizing:border-box;position:fixed;top:48px;left:50%;transform:translateX(-50%);display:flex;flex-direction:row;align-items:center;width:285px;height:48px;padding:8px 12px;gap:12px;background:#23242A;border-radius:10px;filter:drop-shadow(0px 4px 12px rgba(98,102,119,0.15));z-index:400;font-family:'Pretendard Variable',sans-serif;}
.tpl-applied-toast-icon{flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center;}
.tpl-applied-toast-text{flex:1;min-width:0;font-size:14px;font-weight:500;line-height:20px;color:#FFFFFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tpl-applied-toast-undo{box-sizing:border-box;flex:none;display:flex;align-items:center;justify-content:center;gap:6px;width:73px;height:32px;padding:4px 12px;background:#515462;border:none;border-radius:8px;font-size:14px;font-weight:500;line-height:20px;color:#F1F2F3;font-family:'Pretendard Variable',sans-serif;cursor:pointer;transition:background .12s;}
.tpl-applied-toast-undo:hover{background:#63667A;}
/* 추천 템플릿 더보기 패널 */
.tpl-more-header{display:flex;align-items:center;gap:4px;padding:12px 16px;height:56px;flex-shrink:0;}
.tpl-more-title{font-size:16px;font-weight:600;color:#16181D;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tpl-more-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:12px 20px 24px;}
/* 템플릿 상세 패널 */
.tpl-detail-header{display:flex;flex-direction:column;gap:12px;padding:12px 20px;flex-shrink:0;}
.tpl-detail-title-row{display:flex;align-items:center;gap:4px;width:100%;}
.tpl-detail-title{font-size:16px;font-weight:600;color:#16181D;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tpl-detail-apply{display:flex;align-items:center;justify-content:center;width:100%;padding:10px;background:var(--s-color-neutral-surface-lightness,rgba(35,36,42,0.05));border-radius:8px;font-size:14px;font-weight:500;color:#23242A;cursor:pointer;border:none;}
.tpl-detail-apply:hover{background:rgba(35,36,42,0.1);}
.tpl-detail-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:12px 24px 24px;}
.tpl-detail-page{width:100%;aspect-ratio:312/176;border-radius:8px;overflow:hidden;border:1px solid var(--s-color-neutral-border-default,rgba(35,36,42,0.15));position:relative;background:rgba(90,101,118,0.09);flex-shrink:0;}
.tpl-detail-page img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.ai-input-card{border-radius:0.75rem;border:1px solid var(--s-color-neutral-border-default,rgba(35,36,42,0.15));background:var(--s-color-neutral-background-default,#FFF);display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;}
.ai-input-body{display:flex;padding:0.75rem 0.75rem 0 0.75rem;flex-direction:column;align-items:flex-start;gap:0.75rem;align-self:stretch;cursor:text;min-height:4rem;}
.ai-placeholder{color:var(--s-color-neutral-contents-placeholder,#8F93A3);font-family:var(--b-fontFamily-body-default,"Pretendard Variable");font-size:var(--b-fontSize-14,0.875rem);font-weight:var(--b-fontWeight-regular,400);line-height:var(--b-lineHeight-rem-14,1.25rem);}
.ai-input-footer{display:flex;padding:0.625rem 0.75rem;align-items:center;gap:0.5rem;align-self:stretch;}
.ai-add-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:0.5rem;background:transparent;transition:background .15s;flex-shrink:0;}
.ai-add-btn:hover{background:var(--s-color-neutral-surface-lightness);}
.ai-add-btn.nudge{border:2px solid #21AFBF;border-radius:8px;animation:nudgePulse 1.2s ease-in-out infinite;}
@keyframes nudgePulse{0%,100%{box-shadow:0 0 0 0 rgba(33,175,191,0.4);}50%{box-shadow:0 0 0 6px rgba(33,175,191,0);}}
.ai-send-btn{margin-left:auto;width:2rem;height:2rem;border-radius:50%;background:var(--s-color-brand-primary-default);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px var(--s-color-brand-primary-opacityMedium);transition:background .15s;flex-shrink:0;}
.ai-send-btn:hover{background:var(--s-color-brand-primary-accessible);}
.ai-send-btn svg{width:1.25rem;height:1.25rem;}
.ai-designer-card{display:flex;flex-direction:column;align-items:flex-start;padding:0;gap:0;background:#FFFFFF;border:1px solid rgba(35,36,42,0.15);border-radius:12px;box-sizing:border-box;margin:20px 1.5rem 0;position:relative;isolation:isolate;}
.ai-designer-card::before{content:'';position:absolute;inset:-2px;background:linear-gradient(125.06deg,rgba(26,197,234,0.5) -2.31%,rgba(255,103,203,0.5) 97.12%);opacity:0;filter:blur(6px);border-radius:14px;z-index:-1;transition:opacity .3s;}
.ai-designer-card:hover::before{opacity:0.6;}
.ai-designer-hdr{background:#FFFFFF;padding-bottom:8px;}
.ai-designer-menus{background:#FFFFFF;padding-bottom:8px;}
.ai-designer-card .ai-send-btn{position:relative;overflow:visible;}
.ai-designer-card .ai-send-btn::before{content:'';position:absolute;bottom:calc(100% + 2px);right:11px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #23242A;opacity:0;pointer-events:none;z-index:102;transition:opacity 0s;}
.ai-designer-card .ai-send-btn:hover::before{opacity:1;transition:opacity 0s .7s;}
.ai-designer-card .ai-send-btn::after{content:'AI 디자이너 사용해보기';position:absolute;right:-39px;bottom:calc(100% + 8px);background:#23242A;color:#fff;font-size:12px;font-weight:400;font-family:'Pretendard Variable',sans-serif;padding:6px 10px;border-radius:6px;white-space:nowrap;width:90px;text-align:center;opacity:0;pointer-events:none;filter:drop-shadow(0px 4px 12px rgba(98,102,119,0.15));z-index:100;transition:opacity 0s;}
.ai-designer-card .ai-send-btn:hover::after{opacity:1;transition:opacity .15s .7s;}
.ai-designer-hdr{display:flex;flex-direction:row;align-items:center;padding:12px 12px 8px 16px;gap:8px;align-self:stretch;border-radius:12px 12px 0 0;}
.ai-designer-title{font-family:'Pretendard Variable',sans-serif;font-weight:600;font-size:16px;line-height:24px;background:linear-gradient(90deg,#1AC5EA 0%,#FF67CB 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;flex:1;}
.elem-body .ai-designer-card{margin:0;}
.ai-designer-hdr-btn{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s;}
.ai-designer-hdr-btn:hover{background:rgba(35,36,42,0.05);}
.ai-designer-menus{display:flex;flex-direction:column;padding:0 4px;align-self:stretch;}
.ai-designer-menu{display:flex;flex-direction:row;align-items:center;padding:10px 12px;gap:8px;align-self:stretch;border-radius:8px;cursor:pointer;height:40px;transition:background .15s;}
.ai-designer-menu:hover{background:rgba(88,98,118,0.09);}
.ai-designer-menu::after{content:'';display:block;width:20px;height:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M18.3332 3.95801C18.3332 3.61283 18.0533 3.33301 17.7082 3.33301C17.363 3.33301 17.0832 3.61283 17.0832 3.95801V9.58301C17.0832 10.3884 16.4302 11.0413 15.6248 11.0413L3.70134 11.0413L7.29502 7.75238C7.54966 7.51933 7.56716 7.12399 7.33412 6.86936C7.10108 6.61472 6.70574 6.59722 6.4511 6.83026L2.0049 10.8995C1.5537 11.3124 1.55371 12.0234 2.0049 12.4363L6.4511 16.5055C6.70574 16.7385 7.10108 16.721 7.33412 16.4664C7.56716 16.2118 7.54966 15.8164 7.29503 15.5834L3.69797 12.2913L15.6248 12.2913C17.1206 12.2913 18.3332 11.0788 18.3332 9.58301V3.95801Z' fill='%2373788C'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0;opacity:0;transition:opacity .15s;}
.ai-designer-menu:hover::after{opacity:1;}
.ai-designer-menu-text{flex:1;font-family:'Pretendard Variable',sans-serif;font-weight:400;font-size:14px;line-height:142%;color:#16181D;}
.ai-designer-card .ai-input-card{border:none;border-top:1px solid rgba(35,36,42,0.08);border-radius:0 0 11px 11px;}
.ai-designer-card .ai-input-wrap{align-self:stretch;}

/* panel collapse handle */
.panel-handle{position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:20px;height:40px;background:var(--s-color-neutral-background-default);border:1px solid var(--s-color-neutral-divider-default);border-radius:0 6px 6px 0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;box-shadow:1px 1px 4px var(--s-color-neutral-static-black-lightness);}
.panel-handle svg{width:10px;height:10px;fill:none;stroke:var(--s-color-neutral-contents-placeholder);stroke-width:2;stroke-linecap:round;}
.panel-handle:hover svg{stroke:var(--s-color-neutral-contents-sub);}

/* ── CANVAS AREA ── */
.canvas-col{display:flex;flex-direction:column;flex:1;overflow:hidden;}
.canvas-wrap{flex:1;background:var(--s-color-neutral-background-sunken);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.canvas{background:var(--s-color-neutral-background-default);box-shadow:0px 4px 12px rgba(98,102,119,0.15);position:relative;transition:transform .15s;aspect-ratio:1350/759;width:85%;max-height:85%;}

/* ── BOTTOM BAR ── */
.bottom-panel{display:flex;flex-direction:column;background:var(--s-color-neutral-background-default);border-top:1px solid var(--s-color-neutral-divider-default);flex-shrink:0;}
.bp-handle-row{display:flex;justify-content:center;padding:0;position:relative;height:0;}
.bp-handle-btn{width:4.5rem;height:0.875rem;display:flex;align-items:center;justify-content:center;border-radius:4px;background:var(--s-color-neutral-background-default,#FFF);box-shadow:0 -1px 4px rgba(35,36,42,0.08);position:relative;top:-0.4375rem;cursor:pointer;transition:background .15s;}
.bp-handle-btn:hover{background:var(--s-color-neutral-surface-lightness);}
.bp-handle-btn svg{width:0.75rem;height:0.75rem;transform:rotate(180deg);}
.page-option-panel{display:flex;align-items:flex-start;align-self:stretch;padding:0.75rem 0 0 0.75rem;flex-direction:column;}
.page-strip{display:flex;align-items:center;gap:6px;overflow-x:auto;}
.bottom-bar{background:var(--s-color-neutral-background-default);display:flex;padding:0.25rem 0.75rem;justify-content:flex-end;align-items:center;gap:7.8125rem;align-self:stretch;flex-shrink:0;}
.page-strip::-webkit-scrollbar{height:0;}
.page-th{width:7.125rem;height:4rem;border-radius:0.5rem;border:1.5px solid transparent;cursor:pointer;position:relative;background:var(--s-color-neutral-static-gray-lightness);overflow:hidden;flex-shrink:0;transition:border-color .15s;}
.page-th:hover{border-color:var(--s-color-neutral-border-default);}
.page-th.on{border:1.5px solid var(--s-color-brand-primary-default,#21AFBF);}
.page-lbl{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:0.375rem;overflow:hidden;color:var(--s-color-neutral-static-black-dark,rgba(0,0,0,0.60));text-overflow:ellipsis;font-family:var(--b-fontFamily-body-default,"Pretendard Variable");font-size:var(--b-fontSize-12,0.75rem);font-weight:var(--b-fontWeight-medium,500);line-height:var(--b-lineHeight-rem-12,1rem);padding:0 0.5625rem;}
.page-add{display:flex;padding:0.75rem 1.25rem;justify-content:center;align-items:center;gap:var(--c-button-spacing-itemGap-sideItem-L,0);flex:1 0 0;align-self:stretch;border-radius:var(--c-button-radius-square-L,0.625rem);border:var(--c-button-borderWidth-L,1px) solid var(--s-color-neutral-border-transparent,rgba(35,36,42,0));background:var(--s-color-semantic-normalDeep-surface,rgba(115,120,140,0.10));transition:background .15s;}
.page-add:hover{background:var(--s-color-neutral-surface-light);}
.page-add svg{width:24px;height:24px;flex-shrink:0;}
.bottom-right{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.editor-label{display:flex;height:var(--c-button-size-container-L,3rem);padding:0.75rem 1.25rem;justify-content:center;align-items:center;gap:var(--c-button-spacing-itemGap-L,0.375rem);border-radius:var(--c-button-radius-square-L,0.625rem);border:var(--c-button-borderWidth-L,1px) solid var(--s-color-neutral-border-transparent,rgba(35,36,42,0));background:var(--s-color-neutral-background-transparent,rgba(35,36,42,0));color:var(--s-color-semantic-normalDeep-accessible,#23242A);text-align:center;font-family:var(--b-fontFamily-body-default,"Pretendard Variable");font-size:var(--b-fontSize-16,1rem);font-style:normal;font-weight:var(--b-fontWeight-medium,500);line-height:var(--b-lineHeight-rem-16,1.5rem);cursor:pointer;}
.editor-label svg{width:20px;height:20px;}
.zoom-controls{display:flex;align-items:center;gap:4px;}
.zoom-btn{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--s-color-neutral-contents-sub);transition:background .15s;}
.zoom-btn:hover{background:var(--s-color-neutral-surface-lightness);}
.zoom-btn svg{width:20px;height:20px;}
.zoom-val{font-size:14px;color:var(--s-color-neutral-contents-default);width:80px;height:40px;display:flex;align-items:center;padding:0 12px;border:1px solid var(--s-color-neutral-border-default,rgba(35,36,42,0.15));border-radius:8px;background:var(--s-color-neutral-background-transparent,rgba(35,36,42,0));white-space:nowrap;}
.bot-ico{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--s-color-neutral-contents-additional);transition:background .15s;}
.bot-ico:hover{background:var(--s-color-neutral-surface-lightness);color:var(--s-color-neutral-contents-sub);}
.bot-ico svg{width:20px;height:20px;}

/* ── 요소 패널 ── */
.elem-tabs-wrap{position:relative;border-bottom:1px solid rgba(90,101,119,0.15);}
.elem-tabs{display:flex;overflow-x:auto;scrollbar-width:none;padding-right:28px;}
.elem-tabs::-webkit-scrollbar{display:none;}
.elem-tab{flex-shrink:0;height:40px;padding:0 16px;border:none;border-bottom:2px solid transparent;background:transparent;font-size:14px;font-weight:500;color:#70798f;cursor:pointer;white-space:nowrap;font-family:'Pretendard Variable',sans-serif;transition:color .15s,border-color .15s;margin-bottom:-1px;}
.elem-tab.active{color:#21afbf;border-bottom:2px solid #21afbf;}
.elem-tabs-arrow{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50px;border:1px solid rgba(90,101,119,0.15);background:#fff;box-shadow:0 4px 6px rgba(11,60,65,0.15);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.elem-body{flex:1;overflow-y:auto;padding:20px 20px 40px;display:flex;flex-direction:column;gap:24px;}
.elem-section{display:flex;flex-direction:column;gap:8px;}
.elem-section-hdr{display:flex;align-items:center;height:20px;}
.elem-section-label{flex:1;font-size:14px;font-weight:500;color:#16181d;font-family:'Pretendard Variable',sans-serif;}
.elem-more-btn{font-size:14px;font-weight:500;color:#21afbf;background:none;border:none;cursor:pointer;padding:0;font-family:'Pretendard Variable',sans-serif;flex-shrink:0;}
.elem-thumb-row{display:flex;gap:8px;}
.elem-thumb-sq{flex:1;aspect-ratio:1;background:rgba(90,101,118,0.09);border-radius:8px;cursor:pointer;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;}
.elem-thumb-sq:hover::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.07);}
.elem-thumb-sq img{width:100%;height:100%;object-fit:cover;display:block;}
.elem-recommend-wrap{background:rgba(90,101,118,0.09);border-radius:12px;padding:6px;display:flex;gap:4px;}
.elem-recommend-item{flex:1;aspect-ratio:1;background:rgba(90,101,118,0.07);border-radius:8px;overflow:hidden;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.elem-collection-row{display:flex;gap:8px;}
.elem-collection-card{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;cursor:pointer;}
.elem-collection-box{background:rgba(90,101,118,0.09);border-radius:8px;padding:8px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;aspect-ratio:1;position:relative;}
.elem-collection-sub{border-radius:4px;background:rgba(90,101,118,0.12);}
.elem-collection-badge{position:absolute;bottom:4px;left:4px;height:16px;min-width:24px;background:rgba(22,24,29,0.9);border-radius:999px;padding:0 6px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:rgba(255,255,255,0.95);}
.elem-collection-name{font-size:14px;font-weight:500;color:#16181d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.elem-ai-input-box{border:1px solid rgba(35,36,42,0.15);border-radius:12px;background:#fff;overflow:hidden;}
.elem-ai-textarea{padding:12px 16px;min-height:52px;font-size:14px;color:#8f93a3;line-height:20px;}
.elem-ai-bottom{display:flex;align-items:center;padding:10px 12px;gap:8px;border-top:1px solid rgba(35,36,42,0.1);}
.elem-ai-send{width:32px;height:32px;border-radius:50%;background:#21afbf;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.elem-ai-plus{width:28px;height:28px;border:none;background:rgba(35,36,42,0.05);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.elem-tool-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid rgba(90,101,119,0.24);border-radius:8px;background:#fff;cursor:pointer;}
.elem-tool-icon{width:40px;height:40px;border-radius:8px;background:#f1f2f4;flex-shrink:0;overflow:hidden;}
.elem-tool-icon img{width:100%;height:100%;object-fit:cover;}
.elem-tool-label{flex:1;font-size:14px;color:#16181d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── PANEL TABS (for switching panels) ── */
/* currently panels are shown via JS switching .on on .sb-item */

/* ── SCROLLABLE TEMPLATE PANELS ── */
.panel-view{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--s-color-neutral-background-default);opacity:0;pointer-events:none;transition:opacity .15s;}
.panel-view.active{opacity:1;pointer-events:all;}

/* tag badge */
.tpl-tag{position:absolute;top:4px;left:4px;background:var(--s-color-neutral-surface-dark);color:var(--s-color-neutral-contents-inverse-default);font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;}

/* toast */
.toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--s-color-neutral-surface-dark);color:var(--s-color-neutral-contents-inverse-default);font-size:12px;padding:8px 18px;border-radius:100px;opacity:0;transition:all .25s;pointer-events:none;white-space:nowrap;z-index:9999;}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

/* modal overlay */
.modal-overlay{position:fixed;inset:0;background:var(--s-color-neutral-surface-medium);z-index:500;display:none;align-items:center;justify-content:center;}
.modal-overlay.on{display:flex;}
.modal{background:var(--s-color-neutral-background-default);border-radius:16px;width:480px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--s-color-neutral-divider-default);}
.modal-title{font-size:15px;font-weight:700;}
.modal-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:7px;color:var(--s-color-neutral-contents-additional);}
.modal-close:hover{background:var(--s-color-neutral-surface-lightness);}
.modal-close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.modal-body{flex:1;overflow-y:auto;padding:16px 20px;}

/* ── Re-query Card ── */
.ai-requery-reply{display:flex;flex-direction:column;gap:8px;padding:12px 20px;}
.rq-card{margin:0 20px 8px;width:320px;height:264px;background:#FFFFFF;border:1px solid rgba(35,36,42,0.15);border-radius:12px;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;flex-shrink:0;box-sizing:border-box;}
.rq-card-hdr{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:8px 12px 8px 16px;gap:8px;width:320px;height:48px;background:var(--s-color-neutral-surface-lightness,rgba(35,36,42,0.05));box-sizing:border-box;flex-shrink:0;}
.rq-card-title{flex:1;font-family:"Pretendard Variable",sans-serif;font-size:14px;font-weight:500;font-style:normal;line-height:20px;color:#23242A;}
.rq-card-icon-btn{display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;background:transparent;flex-shrink:0;}
.rq-card-icon-btn:hover{background:rgba(35,36,42,0.07);}
.rq-card-icon-btn.edit{width:24px;height:24px;}
.rq-card-icon-btn.close-btn{width:32px;height:32px;}
.rq-card-body{padding:8px 0 0;width:320px;height:168px;box-sizing:border-box;flex-shrink:0;overflow:hidden;}
.rq-option{display:flex;flex-direction:row;align-items:center;padding:10px 12px;gap:8px;width:320px;height:40px;border-radius:8px;box-sizing:border-box;cursor:pointer;}
.rq-option:hover{background:rgba(35,36,42,0.04);}
.rq-option.selected{background:rgba(35,36,42,0.03);}
.rq-radio{width:20px;height:20px;border-radius:50px;border:1px solid rgba(88,98,118,0.24);background:#FFFFFF;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;transition:border-color .12s;}
.rq-option.selected .rq-radio{border-color:#21AFBF;}
.rq-option.selected .rq-radio::after{content:'';width:12px;height:12px;border-radius:50px;background:#21AFBF;}
.rq-label{font-family:"Pretendard Variable",sans-serif;font-size:14px;font-weight:400;font-style:normal;line-height:20px;color:#23242A;flex:1;}
.rq-option-other{padding:6px 12px;}
.rq-other-input{border:none;outline:none;font-size:14px;font-family:"Pretendard Variable",sans-serif;color:#23242A;border-bottom:1px solid rgba(35,36,42,0.15);padding:2px 0;background:transparent;flex:1;height:28px;line-height:20px;}
.rq-other-input::placeholder{color:#8F93A3;}
.rq-other-edit{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;background:transparent;flex-shrink:0;}
.rq-other-edit:hover{background:rgba(35,36,42,0.07);}
.rq-card-footer{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:8px;gap:8px;width:320px;height:48px;box-sizing:border-box;flex-shrink:0;}
.rq-pg{display:flex;align-items:center;gap:4px;flex:1;}
.rq-pg-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:transparent;cursor:pointer;}
.rq-pg-btn:hover:not(:disabled){background:rgba(35,36,42,0.07);}
.rq-pg-btn:disabled{opacity:0.5;cursor:default;}
.rq-pg-cur{font-family:"Pretendard Variable",sans-serif;font-size:14px;font-weight:500;line-height:20px;color:#23242A;text-align:center;}
.rq-pg-sep,.rq-pg-total{font-family:"Pretendard Variable",sans-serif;font-size:14px;font-weight:400;line-height:20px;color:#73788C;text-align:center;}
.rq-submit{height:32px;padding:4px 16px;border-radius:8px;background:#21AFBF;color:#FFFFFF;font-family:"Pretendard Variable",sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;transition:background .12s;flex-shrink:0;}
.rq-submit:hover{background:#1C95A2;}
.rq-submit:disabled{background:rgba(35,36,42,0.1);color:rgba(35,36,42,0.3);cursor:not-allowed;}
.ai-decorate-result-area{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:0 20px 12px;width:100%;box-sizing:border-box;}
.ai-decorate-preview-card{border-radius:12px;overflow:hidden;background:linear-gradient(white,white) padding-box,linear-gradient(90deg,#1AC5EA 0%,#FF67CB 100%) border-box;border:1.5px solid transparent;flex-shrink:0;width:100%;}
.ai-decorate-card-hdr{display:flex;align-items:center;padding:10px 12px 10px 16px;gap:8px;height:44px;box-sizing:border-box;flex-shrink:0;background:linear-gradient(270deg,rgba(247,228,255,0.50) 0%,rgba(185,233,238,0.50) 100%);}
.ai-decorate-card-title{flex:1;font-size:14px;font-weight:500;line-height:20px;color:#23242A;}
.ai-decorate-thumb-loading{width:100%;aspect-ratio:1/1;background:linear-gradient(135deg,rgba(26,197,234,0.15) 0%,rgba(200,160,240,0.2) 50%,rgba(255,103,203,0.15) 100%);}
.ai-decorate-thumb-result{width:100%;aspect-ratio:1/1;background:rgba(88,98,118,0.09);border-radius:8px;overflow:hidden;display:none;position:relative;}
.ai-decorate-thumb-result img{width:100%;height:100%;object-fit:contain;display:block;}
.ai-decorate-footer{display:none;align-items:center;gap:8px;padding:8px;height:56px;box-sizing:border-box;flex-shrink:0;}
/* 꾸미기 적용 전환 — 썸네일은 이전 위치에서 이어받고, 나머지는 뒤이어 페이드 인 */
.dec-swap-out{opacity:0;transition:opacity .14s ease;}
.dec-thumb-flip{transition:transform .24s cubic-bezier(.22,.61,.36,1);}
.dec-fade-in{opacity:0;transition:opacity .2s ease .06s;}
.dec-fade-in.is-in{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .dec-swap-out,.dec-thumb-flip,.dec-fade-in{transition:none;}
}
/* 컨텍스트 배너: 입력창과 같은 래퍼에 두고 absolute로 띄운다.
   left/right를 0으로 물려 폭이 입력창과 항상 같아지고, 입력창 높이가 변해도 따라붙는다. */
.ai-ctx-anchor{position:relative;width:100%;}
.ai-ctx-banner{position:absolute;left:var(--ai-input-inset,12px);right:var(--ai-input-inset,12px);bottom:calc(100% + 8px);box-sizing:border-box;z-index:6;}
/* 맞춤법 로딩 스켈레톤 (Figma popover/body variants=일반) — 행 14px, 간격 6px, 하단 180px 페이드 */
.sc-skeleton{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px;width:100%;box-sizing:border-box;overflow:hidden;}
.sc-skel-row{height:14px;border-radius:8px;background:var(--s-color-neutral-surface-lightness,rgba(35,36,42,0.05));flex-shrink:0;}
.sc-skeleton-fade{position:absolute;left:0;right:0;bottom:0;height:180px;pointer-events:none;background:var(--s-color-neutral-background-default,#FFF);-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,0.86) 25%,rgba(0,0,0,0.45) 60%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,0.86) 25%,rgba(0,0,0,0.45) 60%,rgba(0,0,0,0) 100%);}
.ai-decorate-cancel-btn{height:40px;padding:0 16px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--s-color-neutral-background-default,#FFF);border:1px solid var(--s-color-neutral-border-light,rgba(35,36,42,0.15));color:var(--s-color-neutral-contents-default,#23242A);font-size:14px;font-weight:500;cursor:pointer;flex-shrink:0;transition:background .12s;}
.ai-decorate-cancel-btn:hover{background:var(--s-color-neutral-surface-lightness,rgba(35,36,42,0.05));}
.ai-decorate-apply-btn{flex:1;height:40px;background:#21AFBF;color:#FFF;font-size:14px;font-weight:500;border-radius:8px;cursor:pointer;transition:background .12s;}
.ai-decorate-apply-btn:hover{background:#1C95A2;}
.canvas-decorate-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:10;display:block;}

/* ── UT Dev Panel ── */
#devToggle{position:fixed;top:52px;right:12px;z-index:9999;background:#1a1a2e;color:#e0e0ff;border:none;border-radius:8px;padding:5px 10px;font-size:10px;font-weight:700;cursor:pointer;opacity:0.5;transition:opacity .15s;letter-spacing:.5px;line-height:1.4;}
#devToggle:hover{opacity:0.9;}
#devPanel{position:fixed;top:0;right:-280px;width:260px;height:100vh;background:#fff;border-left:1px solid rgba(35,36,42,0.12);box-shadow:-4px 0 20px rgba(0,0,0,0.1);z-index:9998;transition:right .22s ease;display:flex;flex-direction:column;overflow:hidden;}
#devPanel.open{right:0;}
.dev-hdr{display:flex;align-items:flex-start;justify-content:space-between;padding:14px 14px 12px;border-bottom:1px solid rgba(35,36,42,0.08);background:#f7f8ff;flex-shrink:0;}
.dev-hdr-info{}
.dev-hdr-title{font-size:12px;font-weight:700;color:#23242A;letter-spacing:.3px;}
.dev-hdr-sub{font-size:10px;color:#8F93A3;margin-top:2px;}
.dev-close{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;background:transparent;cursor:pointer;color:#8F93A3;font-size:12px;flex-shrink:0;}
.dev-close:hover{background:rgba(35,36,42,0.07);}
.dev-body{flex:1;overflow-y:auto;padding:10px 10px 24px;}
.dev-section{margin-bottom:14px;}
.dev-section-label{font-size:9px;font-weight:700;color:#ABAEBA;letter-spacing:.6px;text-transform:uppercase;margin-bottom:5px;padding:0 4px;}
.dev-case{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;padding:7px 9px;border-radius:7px;border:1px solid rgba(35,36,42,0.09);background:#fff;cursor:pointer;margin-bottom:5px;transition:background .12s;}
.dev-case:hover{background:#f1f2f3;border-color:rgba(35,36,42,0.15);}
.dev-case:active{background:#E7F9FB;border-color:#21AFBF;}
.dev-tag{display:inline-block;font-size:9px;font-weight:700;color:#1C95A2;background:#E7F9FB;border-radius:4px;padding:1px 5px;letter-spacing:.2px;}
.dev-case-text{font-size:11px;color:#23242A;line-height:1.45;}