:root {
     --totem-bg: #1a1a1a;
     --totem-card-bg: #fff;
     --totem-gold: #ffd700;
     --totem-red: #ff4d4d;
     --totem-blue: #00e5ff;
     --totem-purple: #b050ff;
     --font-serif: 'Noto Serif KR', serif;
 }

 body {
     background-color: var(--totem-bg);
     color: #eee;
     font-family: 'Outfit', sans-serif;
     margin: 0;
     overflow-x: hidden;
 }

 .totem-app {
     max-width: 1000px;
     margin: 0 auto;
     padding: 20px;
     height: 100vh;
     display: flex;
     flex-direction: column;
 }

 .app-header {
     margin-bottom: 20px;
     position: relative;
     text-align: center;
 }

 .app-header h1 {
     font-size: 1.5rem;
     margin: 0;
 }

 .back-link {
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     color: #888;
     text-decoration: none;
     font-size: 0.9rem;
 }

 /* Editor Layout */
 .editor-container {
     display: flex;
     gap: 40px;
     flex: 1;
     justify-content: center;
     align-items: flex-start;
     padding-top: 20px;
 }

 @media (max-width: 768px) {
     .editor-container {
         flex-direction: column;
         align-items: center;
     }
 }

 /* Control Panel */
 .control-panel {
     background: rgba(255, 255, 255, 0.05);
     padding: 25px;
     border-radius: 16px;
     width: 300px;
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .control-panel h2 {
     font-size: 1.2rem;
     margin-top: 0;
     margin-bottom: 20px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     padding-bottom: 10px;
 }

 .input-group {
     margin-bottom: 20px;
 }

 .input-group label {
     display: block;
     font-size: 0.85rem;
     color: #aaa;
     margin-bottom: 8px;
 }

 .input-group input[type="text"] {
     width: 100%;
     background: rgba(0, 0, 0, 0.3);
     border: 1px solid #444;
     color: #fff;
     padding: 10px;
     border-radius: 8px;
     font-size: 1rem;
     box-sizing: border-box;
 }

 /* Icon Selector */
 .icon-selector {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
 }

 .icon-btn {
     background: rgba(0, 0, 0, 0.3);
     border: 1px solid #444;
     color: #fff;
     width: 40px;
     height: 40px;
     border-radius: 8px;
     cursor: pointer;
     font-size: 1.2rem;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.2s;
 }

 .icon-btn.active,
 .icon-btn:hover {
     border-color: var(--totem-gold);
     background: rgba(255, 215, 0, 0.1);
     transform: scale(1.1);
 }

 /* Color Selector */
 .color-selector {
     display: flex;
     gap: 10px;
 }

 .color-btn {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     border: 2px solid transparent;
     /* default border */
     cursor: pointer;
     transition: transform 0.2s;
 }

 .color-btn.active {
     border: 2px solid #fff;
     box-shadow: 0 0 10px currentColor;
     /* glow effect */
     transform: scale(1.1);
 }

 #download-btn {
     width: 100%;
     background: linear-gradient(45deg, #ffca28, #ff6f00);
     border: none;
     padding: 12px;
     color: #fff;
     font-weight: bold;
     border-radius: 8px;
     cursor: pointer;
     margin-top: 10px;
     transition: filter 0.2s;
 }

 #download-btn:hover {
     filter: brightness(1.2);
 }

 /* Preview Panel */
 .preview-panel {
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .preview-caption {
     font-size: 0.8rem;
     color: #666;
     margin-top: 15px;
 }

 /* TOTEM COMPONENT (The Card) */
 .totem-card {
     width: 300px;
     height: 450px;
     background-color: #fff5e6;
     /* Traditional paper color */
     position: relative;
     border-radius: 4px;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     /* texture */
     background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239e8c6b' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
 }

 /* Border */
 .totem-border {
     position: absolute;
     top: 15px;
     left: 15px;
     right: 15px;
     bottom: 15px;
     border: 2px solid #aaa;
     pointer-events: none;
 }

 .totem-border::after {
     content: '';
     position: absolute;
     top: 5px;
     left: 5px;
     right: 5px;
     bottom: 5px;
     border: 1px dashed #aaa;
 }

 /* Content */
 .totem-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     z-index: 2;
     text-align: center;
     font-family: var(--font-serif);
     color: #d32f2f;
     /* Traditional Red Ink */
 }

 .totem-header {
     font-size: 1.2rem;
     margin-bottom: 20px;
     writing-mode: vertical-rl;
     text-orientation: upright;
     letter-spacing: 5px;
     opacity: 0.7;
 }

 .totem-icon {
     font-size: 5rem;
     margin-bottom: 20px;
     filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2));
 }

 .totem-text {
     font-size: 2.5rem;
     font-weight: bold;
     word-break: keep-all;
     max-width: 80%;
     line-height: 1.3;
 }

 .totem-seal {
     position: absolute;
     bottom: 30px;
     right: 30px;
     border: 3px solid #d32f2f;
     color: #d32f2f;
     padding: 5px 8px;
     font-size: 0.9rem;
     font-weight: bold;
     transform: rotate(-15deg);
     opacity: 0.6;
     border-radius: 4px;
 }

 /* Theme Variances */
 .theme-gold .totem-content {
     color: #b8860b;
 }

 .theme-gold .totem-border {
     border-color: #ffd700;
 }

 .theme-gold .totem-seal {
     border-color: #b8860b;
     color: #b8860b;
 }

 .theme-red .totem-content {
     color: #d32f2f;
 }

 .theme-red .totem-border {
     border-color: #ff4d4d;
 }

 .theme-red .totem-seal {
     border-color: #d32f2f;
     color: #d32f2f;
 }

 .theme-blue .totem-content {
     color: #0277bd;
 }

 .theme-blue .totem-border {
     border-color: #00e5ff;
 }

 .theme-blue .totem-seal {
     border-color: #0277bd;
     color: #0277bd;
 }

 .theme-purple .totem-content {
     color: #7b1fa2;
 }

 .theme-purple .totem-border {
     border-color: #b050ff;
 }

 .theme-purple .totem-seal {
     border-color: #7b1fa2;
     color: #7b1fa2;
 }